base ui impl

frontend/package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@primevue/themes": "^4.0.0",
     "primeflex": "^3.3.1",
+    "primeicons": "^7.0.0",
     "primevue": "^4.0.0",
     "vue": "^3.2.37"
   },

frontend/package.json.md5

@@ -1 +1 @@
-bc5ad54de95730f20ae4b320b68769c8
+3e1da23264839779d64d02fe5e6ccc8e

frontend/src/App.vue

@@ -4,7 +4,7 @@ import Chat from "./components/Chat.vue";
 </script>
 
 <template>
-  <div class="border-round-3xl p-3 surface-card">
+  <div class="border-round-3xl p-3 h-full" style="background-color:rgba(255,255,255,0.53);">
       <Chat />
   </div>
 </template>

frontend/src/components/Chat.vue

@@ -1,11 +1,35 @@
 <script setup lang="ts">
 
+import MsgItem from "./MsgItem.vue";
+import {reactive, ref} from "vue";
+import {Message} from "../types/Message";
+
+const msgList = reactive<Message[]>([{content: 'hello', userType: 'user', id: '1'},
+  {content: 'how are you', userType: 'assistant', id: '2'}])
+const inputMsg = ref('')
 </script>
 
 <template>
-  <div>
-    <div class="p-3 flex justify-content-center">
-      <div></div>
+  <div class="flex text-center flex-column h-full">
+    <div class="flex-shrink-0 text-center">
+      <div class="text-white-alpha-80 text-3xl font-bold">
+        Ai-Gui
+      </div>
+
+    </div>
+
+    <div class="flex-1 overflow-auto bg-blue-400 border-2 border-white-alpha-40 border-round p-2">
+      <ScrollPanel class="w-full h-full">
+      <MsgItem v-for="(item,idx) in msgList" :message="item" :key="idx"/>
+      </ScrollPanel>
+    </div>
+
+    <div class="flex-grow flex flex-column mt-2">
+      <div class="flex-shrink-0 text-center flex w-full">
+        <InputText type="text" class="flex-grow-1 bg-black-alpha-50" v-model="inputMsg"/>
+        <Button icon="pi pi-send" class="ml-2"/>
+      </div>
+
     </div>
   </div>
 </template>

frontend/src/components/MsgItem.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import {computed} from "vue";
+import {Message} from "../types/Message";
+const props = defineProps<{ message: Message }>()
+const positionClass = computed(() => {
+  if (props.message.userType === "assistant") {
+    return "flex-row"
+  } else {
+    return "flex-row-reverse"
+  }
+})
+</script>
+
+<template>
+  <div :class="['flex align-items-start mb-4 px-3', positionClass]">
+    <div class="w-2 h-12 border-circle mr-4">
+      <i class="pi pi-user"></i>
+    </div>
+    <div class="bg-gray-200 border-round p-1 w-full">
+      <p class="text-gray-800 text-left pl-2">
+        {{ message.content }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

frontend/src/main.ts

@@ -4,6 +4,8 @@ import PrimeVue from 'primevue/config'
 import Aura from '@primevue/themes/aura'
 import 'primeflex/primeflex.css';
 import './style.css';
+import 'primeicons/primeicons.css'
+
 
 const app = createApp(App)
 app.use(PrimeVue, {

frontend/src/style.css

@@ -170,7 +170,7 @@ html {
 
 body {
     margin: 0;
-    color: #000000;
+    color: #ffffff;
     font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
     "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
     sans-serif;

frontend/src/types/Message.ts

@@ -0,0 +1,5 @@
+export interface Message {
+    id: string
+    content: string
+    userType: string
+}