update

src/ui/index.html

@@ -4,6 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="https://raw.githubusercontent.com/aniketmaurya/blog/main/assets/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
     <link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet">
     <title>FastServe 🧡</title>
   </head>

src/ui/src/components/ChatBot.vue

@@ -1,36 +1,43 @@
 <template>
   <v-card>
-    <v-card-title>ChatBot</v-card-title>
+    <v-card-title>Chat with PDF</v-card-title>
     <v-card-text>
-      <v-list>
-        <v-list-item v-for="message in messages" :key="message.id">
+      <v-list lines="three">
+        <v-list-item v-for="message in messages" :key="message.id" :value="message" rounded="xl">
           <v-list-item-content>
-            <v-list-item-title v-text="message.text"></v-list-item-title>
+            <div>
+              <v-chip>🙋‍♂️ {{ message.user }}</v-chip><br><br>
+              <v-chip>🤖 {{ message.bot }}</v-chip>
+            </div>
           </v-list-item-content>
         </v-list-item>
       </v-list>
     </v-card-text>
     <v-card-actions>
       <v-text-field v-model="newMessage" label="Type a message" @keyup.enter="sendMessage"></v-text-field>
       <v-btn color="primary" @click="sendMessage">Send</v-btn>
+      <FileUploadCard />
     </v-card-actions>
   </v-card>
 </template>
 
 <script>
 import FileUploadCard from './FileUpload.vue';
-
 export default {
+  name: "ChatBot",
+  components: {
+    FileUploadCard
+  },
   data() {
     return {
       messages: [],
-      newMessage: ""
+      newMessage: "Hey there!"
     };
   },
   methods: {
     sendMessage() {
       if (this.newMessage) {
-        this.messages.push({ id: Date.now(), text: this.newMessage });
+        this.messages.push({ user: this.newMessage, bot: "Generated chatbot msg" });
         this.newMessage = "";
       }
     }

src/ui/src/components/FileUpload.vue

@@ -1,32 +1,17 @@
 <template>
-    <v-container>
-        <v-card text="Chat with PDF">
-            <v-file-input
-                show-size
-                :rules="rules"
-                accept="application/pdf"
-                placeholder="Pick a PDF file or drag and drop it here"
-                prepend-icon="mdi-document"
-                label="PDF input"
-                density="compact"
-
-            ></v-file-input>
-
-        </v-card>
-
-</v-container>
-
+  <v-file-input show-size :rules="rules" accept="application/pdf" placeholder="Pick a PDF file or drag and drop it here"
+    prepend-icon="mdi-document" label="PDF input" density="compact"></v-file-input>
 </template>
 
 <script>
-  export default {
-    name: "FileUploadCard",
-    data: () => ({
-      rules: [
-        value => {
-          return !value || !value.length || value[0].size < 5000000 || 'PDF size should be less than 5 MB!'
-        },
-      ],
-    }),
-  }
+export default {
+  name: "FileUploadCard",
+  data: () => ({
+    rules: [
+      value => {
+        return !value || !value.length || value[0].size < 5000000 || 'PDF size should be less than 5 MB!'
+      },
+    ],
+  }),
+}
 </script>

src/ui/src/components/Layout.vue

@@ -32,13 +32,13 @@
 
 <script>
     import ImageCard from './ImageCard.vue';
-    import FileUploadCard from './FileUpload.vue';
+    import ChatBot from './ChatBot.vue';
 
     export default {
         name: "Layout",
         components: {
             ImageCard,
-            FileUploadCard,
+            ChatBot
         },
         data() {
             return {