paufinement de l'UI du chat

backend/web/src/routes/(authenticated)/[space]/(chat)/[conversation]/+page.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import {autofocus} from "$lib/ui/autofocus"
-	import { onMount } from "svelte"
+	import {onMount, tick } from "svelte"
 	import {page} from "$app/state"
 	import {chatApi} from "$lib/api/endpoints/chat"
 	import type { PageProps } from './$types';
@@ -20,9 +20,12 @@
         let chatWithMessage : ChatWithMessages = await chatApi.getChat(data.spaceId, data.chatId)
         messages = chatWithMessage.messages
       }
+      await tick()
+      historyDiv.scrollTop = historyDiv.scrollHeight;
     })
 
     let historyDiv: HTMLDivElement;
+    let inputPrompt: HTMLDivElement;
 
     const sendRequest = async(theprompt:string) => {
       prompt = ""
@@ -34,6 +37,12 @@
         if (waiting && chunk.role==="assistant") {
           waiting = false
         }
+        if (chunk.done) {
+          document
+              .querySelectorAll<HTMLDivElement>('div.reasoning:not(.hidden)')
+              .forEach((el) => el.classList.add('hidden'));
+          return
+        }
 
         if (chunk.role!=lastrole || chunk.toolName!=lastToolName) {
           const currentDate = new Date()
@@ -80,7 +89,9 @@
     }
 
     const handleOnSubmit = async ()=>{
+      historyDiv.scrollTop = historyDiv.scrollHeight;
       await sendRequest(prompt)
+      inputPrompt.focus()
     }
 </script>
 
@@ -94,7 +105,7 @@
                 </div>
                 {/if}
                 {#if message.toolcalls != null && message.toolcalls.length>0}
-                    <div class="text-green-600">⚒️ Appel de l'outil {message.toolcalls[0].Function.Name}</div>
+                    <div class="tool text-sm mt-2 py-1 px-2 rounded">⚒️ Appel de l'outil {message.toolcalls[0].Function.Name}</div>
                 {:else}
                     <div class="message-content">
                         <SvelteMarkdown source={message.content} streaming={true}/>
@@ -114,6 +125,7 @@
                placeholder="..."
                bind:value={prompt}
                use:autofocus
+               bind:this={inputPrompt}
             />
            <button class="chatbutton">Go</button>
        </form>

backend/web/src/routes/layout.css

@@ -275,10 +275,54 @@ h2 {
 /*  chat */
 
 .message {
-	@apply rounded p-2;
+	/*@apply rounded p-2;*/
 
 	&.user {
-		@apply bg-sky-700 dark:text-white;
+		@apply bg-sky-500/20 px-2 py-1 text-sky-700 dark:text-sky-300;
+	}
+	.tool {
+		@apply bg-green-500/20 px-2 py-1 text-green-700 dark:text-green-300;
+	}
+
+	hr {
+		@apply my-4;
+	}
+
+	ul,
+	ol {
+		@apply my-2;
+	}
+
+	h1 {
+		@apply text-2xl font-bold;
+	}
+
+	h2 {
+		@apply text-xl font-bold;
+	}
+
+	h3 {
+		@apply text-lg font-bold;
+	}
+
+	h4 {
+		@apply text-base;
+	}
+
+	h5 {
+		@apply text-sm;
+	}
+
+	li {
+		@apply ml-5 list-disc pl-4 marker:text-xl;
+	}
+
+	pre {
+		@apply my-2 rounded p-1 whitespace-pre dark:bg-stone-700;
+	}
+
+	p {
+		@apply my-2;
 	}
 }
 
@@ -289,11 +333,3 @@ h2 {
 		@apply text-white/50;
 	}
 }
-
-.message-content p {
-	@apply my-2;
-}
-
-.message-content pre {
-	@apply my-2 whitespace-pre dark:bg-stone-700;
-}