Édition des messages de l'utilsateur

vite/src/ChatApp.svelte

@@ -7,7 +7,6 @@
     import AssistantForm from './AssistantForm.svelte';
     import { onMount } from 'svelte';
 
-    // export let apiKey = '';
     export let proxyBaseUrl = '';
     export let model_list = [];
 
@@ -17,7 +16,7 @@
     let assistants = [];
 
     let messages = [];
-    let newMessage = '';
+    let chatInput; // Reference to the chat input textarea
     let chatContainer;
     let assistantForm; // Reference to the AssistantForm component
     let modal; // Reference to the Modal component
@@ -129,7 +128,7 @@
         return readStream(response.body, progressCallback);
     }
 
-    function sendMessage() {
+    function sendMessage(newMessage) {
         if (newMessage.trim() === '') return;
 
         if (!messages.length && assistant) {
@@ -169,6 +168,12 @@
         }
     }
 
+    function handleChatInputKey(event) {
+        if (event.key === 'Enter') {
+            sendMessage(chatInput.value);
+        }
+    }
+
     function clearMessages() {
         messages = [];
     }
@@ -383,30 +388,14 @@
         reader.readAsText(file);
     }
 
-    /*
+    function handleEditMessage(event) {
-    import { onMount } from 'svelte';
+        const { index, content } = event.detail;
-    import { writable } from 'svelte/store';
+        messages[index].content = content;
+        messages = messages.slice(0, index);
 
-    let messages = writable([]);
+        sendMessage(content);
-    let newMessage = writable("");
+    }
 
-    const sendMessage = () => {
-        if ($newMessage.trim() !== "") {
-            messages.update(msgs => [...msgs, { role: 'user', content: $newMessage }]);
-            newMessage.set("");
-        }
-    };
-
-    // Sample function to simulate receiving a message from the AI
-    const receiveMessage = (content) => {
-        messages.update(msgs => [...msgs, { role: 'assistant', content }]);
-    };
-
-    onMount(() => {
-        // Simulate receiving an initial message from the AI
-        receiveMessage("Hello! How can I assist you today?");
-    });
-    */
 </script>
 
 <header>
@@ -448,15 +437,17 @@
 <main>
     <div class="chat-container" bind:this="{chatContainer}" >
         {#each messages as message, index (index)}
-        <ChatMessage message="{message}" container="{chatContainer.parentElement}" markdown={md} />
+        <ChatMessage message="{message}"
+        message_index={index} on:editMessage="{handleEditMessage}"
+        container="{chatContainer.parentElement}" markdown={md} />
         {/each}
     </div>
 </main>
 
 <footer>
     <textarea class="chat-input" rows="1"
-            bind:value="{newMessage}"
+            bind:this="{chatInput}"
-            on:keyup={e => { if (e.key === 'Enter') sendMessage(); }}
+            on:keyup={handleChatInputKey}
             placeholder="Saisissez votre message ici..."
             aria-label="Chat with AI"></textarea>
 </footer>

vite/src/ChatMessage.svelte

@@ -1,12 +1,20 @@
 <script>
     import { beforeUpdate, afterUpdate } from 'svelte';
+    import { createEventDispatcher } from 'svelte';
 
     export let message;
     export let container;
     export let markdown;
+    export let message_index;
+
+    const dispatch = createEventDispatcher();
 
     let autoscroll;
     let renderedContent = '';
+    let editableElement;
+
+    // Track whether the user is editing the message
+    let isEditing = false;
 
     $: renderedContent = markdown.render(message.content);
 
@@ -17,7 +25,37 @@
 
 	afterUpdate(() => {
 		if (autoscroll) container.scrollTo(0, container.scrollHeight);
+
+        if (isEditing && editableElement) {
+            editableElement.focus();
+        }
 	});
+
+	function handleKeyDown(event) {
+		if (event.key === 'Enter' && event.shiftKey) {
+			// Allow the default behavior of adding a new line
+			return;
+		}
+
+		switch (event.key) {
+			case 'Escape':
+				isEditing = false;
+				break;
+			case 'Enter':
+				event.preventDefault();
+				const editedContent = event.target.innerText.trim();
+
+				if (editedContent) {
+                    dispatch('editMessage', {
+                        index: message_index,
+                        content: editedContent
+                    });
+				}
+
+				isEditing = false;
+				break;
+		}
+	}
 </script>
 
 <style>
@@ -32,6 +70,27 @@
 
 {#if message.role != 'system'}
     <div class={message.role + ' message'}>
+
+	{#if isEditing}
+        <!-- svelte-ignore a11y-no-static-element-interactions -->
+       <div bind:this={editableElement}
+            class="editable-message"
+            contenteditable="true"
+            on:keydown={handleKeyDown}>{message.content}</div>
+    {:else}
         {@html renderedContent}
+
+        <div class="toolbar">
+            {#if message.role == 'user'}
+	            <button class="btn btn-primary btn-sm" title="Modifier" on:click={() => {isEditing = true}}>
+	                <span class="icon-edit"></span>
+	            </button>
+            {:else if message.role == 'assistant'}
+                <button class="btn btn-primary btn-sm" title="Copier"><span class="icon-content_copy"></span></button>
+                <button class="btn btn-primary btn-sm" title="Régénérer"><span class="icon-loop"></span></button>
+                <button class="btn btn-primary btn-sm" title="Supprimer le message"><span class="icon-delete"></span></button>
+            {/if}
+        </div>
+	{/if}
     </div>
  {/if}