Skip to content

Commit 3194ba5

Browse files
mishig25mishig25
committed
wip
1 parent c42d5f7 commit 3194ba5

File tree

5 files changed

+165
-42
lines changed

5 files changed

+165
-42
lines changed

‎src/lib/components/chat/AssistantIntroduction.svelte

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -124,7 +124,10 @@
124124
</div>
125125
</div>
126126

127-
<div class="absolute right-3 top-3 md:right-4 md:top-4">
127+
<div
128+
class="absolute right-3 top-3 md:right-4 md:top-4"
129+
class:hidden={$page.data.embeddedAssistantId}
130+
>
128131
<div class="flex flex-row items-center gap-1">
129132
<button
130133
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"
@@ -161,6 +164,7 @@
161164
goto(`${base}/`);
162165
}}
163166
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"
167+
class:hidden={$page.data.embeddedAssistantId}
164168
>
165169
<CarbonRenew class="mr-1.5 text-xxs" /> Reset to default model
166170
</button>

‎src/lib/components/chat/ChatWindow.svelte

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -241,7 +241,7 @@
241241
<div
242242
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"
243243
>
244-
{#if $page.data?.assistant && !!messages.length}
244+
{#if $page.data?.assistant && !!messages.length && !$page.data.embeddedAssistantId}
245245
<a
246246
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"
247247
href="{base}/settings/assistants/{$page.data.assistant._id}"
@@ -263,7 +263,7 @@
263263

264264
{$page.data.assistant.name}
265265
</a>
266-
{:else if preprompt && preprompt != currentModel.preprompt}
266+
{:else if preprompt && preprompt != currentModel.preprompt && !$page.data.embeddedAssistantId}
267267
<SystemPromptModal preprompt={preprompt ?? ""} />
268268
{/if}
269269

@@ -448,6 +448,7 @@
448448
</form>
449449
<div
450450
class="mt-2 flex justify-between self-stretch px-1 text-xs text-gray-400/90 max-md:mb-2 max-sm:gap-2"
451+
class:hidden={$page.data.embeddedAssistantId}
451452
>
452453
<p>
453454
Model:

‎src/routes/+layout.server.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -244,5 +244,6 @@ export const load: LayoutServerLoad = async ({ locals, depends, request }) => {
244244
loginRequired,
245245
loginEnabled: requiresUser,
246246
guestMode: requiresUser && messagesBeforeLogin > 0,
247+
embeddedAssistantId: "5555",
247248
};
248249
};

‎src/routes/+layout.svelte

Lines changed: 53 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -203,49 +203,63 @@
203203
{#if envPublic.PUBLIC_APPLE_APP_ID}
204204
<meta name="apple-itunes-app" content={`app-id=${envPublic.PUBLIC_APPLE_APP_ID}`} />
205205
{/if}
206+
<!-- TODO: remove -->
207+
<script src="http://localhost:5173/chat/api/assistant/5/embed-snippet" defer></script>
206208
</svelte:head>
207209

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

212-
<ExpandNavigation
213-
isCollapsed={isNavCollapsed}
214-
on:click={() => (isNavCollapsed = !isNavCollapsed)}
215-
classNames="absolute inset-y-0 z-10 my-auto {!isNavCollapsed
216-
? 'left-[280px]'
217-
: 'left-0'} *:transition-transform"
218-
/>
219-
220-
<div
221-
class="grid h-full w-screen grid-cols-1 grid-rows-[auto,1fr] overflow-hidden text-smd {!isNavCollapsed
222-
? 'md:grid-cols-[280px,1fr]'
223-
: 'md:grid-cols-[0px,1fr]'} transition-[300ms] [transition-property:grid-template-columns] dark:text-gray-300 md:grid-rows-[1fr]"
224-
>
225-
<MobileNav isOpen={isNavOpen} on:toggle={(ev) => (isNavOpen = ev.detail)} title={mobileNavTitle}>
226-
<NavMenu
227-
conversations={data.conversations}
228-
user={data.user}
229-
canLogin={data.user === undefined && data.loginEnabled}
230-
on:shareConversation={(ev) => shareConversation(ev.detail.id, ev.detail.title)}
231-
on:deleteConversation={(ev) => deleteConversation(ev.detail)}
232-
on:editConversationTitle={(ev) => editConversationTitle(ev.detail.id, ev.detail.title)}
233-
/>
234-
</MobileNav>
235-
<nav
236-
class=" grid max-h-screen grid-cols-1 grid-rows-[auto,1fr,auto] overflow-hidden *:w-[280px] max-md:hidden"
214+
{#if !$page.data.embeddedAssistantId}
215+
<ExpandNavigation
216+
isCollapsed={isNavCollapsed}
217+
on:click={() => (isNavCollapsed = !isNavCollapsed)}
218+
classNames="absolute inset-y-0 z-10 my-auto {!isNavCollapsed
219+
? 'left-[280px]'
220+
: 'left-0'} *:transition-transform"
221+
/>
222+
223+
<div
224+
class="grid h-full w-screen grid-cols-1 grid-rows-[auto,1fr] overflow-hidden text-smd {!isNavCollapsed
225+
? 'md:grid-cols-[280px,1fr]'
226+
: 'md:grid-cols-[0px,1fr]'} transition-[300ms] [transition-property:grid-template-columns] dark:text-gray-300 md:grid-rows-[1fr]"
237227
>
238-
<NavMenu
239-
conversations={data.conversations}
240-
user={data.user}
241-
canLogin={data.user === undefined && data.loginEnabled}
242-
on:shareConversation={(ev) => shareConversation(ev.detail.id, ev.detail.title)}
243-
on:deleteConversation={(ev) => deleteConversation(ev.detail)}
244-
on:editConversationTitle={(ev) => editConversationTitle(ev.detail.id, ev.detail.title)}
245-
/>
246-
</nav>
247-
{#if currentError}
248-
<Toast message={currentError} />
249-
{/if}
250-
<slot />
251-
</div>
228+
<MobileNav
229+
isOpen={isNavOpen}
230+
on:toggle={(ev) => (isNavOpen = ev.detail)}
231+
title={mobileNavTitle}
232+
>
233+
<NavMenu
234+
conversations={data.conversations}
235+
user={data.user}
236+
canLogin={data.user === undefined && data.loginEnabled}
237+
on:shareConversation={(ev) => shareConversation(ev.detail.id, ev.detail.title)}
238+
on:deleteConversation={(ev) => deleteConversation(ev.detail)}
239+
on:editConversationTitle={(ev) => editConversationTitle(ev.detail.id, ev.detail.title)}
240+
/>
241+
</MobileNav>
242+
<nav
243+
class=" grid max-h-screen grid-cols-1 grid-rows-[auto,1fr,auto] overflow-hidden *:w-[280px] max-md:hidden"
244+
>
245+
<NavMenu
246+
conversations={data.conversations}
247+
user={data.user}
248+
canLogin={data.user === undefined && data.loginEnabled}
249+
on:shareConversation={(ev) => shareConversation(ev.detail.id, ev.detail.title)}
250+
on:deleteConversation={(ev) => deleteConversation(ev.detail)}
251+
on:editConversationTitle={(ev) => editConversationTitle(ev.detail.id, ev.detail.title)}
252+
/>
253+
</nav>
254+
{#if currentError}
255+
<Toast message={currentError} />
256+
{/if}
257+
<slot />
258+
</div>
259+
{:else}
260+
<div
261+
class="grid h-full w-screen grid-cols-1 grid-rows-[auto,1fr] overflow-hidden text-smd dark:text-gray-300"
262+
>
263+
<slot />
264+
</div>
265+
{/if}

‎src/routes/api/assistant/[id]/embed-snippet/+server.ts

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
export async function GET() {
2+
const script = `(function() {
3+
function resizeIframeToContentSize(iframe) {
4+
if (iframe.contentWindow) {
5+
const maxHeight = window.innerHeight * 0.8; // 80% of window height
6+
const contentHeight = iframe.contentWindow.document.body.scrollHeight;
7+
console.log("contentHeight", contentHeight);
8+
iframe.style.height = Math.min(contentHeight, maxHeight) + "px";
9+
}
10+
}
11+
12+
document.addEventListener('DOMContentLoaded', function() {
13+
const button = document.createElement('button');
14+
button.innerHTML = 'AI Chat';
15+
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';
16+
17+
const modal = document.createElement('div');
18+
modal.className = 'hidden fixed inset-0 z-[1001] overflow-auto bg-black bg-opacity-50';
19+
20+
const modalContent = document.createElement('div');
21+
modalContent.className = 'bg-transparent mx-auto my-[5%] max-w-2xl rounded';
22+
23+
const closeButton = document.createElement('span');
24+
closeButton.innerHTML = '&times;';
25+
closeButton.className = 'text-gray-500 float-right text-2xl font-bold cursor-pointer hover:text-gray-700';
26+
27+
const iframe = document.createElement('iframe');
28+
iframe.className = 'w-full rounded-xl';
29+
iframe.style.height = '500px'; // Set an initial height
30+
iframe.src = \`http://localhost:5173/chat/\`;
31+
32+
iframe.onload = function() {
33+
const iframeWindow = this.contentWindow;
34+
iframeWindow.parent = {
35+
resizeIframeToContentSize: resizeIframeToContentSize.bind(null, iframe)
36+
};
37+
38+
const script = iframeWindow.document.createElement('script');
39+
script.textContent = \`
40+
this.container = this.frameElement.contentWindow.document.body;
41+
this.lastScrollHeight = 0;
42+
43+
this.watch = () => {
44+
cancelAnimationFrame(this.watcher);
45+
46+
if (this.lastScrollHeight !== container.scrollHeight) {
47+
parent.resizeIframeToContentSize();
48+
}
49+
this.lastScrollHeight = container.scrollHeight;
50+
this.watcher = requestAnimationFrame(this.watch);
51+
};
52+
this.watcher = window.requestAnimationFrame(this.watch);
53+
\`;
54+
iframeWindow.document.body.appendChild(script);
55+
};
56+
57+
modalContent.appendChild(closeButton);
58+
modalContent.appendChild(iframe);
59+
modal.appendChild(modalContent);
60+
61+
function closeModal() {
62+
modal.classList.add('hidden');
63+
}
64+
65+
button.onclick = function() {
66+
modal.classList.remove('hidden');
67+
resizeIframeToContentSize(iframe); // Resize on opening to ensure correct initial size
68+
};
69+
70+
closeButton.onclick = closeModal;
71+
72+
window.onclick = function(event) {
73+
if (event.target == modal) {
74+
closeModal();
75+
}
76+
};
77+
78+
document.addEventListener('keydown', function(event) {
79+
if (event.key === 'Escape') {
80+
closeModal();
81+
}
82+
});
83+
84+
// Add resize event listener to adjust iframe height when window is resized
85+
window.addEventListener('resize', function() {
86+
if (!modal.classList.contains('hidden')) {
87+
resizeIframeToContentSize(iframe);
88+
}
89+
});
90+
91+
document.body.appendChild(button);
92+
document.body.appendChild(modal);
93+
});
94+
})();
95+
`;
96+
97+
return new Response(script, {
98+
headers: {
99+
"Content-Type": "application/javascript",
100+
"Access-Control-Allow-Origin": "*",
101+
},
102+
});
103+
}

0 commit comments

Comments
 (0)