From 784b45451ef293eab3a123f6ecf0a57bcfe9cb5e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=B3=E5=85=83=E7=9A=93?= <hw@yuanhau.com>
Date: Tue, 13 May 2025 22:38:15 +0800
Subject: [PATCH] feat: add Input component and integrate it into chatbot;
 enhance chatbot layout with new message input

---
 components/app/windows/chatbot.vue | 17 ++++++++++++++---
 components/ui/input/Input.vue      | 24 ++++++++++++++++++++++++
 components/ui/input/index.ts       |  1 +
 3 files changed, 39 insertions(+), 3 deletions(-)
 create mode 100644 components/ui/input/Input.vue
 create mode 100644 components/ui/input/index.ts

diff --git a/components/app/windows/chatbot.vue b/components/app/windows/chatbot.vue
index 6319944..5b59087 100644
--- a/components/app/windows/chatbot.vue
+++ b/components/app/windows/chatbot.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { History, Plus } from "lucide-vue-next";
+import { History, Plus, Send } from "lucide-vue-next";
+import { Input } from "~/components/ui/input"
 const { t } = useI18n();
 const cookie = useCookie("lastChatId");
 const lastChatId = cookie.value;
@@ -10,6 +11,7 @@ onMounted(() => {
 });
 </script>
 <template>
+  <div class="flex flex-col h-full">
   <div class="justify-center align-center text-center flex flex-col">
     <div class="flex flex-row justify-between">
       <div>Chat Name</div>
@@ -17,15 +19,24 @@ onMounted(() => {
         <div
           class="flex flex-row justify-center align-center text-center gap-2"
         >
-          <button class="p-2 rounded-lg hover:bg-gray-300">
+          <button class="p-2 rounded-t-xl hover:bg-gray-300 transition-all duration-400">
             <History class="h-4 w-4" />
           </button>
-          <button class="p-2 rounded-lg hover:bg-gray-300">
+          <button class="p-2 rounded-t-xl hover:bg-gray-300 transition-all duration-400">
             <Plus class="h-4 w-4" />
           </button>
         </div>
       </div>
     </div>
     <hr />
+        <div ref="chatContainerRef" class="flex-1 overflow-y-auto p-4 space-y-4">
+    </div>
+
+    <div class="text-black w-full flex flex-row space-x-2">
+        <Input class="flex-1 rounded-xl" placeholder="Type a message..."
+      />
+       <button class="pl-2 pr-2 mr-1 ml-1 bg-black text-white rounded-full hover:bg-gray-700 hover:translate-y-[-4px] transition-all duration-300 disabled:cursor-not-allowed disabled:hover:translate-y-0 disabled:bg-color-500" disabled="true"><Send class="w-5 h-5"/></button>
+    </div>
   </div>
+</div>
 </template>
diff --git a/components/ui/input/Input.vue b/components/ui/input/Input.vue
new file mode 100644
index 0000000..1165ea5
--- /dev/null
+++ b/components/ui/input/Input.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { useVModel } from '@vueuse/core'
+
+const props = defineProps<{
+  defaultValue?: string | number
+  modelValue?: string | number
+  class?: HTMLAttributes['class']
+}>()
+
+const emits = defineEmits<{
+  (e: 'update:modelValue', payload: string | number): void
+}>()
+
+const modelValue = useVModel(props, 'modelValue', emits, {
+  passive: true,
+  defaultValue: props.defaultValue,
+})
+</script>
+
+<template>
+  <input v-model="modelValue" :class="cn('flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', props.class)">
+</template>
diff --git a/components/ui/input/index.ts b/components/ui/input/index.ts
new file mode 100644
index 0000000..a691dd6
--- /dev/null
+++ b/components/ui/input/index.ts
@@ -0,0 +1 @@
+export { default as Input } from './Input.vue'