mirror of
https://github.com/hpware/news-analyze.git
synced 2025-06-23 15:51:01 +08:00
- 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.
79 lines
2.2 KiB
Vue
79 lines
2.2 KiB
Vue
<script setup lang="ts">
|
|
import type { ListboxItemEmits, ListboxItemProps } from 'reka-ui'
|
|
import { cn } from '@/lib/utils'
|
|
import { useCurrentElement } from '@vueuse/core'
|
|
import { ListboxItem, useForwardPropsEmits, useId } from 'reka-ui'
|
|
import { computed, type HTMLAttributes, onMounted, onUnmounted, ref } from 'vue'
|
|
import { useCommand, useCommandGroup } from '.'
|
|
|
|
const props = defineProps<ListboxItemProps & { class?: HTMLAttributes['class'] }>()
|
|
const emits = defineEmits<ListboxItemEmits>()
|
|
|
|
const delegatedProps = computed(() => {
|
|
const { class: _, ...delegated } = props
|
|
|
|
return delegated
|
|
})
|
|
|
|
const forwarded = useForwardPropsEmits(delegatedProps, emits)
|
|
|
|
const id = useId()
|
|
const { filterState, allItems, allGroups } = useCommand()
|
|
const groupContext = useCommandGroup()
|
|
|
|
const isRender = computed(() => {
|
|
if (!filterState.search) {
|
|
return true;
|
|
}
|
|
else {
|
|
const filteredCurrentItem = filterState.filtered.items.get(id)
|
|
// If the filtered items is undefined means not in the all times map yet
|
|
// Do the first render to add into the map
|
|
if (filteredCurrentItem === undefined) {
|
|
return true;
|
|
}
|
|
|
|
// Check with filter
|
|
return filteredCurrentItem > 0;
|
|
}
|
|
})
|
|
|
|
const itemRef = ref()
|
|
const currentElement = useCurrentElement(itemRef)
|
|
onMounted(() => {
|
|
if (!(currentElement.value instanceof HTMLElement))
|
|
return
|
|
|
|
// textValue to perform filter
|
|
allItems.value.set(id, currentElement.value.textContent ?? props.value.toString())
|
|
|
|
const groupId = groupContext?.id
|
|
if (groupId) {
|
|
if (!allGroups.value.has(groupId)) {
|
|
allGroups.value.set(groupId, new Set([id]))
|
|
}
|
|
else {
|
|
allGroups.value.get(groupId)?.add(id)
|
|
}
|
|
}
|
|
})
|
|
onUnmounted(() => {
|
|
allItems.value.delete(id)
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<ListboxItem
|
|
v-if="isRender"
|
|
v-bind="forwarded"
|
|
:id="id"
|
|
ref="itemRef"
|
|
:class="cn('relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0', props.class)"
|
|
@select="() => {
|
|
filterState.search = ''
|
|
}"
|
|
>
|
|
<slot />
|
|
</ListboxItem>
|
|
</template>
|