accès à un chat ouvert

backend/web/src/lib/types/api.ts

@@ -92,7 +92,7 @@ export type Chat = {
   _version: string
 }
 
-export type Message = {
+export interface Message  {
   id: string
   role: string
   content: string

backend/web/src/routes/(authenticated)/+layout.svelte

@@ -67,7 +67,7 @@
         <div class="flex flex-col h-screen ">
             <div class="px-2">
                 <div class="header container">
-                    <h1 class="flex">
+                    <h1 class="flex mx-2">
                         <span class="flex-1">{page.data.title}</span>
                         {#if page.data.back}
                             <span><a href={page.data.back} title="retour"><i class="icon-left-big"></i></a></span>

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

@@ -4,7 +4,7 @@
 	import {page} from "$app/state"
 	import {chatApi} from "$lib/api/endpoints/chat"
 	import type { PageProps } from './$types';
-	import type { Message, Chunk } from "$lib/types/api"
+	import type { Message, ChatWithMessages } from "$lib/types/api"
 	import SvelteMarkdown from '@humanspeak/svelte-markdown'
 
 	let prompt = $state("")
@@ -15,25 +15,23 @@
       if (page.state.prompt) {
         console.log(page.state.prompt)
         await sendRequest(page.state.prompt)
+      } else {
+        let chatWithMessage : ChatWithMessages = await chatApi.getChat(data.spaceId, data.chatId)
+        messages = chatWithMessage.messages
       }
     })
 
     let historyDiv: HTMLDivElement;
-    $effect(() => {
-        if (historyDiv) {
-            console.log("effect")
-            historyDiv.scrollTop = historyDiv.scrollHeight;
-        }
-    });
 
-    const sendRequest = async(theprompt) => {
+    const sendRequest = async(theprompt:string) => {
       prompt = ""
       let lastrole=""
+      //let reasoning = false
       for await (const chunk of chatApi.createChatMessage(data.spaceId, data.chatId, { prompt: theprompt })) {
         if (chunk.role!=lastrole) {
           const currentDate = new Date()
           messages.push({
-            id: currentDate.getTime(),
+            id: ''+currentDate.getTime(),
             role: chunk.role,
             content: chunk.content,
           })
@@ -50,7 +48,7 @@
     }
 </script>
 
-<div class="h-full w-full flex flex-col">
+<div class="h-full flex flex-col gap-2">
     <div id="history" class="flex-1 container overflow-auto" bind:this={historyDiv}>
         {#each messages as message (message.id)}
             <div class={["message", "rounded", message.role]}>

backend/web/src/routes/layout.css

@@ -36,7 +36,7 @@ h2 {
 	}
 	&.changed,
 	&.saving {
-		@apply bg-cyan-400 dark:bg-cyan-600;
+		@apply bg-sky-400 dark:bg-sky-700;
 	}
 	&.saved {
 		@apply bg-green-300 dark:bg-green-700;
@@ -66,7 +66,7 @@ h2 {
 	@apply bg-sky-300 dark:bg-sky-700;
 }
 .public a {
-	@apply text-sky-500 dark:text-sky-500;
+	@apply text-sky-500 dark:text-sky-700;
 }
 
 #outer {
@@ -116,11 +116,11 @@ h2 {
 }
 
 .chatinput {
-	@apply w-full rounded-l-xl border-stone-300 bg-stone-50 p-2 text-stone-900 dark:border-stone-700 dark:bg-stone-900 dark:text-stone-100;
+	@apply w-full rounded-l border-stone-300 bg-stone-50 p-2 text-stone-900 dark:border-stone-700 dark:bg-stone-900 dark:text-stone-100;
 }
 
 .chatbutton {
-	@apply min-w-12 cursor-pointer rounded-r-xl bg-stone-300 px-2 py-1 transition-all duration-300 hover:bg-stone-400 dark:bg-stone-700 dark:hover:bg-stone-600;
+	@apply min-w-12 cursor-pointer rounded-r bg-stone-300 px-2 py-1 transition-all duration-300 hover:bg-stone-400 dark:bg-stone-700 dark:hover:bg-stone-600;
 }
 
 /* form */
@@ -278,7 +278,7 @@ h2 {
 	@apply m-2 rounded p-2;
 
 	&.user {
-		@apply bg-sky-500 dark:text-white;
+		@apply bg-sky-700 dark:text-white;
 	}
 
 	&.assistant {