prise en charge des outils + weather

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

@@ -10,6 +10,7 @@
 	let prompt = $state("")
 	let { data }: PageProps = $props();
 	let messages = $state([] as Message[])
+	let waiting = $state(false)
 
     onMount(async ()=>{
       if (page.state.prompt) {
@@ -26,19 +27,54 @@
     const sendRequest = async(theprompt:string) => {
       prompt = ""
       let lastrole=""
-      //let reasoning = false
+      let lastToolName=""
+      waiting = true
+
       for await (const chunk of chatApi.createChatMessage(data.spaceId, data.chatId, { prompt: theprompt })) {
-        if (chunk.role!=lastrole) {
+        if (waiting && chunk.role==="assistant") {
+          waiting = false
+        }
+
+        if (chunk.role!=lastrole || chunk.toolName!=lastToolName) {
           const currentDate = new Date()
-          messages.push({
+          let m = {
             id: ''+currentDate.getTime(),
             role: chunk.role,
-            content: chunk.content,
-          } as Message)
+            content: "",
+            reasoning: "",
+          } as Message
+          if (chunk.toolName) {
+            m.toolcalls = [{
+              ID: "0",
+              Type: "Function",
+              Function: {
+                Name: chunk.toolName,
+                Arguments: ""
+              }
+            }]
+          }
+          if (chunk.reasoning) {
+            m.reasoning = chunk.content
+          } else {
+            m.content = chunk.content
+          }
+          messages.push(m)
           lastrole=chunk.role
+          lastToolName=chunk.toolName
         } else {
-          messages[messages.length-1].content += chunk.content
+          if (chunk.reasoning) {
+            messages[messages.length-1].reasoning += chunk.content
+          } else {
+            messages[messages.length-1].content += chunk.content
+          }
         }
+
+        if (chunk.done) {
+          document
+              .querySelectorAll<HTMLDivElement>('div.reasoning:not(.hidden)')
+              .forEach((el) => el.classList.add('hidden'));
+        }
+
         historyDiv.scrollTop = historyDiv.scrollHeight;
       }
     }
@@ -52,11 +88,23 @@
     <div id="history" class="flex-1 container overflow-auto" bind:this={historyDiv}>
         {#each messages as message (message.id)}
             <div class={["message", "rounded", message.role]}>
-                <div class="message-content">
-                    <SvelteMarkdown source={message.content} />
+                {#if message.reasoning }
+                <div class="message-content reasoning">
+                    <SvelteMarkdown source={message.reasoning} streaming={true}/>
                 </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>
+                {:else}
+                    <div class="message-content">
+                        <SvelteMarkdown source={message.content} streaming={true}/>
+                    </div>
+                {/if}
             </div>
         {/each}
+        {#if waiting}
+            <div class="animate-pulse">...</div>
+        {/if}
     </div>
     <div id="prompt" class="container">
        <form class="request flex w-full" onsubmit={handleOnSubmit}>

backend/web/src/routes/layout.css

@@ -275,21 +275,19 @@ h2 {
 /*  chat */
 
 .message {
-	@apply m-2 rounded p-2;
+	@apply rounded p-2;
 
 	&.user {
 		@apply bg-sky-700 dark:text-white;
 	}
-
-	&.assistant {
-		&.reasoning {
-			@apply text-white/50;
-		}
-	}
 }
 
 .message-content {
 	@apply text-sm;
+
+	&.reasoning {
+		@apply text-white/50;
+	}
 }
 
 .message-content p {