Ramiza v0.1 gotova

frontend/src/App.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
   import ChatApp from './lib/ChatApp.svelte';
+    import BackButton from "./lib/BackButton.svelte";
   import "./assets/app.css"
 </script>
 
 <main>
   <div>
-  <h1>Ramiza</h1>
+    <header id="header"><BackButton /><span id="ramiza-ime">Ramiza</span><span id="threedotsmenu"> ⋮ </span></header>
 
   <div class="card">
     <ChatApp />

frontend/src/assets/app.css

@@ -1,6 +1,5 @@
 #page-container {
   position: relative;
-  min-height: 100vh;
 }
 
 #content-wrap {
@@ -12,4 +11,69 @@
   bottom: 0;
   width: 100%;
   height: 2.5rem;            /* Footer height */
+  border-top: lightgray 1px solid;
+}
+
+#chat-container {
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  max-height: 80vh;
+}
+
+#header {
+  display: flex;
+  flex-direction: row;
+  flex
+  position: relative;
+  border-bottom: lightgray 1px solid;
+  height: 2.5rem;
+  alignment-baseline: center;
+}
+
+
+#message-box {
+    width: 80%;
+    height: 2.5rem;
+    border: none;
+    outline: none;
+    padding: 0 0.5rem;
+}
+
+#send-message-button {
+  /* make button with just the icon and nothing around it */
+    background: none;
+    border: none;
+    outline: none;
+    cursor: pointer;
+  /* make button above any elements that overlap it */
+    position: relative;
+    z-index: 1;
+  /* make font larger */
+    font-size: 1.5rem;
+    float: right;
+    margin-right: 1rem;
+
+}
+
+#ramiza-ime {
+  margin-top: 0.5rem;
+    font-weight: bold;
+    font-size: 20px;
+}
+
+.message-container {
+    /* flexbox with row direction */
+    display: flex;
+    flex-direction: row;
+    /* align items to the left */
+    align-items: center;
+    justify-content: left;
+
+
+}
+#threedotsmenu {
+    float: right;
+    margin-left: auto;
+    font-size: 23px;
 }

frontend/src/lib/Avatar.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import image from "../assets/ramiza-avatar.png"
+</script>
+
+<style>
+  .avatar {
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    margin-right: 10px;
+      align-self: center;
+      margin-bottom: 8px;
+
+
+  }
+</style>
+
+<img class="avatar" src={image} alt="Avatar" />

frontend/src/lib/BackButton.svelte

@@ -0,0 +1,31 @@
+<script>
+    function refreshPage() {
+        window.location.reload();
+    }
+</script>
+
+<style>
+    .back-btn {
+        margin-right: 1rem;
+        font-size: 1.5rem;
+        cursor: pointer;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 1.5rem;
+        height: 1.5rem;
+        background-color: transparent;
+        border: none;
+        outline: none;
+    }
+    .back-btn:hover {
+        color: rgba(0, 0, 0, 0.8);
+    }
+    .icon {
+        pointer-events: none;
+    }
+</style>
+
+<button class="back-btn" on:click={refreshPage}>
+    <span class="icon">&#x2190;</span>
+</button>

frontend/src/lib/ChatApp.svelte

@@ -1,12 +1,14 @@
 <script lang="ts">
     import ChatInput from "./ChatInput.svelte";
     import ChatMessage from "./ChatMessage.svelte";
-    import { onMount } from "svelte";
+    import Avatar from "./Avatar.svelte";
+    import { onMount, afterUpdate } from "svelte";
 
-    let messages: { type: string; text: string }[] = [];
+    let messages: ({ type: string; text: string } | { text: { submit: string }; type: string })[] = [];
     let sessionToken = "";
     const backendUrl = import.meta.env.VITE_BACKEND_URL;
     let message = "";
+    let element: HTMLDivElement;
 
     onMount(async () => {
         const response = await fetch(`${backendUrl}/api/session`);
@@ -14,6 +16,11 @@
         sessionToken = data.token;
     });
 
+    // Either afterUpdate()
+    afterUpdate(() => {
+        element.scroll({ top: element.scrollHeight, behavior: 'smooth' });
+    });
+
     async function sendMessage(messageInput: CustomEvent<{submit:string}>): Promise<void> {
 
         messages = [...messages, { type: "user", text: messageInput.detail }];
@@ -34,10 +41,17 @@
 </script>
 
 <main>
-    <div id="chat-container">
+    <div id="chat-container"  bind:this={element} >
         {#each messages as message}
+            <div class="message-container">
+            {#if message.type === "bot"}
+                <Avatar />
+            {/if}
             <ChatMessage type="{message.type}" text="{message.text}" />
+                </div>
+
         {/each}
+
     </div>
     <footer id="footer">
         <ChatInput bind:message on:submit="{sendMessage}" />

frontend/src/lib/ChatInput.svelte

@@ -15,10 +15,11 @@
 
 <div id="chat-input">
     <input
+            id="message-box"
             type="text"
-            placeholder="Type your message here..."
+            placeholder="Type a message..."
             bind:value="{message}"
             on:keydown="{(e) => e.key === 'Enter' && handleSubmit()}"
     />
-    <button on:click="{handleSubmit}">Send</button>
+    <button id="send-message-button" on:click="{handleSubmit}">⌲</button>
 </div>

frontend/src/lib/ChatMessage.svelte

@@ -3,24 +3,36 @@
     export let text: string;
 </script>
 
-<div class="chat-message {type}">
-    <p>{text}</p>
+<div class="chat-message-wrapper {type}">
+    <p class="chat-message">{text}</p>
 </div>
 
 <style>
-    .chat-message {
-        padding: 10px;
+    .chat-message-wrapper {
+        /* rounded corners border */
+        border-radius: 10px;
         margin-bottom: 8px;
-        border-radius: 4px;
+
+    }
+    .chat-message {
+        padding-left: 10px;
+        padding-right: 10px;
+        padding-top: 5px;
+        padding-bottom: 5px;
     }
 
     .user {
         background-color: #d1e7ff;
         text-align: right;
+        margin-left: auto;
     }
 
     .bot {
+        /* top left corner square not round */
+        border-top-left-radius: 0px;
         background-color: #f0f0f0;
         text-align: left;
+        margin-right: auto;
+
     }
 </style>