Added A ChatBubble Component for later

components/ChatBubble.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+const props = defineProps({
+    message: {
+        type: String,
+        required: true,
+    },
+    role: {
+        type: String,
+        required: true
+    },
+    loading: Boolean,
+    generating: Boolean,
+    error: Boolean,
+})
+
+function copyToClipboard() {
+    // Create a temporary textarea element
+    const textarea = document.createElement('textarea');
+    textarea.value = props.message;
+
+    // Set the textarea to be out of view
+    textarea.style.position = 'absolute';
+    textarea.style.left = '-9999px';
+
+    // Append the textarea to the DOM
+    document.body.appendChild(textarea);
+
+    // Select the text inside the textarea
+    textarea.select();
+
+    try {
+        // Execute the copy command
+        document.execCommand('copy');
+        console.log('Text copied to clipboard:', props.message);
+    } catch (err) {
+        console.error('Unable to copy text to clipboard:', err);
+    } finally {
+        // Clean up: remove the temporary textarea
+        document.body.removeChild(textarea);
+    }
+}
+</script>
+
+<template>
+    <div :class="`chat ${props.role == 'assistant' ? 'chat-start' : 'chat-end'} ${props.role == 'system' ? 'hidden' : ''}`">
+        <div class="chat-image avatar">
+            <div class="w-10 rounded-full">
+                <img src="/assets/moodhelper_user.png" v-if="props.role == 'user'"/>
+                <img src="/assets/moodhelper_icon.png" v-else/>
+            </div>
+        </div>
+        <div class="chat-header">
+            {{ props.role == 'assistant' ? $t("role.assistant") : $t("role.user") }}
+        </div>
+        <div :class="`chat-bubble hover:shadow-md transition duration-200 text-left ${error ? 'chat-bubble-error' : props.role == 'assistant' ? 'chat-bubble-primary' : ''}`">
+            <span class="loading loading-dots loading-lg" v-if="props.loading">{{ $t('main.loading') }}</span>
+            <div>
+                <m-d-c :value="props.message" class="prose max-w-none text-base-100/80 prose-headings:text-base-100"/>
+            </div>
+        </div>
+        <div class="chat-footer opacity-50" v-if="props.generating">
+            {{ $t('main.response.generating') }}
+        </div>
+    </div>
+</template>
+
+<style scoped>
+
+</style>

locales/en-US.json

@@ -40,5 +40,6 @@
   "docs.roadmap.v0-2-0.title": "QoL Updates",
   "docs.roadmap.more": "More...",
   "docs.roadmap.pending_updates": "Future Pending Updates",
-  "docs.roadmap.unknown": "unknown"
+  "docs.roadmap.unknown": "unknown",
+  "main.response.generating": "Generating Response..."
 }

locales/zh-CN.json

@@ -40,5 +40,6 @@
   "docs.roadmap.v0-2-0.title": "质量更新",
   "docs.roadmap.more": "更多...",
   "docs.roadmap.pending_updates": "未来计划更新",
-  "docs.roadmap.unknown": "未知"
+  "docs.roadmap.unknown": "未知",
+  "main.response.generating": "生成回复中..."
 }

pages/index.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import ChatBubble from "~/components/ChatBubble.vue";
+
 const config = useRuntimeConfig()
 // console.log(process.env)
 
@@ -150,7 +152,9 @@ onBeforeMount(() => {
             <div class="flex flex-row w-full max-w-screen" v-for="(msg, msgIndex) in messages" :key="msgIndex">
                 <ChatMessage :message="msg.content" :role="msg.role" class="flex-grow"/>
             </div>
-            <ChatMessage :message="activeResponse" :role="'assistant'" :loading="awaitingResponse" v-if="(generatingResponse || awaitingResponse) && !errorOccurred"/>
+            <ChatMessage :message="activeResponse" :role="'assistant'" :loading="awaitingResponse" :generating="generatingResponse" v-if="(generatingResponse || awaitingResponse) && !errorOccurred"/>
+
+<!--            <ChatBubble role="assistant" :message="$t('main.response.error')" :loading="awaitingResponse" :generating="generatingResponse" :error="errorOccurred" v-if="errorOccurred"/>-->
             <div role="alert" class="alert alert-error" v-if="errorOccurred">
                 <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
                 <span>{{ $t('main.response.error') }}</span>

tailwind.config.js

@@ -15,5 +15,8 @@ export default {
     extend: {},
   },
   plugins: [require("@tailwindcss/typography"), require("daisyui")],
+  daisyui: {
+    themes: ["light", "dark", "synthwave"],
+  },
 }