news-analyze/components/ui/command/CommandInput.vue
吳元皓 bf357f1c84 feat: add AI chat and summarize endpoints with database integration
- Implemented a new chat endpoint that utilizes Groq for chat completions based on news articles.
- Added a summarize endpoint that fetches news articles from the database and generates summaries using Groq.
- Introduced a new package "@vueuse/core" for improved reactivity.
- Created a comprehensive command UI component with various subcomponents for better user interaction.
- Developed a scraping module using Scrapy to fetch news articles from Google News.
- Added validation and sanitization for slug parameters in the fetch article endpoint.
2025-05-10 21:57:38 +08:00

38 lines
1.0 KiB
Vue

<script setup lang="ts">
import { cn } from '@/lib/utils'
import { Search } from 'lucide-vue-next'
import { ListboxFilter, type ListboxFilterProps, useForwardProps } from 'reka-ui'
import { computed, type HTMLAttributes } from 'vue'
import { useCommand } from '.'
defineOptions({
inheritAttrs: false,
})
const props = defineProps<ListboxFilterProps & {
class?: HTMLAttributes['class']
}>()
const delegatedProps = computed(() => {
const { class: _, ...delegated } = props
return delegated
})
const forwardedProps = useForwardProps(delegatedProps)
const { filterState } = useCommand()
</script>
<template>
<div class="flex items-center border-b px-3" cmdk-input-wrapper>
<Search class="mr-2 h-4 w-4 shrink-0 opacity-50" />
<ListboxFilter
v-bind="{ ...forwardedProps, ...$attrs }"
v-model="filterState.search"
auto-focus
:class="cn('flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50', props.class)"
/>
</div>
</template>