Skip to content

Commit

Permalink
add existing conversation to auto complete (#325)
Browse files Browse the repository at this point in the history
  • Loading branch information
@swuecho
swuecho authored May 28, 2023
1 parent 075b825 commit b6fa06d
Showing 1 changed file with 48 additions and 14 deletions.
62 changes: 48 additions & 14 deletions web/src/views/chat/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@
import { computed, onMounted, onUnmounted, ref } from 'vue'
import { v4 as uuidv4 } from 'uuid'
import { useRoute } from 'vue-router'
import { NModal } from 'naive-ui'
import { NAutoComplete, NButton, NInput, NModal, useDialog, useMessage } from 'naive-ui'
import { storeToRefs } from 'pinia'
import { NAutoComplete, NButton, NInput, useDialog, useMessage } from 'naive-ui'
import html2canvas from 'html2canvas'
import { type OnSelect } from 'naive-ui/es/auto-complete/src/interface'
import { Message } from './components'
import { useScroll } from './hooks/useScroll'
import { useChat } from './hooks/useChat'
Expand All @@ -15,7 +15,7 @@ import SessionConfig from './components/Session/SessionConfig.vue'
import { createChatSnapshot, fetchChatStream, updateChatData } from '@/api'
import { HoverButton, SvgIcon } from '@/components/common'
import { useBasicLayout } from '@/hooks/useBasicLayout'
import { useChatStore,usePromptStore } from '@/store'
import { useChatStore, usePromptStore } from '@/store'
import { t } from '@/locales'
import { genTempDownloadLink } from '@/utils/download'
let controller = new AbortController()
Expand All @@ -40,7 +40,6 @@ const chatSession = computed(() => chatStore.getChatSessionByUuid(uuid))
const prompt = ref<string>('')
const loading = ref<boolean>(false)
const showModal = ref<boolean>(false)
// 添加PromptStore
Expand All @@ -49,18 +48,36 @@ const promptStore = usePromptStore()
// 使用storeToRefs，保证store修改后，联想部分能够重新渲染
const { promptList: promptTemplate } = storeToRefs<any>(promptStore)
// 可优化部分
// 搜索选项计算，这里使用value作为索引项，所以当出现重复value时渲染异常(多项同时出现选中效果)
// 理想状态下其实应该是key作为索引项,但官方的renderOption会出现问题，所以就需要value反renderLabel实现
const searchOptions = computed(() => {
function filterItemsByPrompt(item: { key: string }): boolean {
const lowerCaseKey = item.key.toLowerCase()
const lowerCasePrompt = prompt.value.substring(1).toLowerCase()
return lowerCaseKey.includes(lowerCasePrompt)
}
function filterItemsByTitle(item: { title: string }): boolean {
const lowerCaseKey = item.title.toLowerCase()
const lowerCasePrompt = prompt.value.substring(1).toLowerCase()
return lowerCaseKey.includes(lowerCasePrompt)
}
if (prompt.value.startsWith('/')) {
return promptTemplate.value.filter((item: { key: string }) => item.key.toLowerCase().includes(prompt.value.substring(1).toLowerCase())).map((obj: { value: any }) => {
const filterStores = chatStore.history.filter(filterItemsByTitle).map((obj: { uuid: any }) => {
return {
label: `UUID|$|${obj.uuid}`,
value: `UUID|$|${obj.uuid}`,
}
})
const filterPrompts = promptTemplate.value.filter(filterItemsByPrompt).map((obj: { value: any }) => {
return {
label: obj.value,
value: obj.value,
}
})
const all = filterStores.concat(filterPrompts)
return all
}
else {
return []
Expand All @@ -72,6 +89,10 @@ const renderOption = (option: { label: string }) => {
if (i.value === option.label)
return [i.key]
}
for (const chat of chatStore.history) {
if (`UUID|$|${chat.uuid}` === option.label)
return [chat.title]
}
return []
}
Expand Down Expand Up @@ -442,6 +463,13 @@ function handleStop() {
}
}
const handleSelectAutoComplete: OnSelect = function (v: string | number) {
if (typeof v === 'string' && v.startsWith('UUID|$|')) {
// set active session to the selected uuid
chatStore.setActive(v.split('|$|')[1])
}
}
const placeholder = computed(() => {
if (isMobile.value)
return t('chat.placeholderMobile')
Expand Down Expand Up @@ -504,9 +532,9 @@ function getDataFromResponseText(responseText: string): string {
<div>
<Message
v-for="(item, index) of dataSources" :key="index" class="chat-message" :date-time="item.dateTime"
:model="chatSession?.model" :text="item.text" :inversion="item.inversion" :error="item.error" :is-prompt="item.isPrompt" :is-pin="item.isPin"
:loading="item.loading" :pining="pining" :index="index" @regenerate="onRegenerate(index)" @delete="handleDelete(index)"
@toggle-pin="handleTogglePin(index)"
:model="chatSession?.model" :text="item.text" :inversion="item.inversion" :error="item.error"
:is-prompt="item.isPrompt" :is-pin="item.isPin" :loading="item.loading" :pining="pining" :index="index"
@regenerate="onRegenerate(index)" @delete="handleDelete(index)" @toggle-pin="handleTogglePin(index)"
@after-edit="handleAfterEdit"
/>
<div class="sticky bottom-0 left-0 flex justify-center">
Expand Down Expand Up @@ -536,7 +564,10 @@ function getDataFromResponseText(responseText: string): string {
</span>
</HoverButton>

<HoverButton data-testid="snpashot-button" v-if="!isMobile" :tooltip="$t('chat.chatSnapshot')" @click="handleSnapshot">
<HoverButton
v-if="!isMobile" data-testid="snpashot-button" :tooltip="$t('chat.chatSnapshot')"
@click="handleSnapshot"
>
<span class="text-xl text-[#4b9e5f] dark:text-white">
<SvgIcon icon="ic:twotone-ios-share" />
</span>
Expand All @@ -547,12 +578,15 @@ function getDataFromResponseText(responseText: string): string {
<SvgIcon icon="teenyicons:adjust-horizontal-solid" />
</span>
</HoverButton>
<NAutoComplete v-model:value="prompt" :options="searchOptions" :render-label="renderOption">
<NAutoComplete
v-model:value="prompt" :options="searchOptions" :render-label="renderOption"
:on-select="handleSelectAutoComplete"
>
<template #default="{ handleInput, handleBlur, handleFocus }">
<NInput
v-model:value="prompt" type="textarea" :placeholder="placeholder"
id="message_textarea" data-testid="message_textarea"
:autosize="{ minRows: 1, maxRows: isMobile ? 4 : 8 }" @input="handleInput" @focus="handleFocus" @blur="handleBlur" @keypress="handleEnter"
id="message_textarea" v-model:value="prompt" type="textarea" :placeholder="placeholder"
data-testid="message_textarea" :autosize="{ minRows: 1, maxRows: isMobile ? 4 : 8 }" @input="handleInput"
@focus="handleFocus" @blur="handleBlur" @keypress="handleEnter"
/>
</template>
</NAutoComplete>
Expand Down

0 comments on commit b6fa06d

Please sign in to comment.