refac

src/lib/components/playground/ChatCompletion.svelte

@@ -0,0 +1,105 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+
+	export let messages = [];
+
+	onMount(() => {
+		messages.forEach((message, idx) => {
+			let textareaElement = document.getElementById(`${message.role}-${idx}-textarea`);
+			textareaElement.style.height = '';
+			textareaElement.style.height = textareaElement.scrollHeight + 'px';
+		});
+	});
+</script>
+
+<div class="py-3 space-y-3">
+	{#each messages as message, idx}
+		<div class="flex gap-2 group">
+			<div class="flex items-start pt-1">
+				<button
+					class="px-2 py-1 text-sm font-semibold uppercase min-w-[6rem] text-left dark:group-hover:bg-gray-800 rounded-lg transition"
+					on:click={() => {
+						message.role = message.role === 'user' ? 'assistant' : 'user';
+					}}>{message.role}</button
+				>
+			</div>
+
+			<div class="flex-1">
+				<textarea
+					id="{message.role}-{idx}-textarea"
+					class="w-full bg-transparent outline-none rounded-lg p-2 text-sm resize-none overflow-hidden"
+					placeholder="Enter {message.role === 'user' ? 'a user' : 'an assistant'} message here"
+					rows="1"
+					on:input={(e) => {
+						e.target.style.height = '';
+						e.target.style.height = e.target.scrollHeight + 'px';
+					}}
+					on:focus={(e) => {
+						e.target.style.height = '';
+						e.target.style.height = e.target.scrollHeight + 'px';
+
+						// e.target.style.height = Math.min(e.target.scrollHeight, 200) + 'px';
+					}}
+					bind:value={message.content}
+				/>
+			</div>
+
+			<div class=" pt-1">
+				<button
+					class=" group-hover:text-gray-500 dark:text-gray-900 dark:hover:text-gray-300 transition"
+					on:click={() => {
+						messages = messages.filter((message, messageIdx) => messageIdx !== idx);
+					}}
+				>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke-width="2"
+						stroke="currentColor"
+						class="w-5 h-5"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							d="M15 12H9m12 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
+						/>
+					</svg>
+				</button>
+			</div>
+		</div>
+
+		<hr class=" dark:border-gray-800" />
+	{/each}
+
+	<button
+		class="flex items-center gap-2 px-2 py-1"
+		on:click={() => {
+			console.log(messages.at(-1));
+			messages.push({
+				role: (messages.at(-1)?.role ?? 'assistant') === 'user' ? 'assistant' : 'user',
+				content: ''
+			});
+			messages = messages;
+		}}
+	>
+		<div>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke-width="1.5"
+				stroke="currentColor"
+				class="w-5 h-5"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					d="M12 9v6m3-3H9m12 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
+				/>
+			</svg>
+		</div>
+
+		<div class=" text-sm font-medium">Add message</div>
+	</button>
+</div>

src/routes/(app)/playground/+page.svelte

@@ -17,6 +17,7 @@
 	import { generateOpenAIChatCompletion } from '$lib/apis/openai';
 
 	import { splitStream } from '$lib/utils';
+	import ChatCompletion from '$lib/components/playground/ChatCompletion.svelte';
 
 	let mode = 'chat';
 	let loaded = false;
@@ -38,9 +39,13 @@
 	];
 
 	const scrollToBottom = () => {
-		// const element = document.getElementById('text-completion-textarea');
+		let element;
 
-		const element = document.getElementById('messages-container');
+		if (mode === 'chat') {
+			element = document.getElementById('messages-container');
+		} else {
+			element = document.getElementById('text-completion-textarea');
+		}
 
 		if (element) {
 			element.scrollTop = element?.scrollHeight;
@@ -423,100 +428,7 @@
 									placeholder="You're a helpful assistant."
 								/>
 							{:else if mode === 'chat'}
-								<div class="py-3 space-y-3">
-									{#each messages as message, idx}
-										<div class="flex gap-2 group">
-											<div class="flex items-start pt-1">
-												<button
-													class="px-2 py-1 text-sm font-semibold uppercase min-w-[6rem] text-left dark:group-hover:bg-gray-800 rounded-lg transition"
-													on:click={() => {
-														message.role = message.role === 'user' ? 'assistant' : 'user';
-													}}>{message.role}</button
-												>
-											</div>
-
-											<div class="flex-1">
-												<textarea
-													id="{message.role}-{idx}-textarea"
-													class="w-full bg-transparent outline-none rounded-lg p-2 text-sm resize-none overflow-hidden"
-													placeholder="Enter {message.role === 'user'
-														? 'a user'
-														: 'an assistant'} message here"
-													rows="1"
-													on:input={(e) => {
-														e.target.style.height = '';
-														e.target.style.height = e.target.scrollHeight + 'px';
-													}}
-													on:focus={(e) => {
-														e.target.style.height = '';
-														e.target.style.height = e.target.scrollHeight + 'px';
-
-														// e.target.style.height = Math.min(e.target.scrollHeight, 200) + 'px';
-													}}
-													bind:value={message.content}
-												/>
-											</div>
-
-											<div class=" pt-1">
-												<button
-													class=" group-hover:text-gray-500 dark:text-gray-900 dark:hover:text-gray-300 transition"
-													on:click={() => {
-														messages = messages.filter((message, messageIdx) => messageIdx !== idx);
-													}}
-												>
-													<svg
-														xmlns="http://www.w3.org/2000/svg"
-														fill="none"
-														viewBox="0 0 24 24"
-														stroke-width="2"
-														stroke="currentColor"
-														class="w-5 h-5"
-													>
-														<path
-															stroke-linecap="round"
-															stroke-linejoin="round"
-															d="M15 12H9m12 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
-														/>
-													</svg>
-												</button>
-											</div>
-										</div>
-
-										<hr class=" dark:border-gray-800" />
-									{/each}
-
-									<button
-										class="flex items-center gap-2 px-2 py-1"
-										on:click={() => {
-											console.log(messages.at(-1));
-											messages.push({
-												role:
-													(messages.at(-1)?.role ?? 'assistant') === 'user' ? 'assistant' : 'user',
-												content: ''
-											});
-											messages = messages;
-										}}
-									>
-										<div>
-											<svg
-												xmlns="http://www.w3.org/2000/svg"
-												fill="none"
-												viewBox="0 0 24 24"
-												stroke-width="1.5"
-												stroke="currentColor"
-												class="w-5 h-5"
-											>
-												<path
-													stroke-linecap="round"
-													stroke-linejoin="round"
-													d="M12 9v6m3-3H9m12 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
-												/>
-											</svg>
-										</div>
-
-										<div class=" text-sm font-medium">Add message</div>
-									</button>
-								</div>
+								<ChatCompletion bind:messages />
 							{/if}
 						</div>
 					</div>
@@ -548,22 +460,6 @@
 	</div>
 </div>
 
-<!-- <div class="min-h-screen max-h-[100dvh] w-full flex justify-center dark:text-white">
-	{#if loaded}
-		<div class=" flex flex-col justify-between w-full overflow-y-auto">
-			<div class="max-w-2xl mx-auto w-full px-3 md:px-0 my-10">
-				<div class="w-full">
-					<div class=" flex flex-col justify-center">
-						<div class=" text-2xl font-semibold self-center">My Documents</div>
-
-						<div>test</div>
-					</div>
-				</div>
-			</div>
-		</div>
-	{/if}
-</div> -->
-
 <style>
 	.font-mona {
 		font-family: 'Mona Sans';