56 lines
1.3 KiB
Vue
56 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
import {
|
|
InputGroup,
|
|
InputGroupTextarea,
|
|
InputGroupAddon,
|
|
InputGroupButton,
|
|
InputGroupText,
|
|
} from '@/components/ui/input-group'
|
|
import { Separator } from '@/components/ui/separator'
|
|
import { ArrowUp } from 'lucide-vue-next'
|
|
|
|
const chatInput = ref('')
|
|
|
|
const handleSend = () => {
|
|
if (!chatInput.value.trim()) return
|
|
|
|
// TODO: Implement AI chat send functionality
|
|
console.log('Sending message:', chatInput.value)
|
|
chatInput.value = ''
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="ai-chat-area w-full border-t border-border p-4 bg-neutral-50">
|
|
<InputGroup>
|
|
<InputGroupTextarea
|
|
v-model="chatInput"
|
|
placeholder="Ask, Search or Chat..."
|
|
class="min-h-[60px] rounded-lg"
|
|
@keydown.enter.exact.prevent="handleSend"
|
|
/>
|
|
<InputGroupAddon>
|
|
<InputGroupText class="ml-auto">
|
|
52% used
|
|
</InputGroupText>
|
|
<Separator orientation="vertical" class="!h-4" />
|
|
<InputGroupButton
|
|
variant="default"
|
|
class="rounded-full"
|
|
:disabled="!chatInput.trim()"
|
|
@click="handleSend"
|
|
>
|
|
<ArrowUp class="size-4" />
|
|
<span class="sr-only">Send</span>
|
|
</InputGroupButton>
|
|
</InputGroupAddon>
|
|
</InputGroup>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.ai-chat-area {
|
|
min-height: 190px;
|
|
}
|
|
</style>
|