Skip to content

Commit

Permalink
wip
Browse files Browse the repository at this point in the history
  • Loading branch information
mishig25 committed Sep 27, 2024
1 parent c42d5f7 commit 3194ba5
Show file tree
Hide file tree
Showing 5 changed files with 165 additions and 42 deletions.
6 changes: 5 additions & 1 deletion src/lib/components/chat/AssistantIntroduction.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,10 @@
</div>
</div>

<div class="absolute right-3 top-3 md:right-4 md:top-4">
<div
class="absolute right-3 top-3 md:right-4 md:top-4"
class:hidden={$page.data.embeddedAssistantId}
>
<div class="flex flex-row items-center gap-1">
<button
class="flex h-7 items-center gap-1.5 rounded-full border bg-white px-2.5 py-1 text-gray-800 shadow-sm hover:shadow-inner dark:border-gray-700 dark:bg-gray-700 dark:text-gray-300/90 dark:hover:bg-gray-800 max-sm:px-1.5 md:text-sm"
Expand Down Expand Up @@ -161,6 +164,7 @@
goto(`${base}/`);
}}
class="absolute -bottom-6 right-2 inline-flex items-center justify-center text-xs text-gray-600 underline hover:brightness-50 dark:text-gray-400 dark:hover:brightness-110"
class:hidden={$page.data.embeddedAssistantId}
>
<CarbonRenew class="mr-1.5 text-xxs" /> Reset to default model
</button>
Expand Down
5 changes: 3 additions & 2 deletions src/lib/components/chat/ChatWindow.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -241,7 +241,7 @@
<div
class="mx-auto flex h-full max-w-3xl flex-col gap-6 px-5 pt-6 sm:gap-8 xl:max-w-4xl xl:pt-10"
>
{#if $page.data?.assistant && !!messages.length}
{#if $page.data?.assistant && !!messages.length && !$page.data.embeddedAssistantId}
<a
class="mx-auto flex items-center gap-1.5 rounded-full border border-gray-100 bg-gray-50 py-1 pl-1 pr-3 text-sm text-gray-800 hover:bg-gray-100 dark:border-gray-800 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700"
href="{base}/settings/assistants/{$page.data.assistant._id}"
Expand All @@ -263,7 +263,7 @@

{$page.data.assistant.name}
</a>
{:else if preprompt && preprompt != currentModel.preprompt}
{:else if preprompt && preprompt != currentModel.preprompt && !$page.data.embeddedAssistantId}
<SystemPromptModal preprompt={preprompt ?? ""} />
{/if}

Expand Down Expand Up @@ -448,6 +448,7 @@
</form>
<div
class="mt-2 flex justify-between self-stretch px-1 text-xs text-gray-400/90 max-md:mb-2 max-sm:gap-2"
class:hidden={$page.data.embeddedAssistantId}
>
<p>
Model:
Expand Down
1 change: 1 addition & 0 deletions src/routes/+layout.server.ts
Original file line number Diff line number Diff line change
Expand Up @@ -244,5 +244,6 @@ export const load: LayoutServerLoad = async ({ locals, depends, request }) => {
loginRequired,
loginEnabled: requiresUser,
guestMode: requiresUser && messagesBeforeLogin > 0,
embeddedAssistantId: "5555",
};
};
92 changes: 53 additions & 39 deletions src/routes/+layout.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -203,49 +203,63 @@
{#if envPublic.PUBLIC_APPLE_APP_ID}
<meta name="apple-itunes-app" content={`app-id=${envPublic.PUBLIC_APPLE_APP_ID}`} />
{/if}
<!-- TODO: remove -->
<script src="http://localhost:5173/chat/api/assistant/5/embed-snippet" defer></script>
</svelte:head>

{#if !$settings.ethicsModalAccepted && $page.url.pathname !== `${base}/privacy` && PUBLIC_APP_DISCLAIMER === "1"}
<DisclaimerModal />
{/if}

<ExpandNavigation
isCollapsed={isNavCollapsed}
on:click={() => (isNavCollapsed = !isNavCollapsed)}
classNames="absolute inset-y-0 z-10 my-auto {!isNavCollapsed
? 'left-[280px]'
: 'left-0'} *:transition-transform"
/>

<div
class="grid h-full w-screen grid-cols-1 grid-rows-[auto,1fr] overflow-hidden text-smd {!isNavCollapsed
? 'md:grid-cols-[280px,1fr]'
: 'md:grid-cols-[0px,1fr]'} transition-[300ms] [transition-property:grid-template-columns] dark:text-gray-300 md:grid-rows-[1fr]"
>
<MobileNav isOpen={isNavOpen} on:toggle={(ev) => (isNavOpen = ev.detail)} title={mobileNavTitle}>
<NavMenu
conversations={data.conversations}
user={data.user}
canLogin={data.user === undefined && data.loginEnabled}
on:shareConversation={(ev) => shareConversation(ev.detail.id, ev.detail.title)}
on:deleteConversation={(ev) => deleteConversation(ev.detail)}
on:editConversationTitle={(ev) => editConversationTitle(ev.detail.id, ev.detail.title)}
/>
</MobileNav>
<nav
class=" grid max-h-screen grid-cols-1 grid-rows-[auto,1fr,auto] overflow-hidden *:w-[280px] max-md:hidden"
{#if !$page.data.embeddedAssistantId}
<ExpandNavigation
isCollapsed={isNavCollapsed}
on:click={() => (isNavCollapsed = !isNavCollapsed)}
classNames="absolute inset-y-0 z-10 my-auto {!isNavCollapsed
? 'left-[280px]'
: 'left-0'} *:transition-transform"
/>

<div
class="grid h-full w-screen grid-cols-1 grid-rows-[auto,1fr] overflow-hidden text-smd {!isNavCollapsed
? 'md:grid-cols-[280px,1fr]'
: 'md:grid-cols-[0px,1fr]'} transition-[300ms] [transition-property:grid-template-columns] dark:text-gray-300 md:grid-rows-[1fr]"
>
<NavMenu
conversations={data.conversations}
user={data.user}
canLogin={data.user === undefined && data.loginEnabled}
on:shareConversation={(ev) => shareConversation(ev.detail.id, ev.detail.title)}
on:deleteConversation={(ev) => deleteConversation(ev.detail)}
on:editConversationTitle={(ev) => editConversationTitle(ev.detail.id, ev.detail.title)}
/>
</nav>
{#if currentError}
<Toast message={currentError} />
{/if}
<slot />
</div>
<MobileNav
isOpen={isNavOpen}
on:toggle={(ev) => (isNavOpen = ev.detail)}
title={mobileNavTitle}
>
<NavMenu
conversations={data.conversations}
user={data.user}
canLogin={data.user === undefined && data.loginEnabled}
on:shareConversation={(ev) => shareConversation(ev.detail.id, ev.detail.title)}
on:deleteConversation={(ev) => deleteConversation(ev.detail)}
on:editConversationTitle={(ev) => editConversationTitle(ev.detail.id, ev.detail.title)}
/>
</MobileNav>
<nav
class=" grid max-h-screen grid-cols-1 grid-rows-[auto,1fr,auto] overflow-hidden *:w-[280px] max-md:hidden"
>
<NavMenu
conversations={data.conversations}
user={data.user}
canLogin={data.user === undefined && data.loginEnabled}
on:shareConversation={(ev) => shareConversation(ev.detail.id, ev.detail.title)}
on:deleteConversation={(ev) => deleteConversation(ev.detail)}
on:editConversationTitle={(ev) => editConversationTitle(ev.detail.id, ev.detail.title)}
/>
</nav>
{#if currentError}
<Toast message={currentError} />
{/if}
<slot />
</div>
{:else}
<div
class="grid h-full w-screen grid-cols-1 grid-rows-[auto,1fr] overflow-hidden text-smd dark:text-gray-300"
>
<slot />
</div>
{/if}
103 changes: 103 additions & 0 deletions src/routes/api/assistant/[id]/embed-snippet/+server.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,103 @@
export async function GET() {
const script = `(function() {
function resizeIframeToContentSize(iframe) {
if (iframe.contentWindow) {
const maxHeight = window.innerHeight * 0.8; // 80% of window height
const contentHeight = iframe.contentWindow.document.body.scrollHeight;
console.log("contentHeight", contentHeight);
iframe.style.height = Math.min(contentHeight, maxHeight) + "px";
}
}
document.addEventListener('DOMContentLoaded', function() {
const button = document.createElement('button');
button.innerHTML = 'AI Chat';
button.className = 'fixed bottom-5 left-5 z-50 px-5 py-2.5 bg-blue-500 text-white rounded cursor-pointer hover:bg-blue-600 transition-colors';
const modal = document.createElement('div');
modal.className = 'hidden fixed inset-0 z-[1001] overflow-auto bg-black bg-opacity-50';
const modalContent = document.createElement('div');
modalContent.className = 'bg-transparent mx-auto my-[5%] max-w-2xl rounded';
const closeButton = document.createElement('span');
closeButton.innerHTML = '&times;';
closeButton.className = 'text-gray-500 float-right text-2xl font-bold cursor-pointer hover:text-gray-700';
const iframe = document.createElement('iframe');
iframe.className = 'w-full rounded-xl';
iframe.style.height = '500px'; // Set an initial height
iframe.src = \`http://localhost:5173/chat/\`;
iframe.onload = function() {
const iframeWindow = this.contentWindow;
iframeWindow.parent = {
resizeIframeToContentSize: resizeIframeToContentSize.bind(null, iframe)
};
const script = iframeWindow.document.createElement('script');
script.textContent = \`
this.container = this.frameElement.contentWindow.document.body;
this.lastScrollHeight = 0;
this.watch = () => {
cancelAnimationFrame(this.watcher);
if (this.lastScrollHeight !== container.scrollHeight) {
parent.resizeIframeToContentSize();
}
this.lastScrollHeight = container.scrollHeight;
this.watcher = requestAnimationFrame(this.watch);
};
this.watcher = window.requestAnimationFrame(this.watch);
\`;
iframeWindow.document.body.appendChild(script);
};
modalContent.appendChild(closeButton);
modalContent.appendChild(iframe);
modal.appendChild(modalContent);
function closeModal() {
modal.classList.add('hidden');
}
button.onclick = function() {
modal.classList.remove('hidden');
resizeIframeToContentSize(iframe); // Resize on opening to ensure correct initial size
};
closeButton.onclick = closeModal;
window.onclick = function(event) {
if (event.target == modal) {
closeModal();
}
};
document.addEventListener('keydown', function(event) {
if (event.key === 'Escape') {
closeModal();
}
});
// Add resize event listener to adjust iframe height when window is resized
window.addEventListener('resize', function() {
if (!modal.classList.contains('hidden')) {
resizeIframeToContentSize(iframe);
}
});
document.body.appendChild(button);
document.body.appendChild(modal);
});
})();
`;

return new Response(script, {
headers: {
"Content-Type": "application/javascript",
"Access-Control-Allow-Origin": "*",
},
});
}

0 comments on commit 3194ba5

Please sign in to comment.