From f2a536628130d7fc106e28f776a8c1ca0a66a125 Mon Sep 17 00:00:00 2001
From: ilhooq <contact@sphilip.com>
Date: Tue, 10 Sep 2024 19:04:49 +0200
Subject: [PATCH] =?UTF-8?q?Am=C3=A9lioration=20du=20design?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 modules/site/layouts/main.php    |  2 +-
 modules/site/layouts/minimal.php |  2 +-
 vite/src/ChatApp.svelte          | 69 ++++++++------------------------
 vite/src/ChatMessage.svelte      | 20 +++++----
 vite/src/styles/site.scss        |  4 --
 5 files changed, 30 insertions(+), 67 deletions(-)
diff --git a/modules/site/layouts/main.php b/modules/site/layouts/main.php
index baedf16..2ed2391 100644
--- a/modules/site/layouts/main.php
+++ b/modules/site/layouts/main.php
@@ -17,7 +17,7 @@ if (!$this->title) $this->title = 'IA Assistant';
     <title><?= $this->escape($this->title) ?></title>
     <?= $this->head() ?>
 </head>
-<body>
+<body class="bg-body-secondary">
   <nav class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
     <div class="offcanvas-header">
       <h5 class="offcanvas-title" id="offcanvasNavbarLabel">Openai</h5>
diff --git a/modules/site/layouts/minimal.php b/modules/site/layouts/minimal.php
index 11812f8..91178e7 100644
--- a/modules/site/layouts/minimal.php
+++ b/modules/site/layouts/minimal.php
@@ -12,7 +12,7 @@ if (!$this->title) $this->title = 'IA Assistant';
     <title><?= $this->escape($this->title) ?></title>
     <?= $this->head() ?>
 </head>
-<body class="d-flex align-items-center py-4">
+<body class="d-flex align-items-center py-4 bg-body-secondary">
 
 <?= $content ?>
 
diff --git a/vite/src/ChatApp.svelte b/vite/src/ChatApp.svelte
index 42d00ba..f8dffeb 100644
--- a/vite/src/ChatApp.svelte
+++ b/vite/src/ChatApp.svelte
@@ -412,44 +412,40 @@
 
 </script>
 
-<header>
-    <h1 class="text-center fw-lighter">{assistant_title}</h1>
+<header class="p-2 text-bg-dark">
+    <h1 class="text-center fw-lighter h3">{assistant_title}</h1>
 
     <div class="toolbar">
-        <button class="btn btn-primary" on:click={createAssistant} title="Créer un assistant"><span class="icon-add"></span></button>
+        <button class="btn btn-primary btn-sm" on:click={createAssistant} title="Créer un assistant"><span class="icon-add"></span></button>
 
         {#if assistants.length}
-        <select class="form-select" bind:value={assistant_id} on:change={handleChange}>
+        <select class="form-select form-select-sm" bind:value={assistant_id} on:change={handleChange}>
             {#each assistants as config}
             <option value={config.id}>{config.title}</option>
             {/each}
         </select>
         {#if assistant}
-        <button class="btn btn-secondary" on:click={editAssistant} title="Modifier l'assistant {assistant_title}"><span class="icon-edit"></span></button>
-        <button class="btn btn-danger" on:click={deleteAssistant} title="Supprimer l'assistant {assistant_title}"><span class="icon-delete"></span></button>
+        <button class="btn btn-secondary btn-sm" on:click={editAssistant} title="Modifier l'assistant {assistant_title}"><span class="icon-edit"></span></button>
+        <button class="btn btn-danger btn-sm" on:click={deleteAssistant} title="Supprimer l'assistant {assistant_title}"><span class="icon-delete"></span></button>
         {/if}
         {/if}
 
-
-
         {#if messages.length}
         <div class="separator d-none d-sm-block"></div>
-        <button class="btn btn-warning clear" on:click="{clearMessages}" title="Effacer les messages"><span class="icon-clean"></button>
-        <button class="btn btn-info" on:click="{exportMessages}" title="Exporter la conversation"><span class="icon-file_download"></span></button>
+        <button class="btn btn-warning btn-sm clear" on:click="{clearMessages}" title="Effacer les messages"><span class="icon-clean"></button>
+        <button class="btn btn-info btn-sm" on:click="{exportMessages}" title="Exporter la conversation"><span class="icon-file_download"></span></button>
         <div class="separator d-none d-sm-block"></div>
         {/if}
 
-
-
         <input id="import-file" type="file" accept=".json" on:change="{importMessages}" style="display:none" />
-        <label for="import-file" class="btn btn-info"><span class="icon-file_upload" title="Importer une conversation"></span></label>
+        <label for="import-file" class="btn btn-info btn-sm"><span class="icon-file_upload" title="Importer une conversation"></span></label>
 
     </div>
 
 </header>
 
 <main>
-    <div class="chat-container" bind:this="{chatContainer}" >
+    <div class="container" bind:this="{chatContainer}">
         {#each messages as message, index (index)}
         <ChatMessage message="{message}"
         message_index={index} model_id={assistant.model}
@@ -461,12 +457,14 @@
     </div>
 </main>
 
-<footer>
-    <textarea class="chat-input" rows="1"
+<footer class="p-2 border-top border-dark bg-secondary">
+    <div class="container">
+        <textarea class="shadow form-control form-control-lg" rows="1"
             bind:this="{chatInput}"
             on:keyup={handleChatInputKey}
             placeholder="Saisissez votre message ici..."
             aria-label="Chat with AI"></textarea>
+    </div>
 </footer>
 
 <Modal bind:this="{modal}" ariaLabelledby="editAssistantModal">
@@ -476,12 +474,9 @@
 <style lang="scss">
 
     header {
-        background-color:  #333;
-        color: white;
-        padding: 8px;
+        background-color: var(--bs-gray-800);
     }
 
-
     .toolbar {
         display: flex;
         justify-content: center;
@@ -497,49 +492,17 @@
         & > select {
             width: auto;
         }
-
-        /*
-        & > button {
-
-        }
-        */
     }
 
     main {
       flex-grow: 1;
       overflow-y: auto;
+      background-color: #fff;
     }
 
     button.clear {
         right: 0;
     }
 
-    footer {
-        width: 100%;
-        padding: 8px;
-        display: flex;
-        justify-content: center;
-        border-top: 1px solid rgba(0, 0, 0, 0.1);
-    }
-
-    .chat-input {
-        width: 100%;
-        max-width: 768px;
-        padding: 8px;
-        border-width: 1px;
-        border-color: rgba(0, 0, 0, 0.1);
-        border-radius: 6px;
-        box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
-        min-height: 40px;
-    }
-
-    .chat-container {
-        display: flex;
-        flex-direction: column;
-        width: 100%;
-        max-width: 768px;
-        margin: 0 auto;
-        overflow-wrap: break-word;
-    }
 </style>
 
diff --git a/vite/src/ChatMessage.svelte b/vite/src/ChatMessage.svelte
index 2f10f2e..4a777c7 100644
--- a/vite/src/ChatMessage.svelte
+++ b/vite/src/ChatMessage.svelte
@@ -115,20 +115,24 @@
     }
 </script>
 
-<style>
+<style lang="scss">
     .message {
         padding: 16px;
-    }
 
-    .assistant {
-        background-color: #f0f0f0;
+        &.assistant {
+            background-color:  var(--bs-gray-300);
+        }
+
+        &.user {
+            background-color: var(--bs-gray-500);
+        }
     }
 </style>
 
 {#if message.role != 'system'}
 
     <!-- svelte-ignore a11y-click-events-have-key-events a11y-no-static-element-interactions -->
-    <div class={message.role + ' message'} on:click={handleClick}>
+    <div class={message.role + ' message rounded-2 my-3 shadow'} on:click={handleClick}>
 
 	{#if isEditing}
         <!-- svelte-ignore a11y-no-static-element-interactions -->
@@ -145,14 +149,14 @@
 	                <span class="icon-edit"></span>
 	            </button>
             {:else if message.role == 'assistant'}
-                <span class="d-inline-block py-1 px-2 me-2 border-end">{model_id}</span>
+                <span class="d-inline-block py-1 px-2 me-2 border-end border-secondary-subtle">{model_id}</span>
                 <button class="btn btn-primary btn-sm" title="Copier" on:click={handleCopy}>
                     <span class="icon-content_copy"></span>
                 </button>
-                <button class="btn btn-primary btn-sm" on:click={handleRegenerate} title="Régénérer">
+                <button class="btn btn-success btn-sm" on:click={handleRegenerate} title="Régénérer">
                     <span class="icon-loop"></span>
                 </button>
-                <button class="btn btn-primary btn-sm" on:click={handleDelete} title="Supprimer le message">
+                <button class="btn btn-danger btn-sm" on:click={handleDelete} title="Supprimer le message">
                     <span class="icon-delete"></span>
                 </button>
             {/if}
diff --git a/vite/src/styles/site.scss b/vite/src/styles/site.scss
index a16179f..475907e 100644
--- a/vite/src/styles/site.scss
+++ b/vite/src/styles/site.scss
@@ -9,10 +9,6 @@ body {
   height: 100%;
 }
 
-body {
-    background-color: #cccccc;
-}
-
 #navBtn {
     position: fixed;
     top: 10px;
