feat(chat): prepare chat components by author and store logic

project-ait · Oct 26, 2023 · 61c56e9 · 61c56e9
1 parent de5217a
commit 61c56e9
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 15 deletions.
diff --git a/src/lib/components/chat/messages/AssistantMessage.svelte b/src/lib/components/chat/messages/AssistantMessage.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+  import BaseMessage from "$lib/components/chat/messages/BaseMessage.svelte";
+
+  export let message: string = ""
+</script>
+
+<BaseMessage
+  profilePic="/llama2.png"
+  message={message}
+  bgColor="rgba(0, 0, 0, 0.05)"
+/>
diff --git a/src/lib/components/chat/Message.svelte → ...mponents/chat/messages/BaseMessage.svelte b/src/lib/components/chat/Message.svelte → ...mponents/chat/messages/BaseMessage.svelte
@@ -7,8 +7,8 @@
 
 <div
   class="chat-bg"
-  style="background-color: {bgColor};
-">
+  style="background-color: {bgColor};"
+>
   <img
     class="chat-proc"
     src={profilePic}

diff --git a/src/lib/components/chat/messages/UserMessage.svelte b/src/lib/components/chat/messages/UserMessage.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+  import BaseMessage from "$lib/components/chat/messages/BaseMessage.svelte";
+
+  export let message: string = ""
+</script>
+
+<BaseMessage
+  profilePic="/guest.png"
+  message={message}
+  bgColor="rgba(0, 0, 0, 0.1)"
+/>
diff --git a/src/lib/stores/StateStore.ts b/src/lib/stores/StateStore.ts
@@ -16,17 +16,38 @@ export enum PageType {
     Docs,
 }
 
+export enum Author {
+    Assistant,
+    User
+}
+
+export interface Message {
+    author: Author
+    message: string
+}
+
 export interface StateStore {
     showSettings: boolean
     appearance: Appearance
     pageType: PageType
+    waiting: boolean
     input: string
+    user?: {
+        profilePic: string
+        token: string
+    },
+    history: Array<Message>
 }
 
 
 export const stateStore = writable<StateStore>({
     showSettings: false,
     appearance: Appearance.Dark,
     pageType: PageType.Chat,
-    input: "" // it must be updating when send the message for avoid the bugs (and trash request)
+    waiting: false, // is waiting AI response?
+    input: "", // it must be updating when send the message for avoid the bugs (and trash request),
+    history: [{
+        author: Author.Assistant,
+        message: "Hello! I'm your private assistant! How can I help you today? 🤖"
+    }]
 })
diff --git a/src/routes/chat/+page.svelte b/src/routes/chat/+page.svelte
@@ -1,20 +1,22 @@
-<script>
+<script lang="ts">
+  import AssistantMessage from "$lib/components/chat/messages/AssistantMessage.svelte"
+  import UserMessage from "$lib/components/chat/messages/UserMessage.svelte"
   import ChatInput from "$lib/components/share/ChatInput.svelte";
-  import Message from "$lib/components/chat/Message.svelte";
+  import type { Message } from "$lib/stores/StateStore"
+  import { Author, stateStore } from "$lib/stores/StateStore"
+
+  let history: Array<Message> = $stateStore.history
 </script>
 
 <div id="chat-page">
   <div id="chat-history">
-    <Message
-      message="I hate facebook ads"
-      bgColor="rgba(0, 0, 0, 0.1)"
-      profilePic="guest.png"
-    />
-    <Message
-      message="Facebook is no more exists lol multiple lines multiple lines multiple lines multiple lines multiple lines multiple lines multiple lines multiple lines multiple lines multiple lines multiple lines multiple lines multiple lines multiple lines multiple lines multiple lines multiple lines"
-      bgColor="rgba(255, 255, 255, 0.05)"
-      profilePic="llama2.png"
-    />
+    {#each history as ctx}
+      {#if ctx.author === Author.Assistant}
+        <AssistantMessage message={ctx.message} />
+      {:else}
+        <UserMessage message={ctx.message} />
+      {/if}
+    {/each}
   </div>
   <ChatInput />
 </div>