wip

src/lib/components/InferencePlayground/InferencePlayground.svelte

@@ -55,11 +55,6 @@
 		];
 	}
 
-	function updateMessage(value: string, messageIdx: number) {
-		conversation.messages[messageIdx].content = value;
-		conversation = conversation;
-	}
-
 	function deleteAndGetItem<T>(array: T[], index: number) {
 		if (index >= 0 && index < array.length) {
 			return array.splice(index, 1)[0];
@@ -206,10 +201,6 @@
 				index={0}
 				{viewCode}
 				on:addMessage={addMessage}
-				on:messageValueChanged={(e) => {
-					const { conversationIdx, messageIdx, value } = e.detail;
-					updateMessage(value, conversationIdx, messageIdx);
-				}}
 				on:deleteMessage={(e) => deleteMessage(e.detail)}
 			/>
 		</div>
@@ -288,7 +279,7 @@
 		>
 			<PlaygroundModelSelector
 				{models}
-				{conversation}
+				bind:conversation
 				on:click={() => (showModelPickerModal = open)}
 			/>
 

src/lib/components/InferencePlayground/InferencePlaygroundConversation.svelte

@@ -40,8 +40,6 @@
 			<Message
 				class="border-b"
 				{message}
-				{messageIdx}
-				on:messageValueChanged
 				on:delete={() => dispatch('deleteMessage', messageIdx)}
 				autofocus={!loading && messageIdx === conversation.messages.length - 1}
 			/>

src/lib/components/InferencePlayground/InferencePlaygroundMessage.svelte

@@ -3,7 +3,6 @@
 	import { type ChatCompletionInputMessage } from '@huggingface/tasks';
 
 	export let message: ChatCompletionInputMessage;
-	export let messageIdx: number;
 	export let autofocus: boolean = false;
 
 	const dispatch = createEventDispatcher<{
@@ -20,8 +19,7 @@
 	</div>
 	<textarea
 		{autofocus}
-		value={message.content}
-		on:input={(e) => dispatch('messageValueChanged', { messageIdx, value: e.target.value })}
+		bind:value={message.content}
 		placeholder="Enter {message.role} message"
 		class="resize-none rounded bg-transparent px-2 py-2.5 ring-gray-100 [field-sizing:content] hover:resize-y hover:bg-white focus:resize-y focus:bg-white focus:ring group-hover/message:ring @2xl:px-3 dark:ring-gray-600 dark:hover:bg-gray-900 dark:focus:bg-gray-900"
 		rows="1"