### What problem does this PR solve? Feat: Fixed the issue where the chat page would jump after entering the homepage #3221 ### Type of change - [x] New Feature (non-breaking change which adds functionality)tags/v0.19.0
| FormMessage, | FormMessage, | ||||
| } from '@/components/ui/form'; | } from '@/components/ui/form'; | ||||
| import { Input } from '@/components/ui/input'; | import { Input } from '@/components/ui/input'; | ||||
| import { Plus, Trash2 } from 'lucide-react'; | |||||
| import { Plus, X } from 'lucide-react'; | |||||
| import { useFieldArray, useFormContext } from 'react-hook-form'; | import { useFieldArray, useFormContext } from 'react-hook-form'; | ||||
| import { useTranslation } from 'react-i18next'; | import { useTranslation } from 'react-i18next'; | ||||
| import { Separator } from '../ui/separator'; | import { Separator } from '../ui/separator'; | ||||
| </FormItem> | </FormItem> | ||||
| )} | )} | ||||
| /> | /> | ||||
| <Trash2 | |||||
| className="cursor-pointer mx-3 size-4 text-colors-text-functional-danger" | |||||
| onClick={() => remove(index)} | |||||
| /> | |||||
| <Button variant={'ghost'} onClick={() => remove(index)}> | |||||
| <X /> | |||||
| </Button> | |||||
| </div> | </div> | ||||
| ); | ); | ||||
| })} | })} |
| AlertDialogTitle, | AlertDialogTitle, | ||||
| AlertDialogTrigger, | AlertDialogTrigger, | ||||
| } from '@/components/ui/alert-dialog'; | } from '@/components/ui/alert-dialog'; | ||||
| import { Trash2 } from 'lucide-react'; | |||||
| import { PropsWithChildren } from 'react'; | import { PropsWithChildren } from 'react'; | ||||
| import { useTranslation } from 'react-i18next'; | import { useTranslation } from 'react-i18next'; | ||||
| {t('common.cancel')} | {t('common.cancel')} | ||||
| </AlertDialogCancel> | </AlertDialogCancel> | ||||
| <AlertDialogAction | <AlertDialogAction | ||||
| className="bg-colors-background-functional-solid-danger text--colors-text-neutral-strong" | |||||
| className="bg-text-delete-red text-text-title" | |||||
| onClick={onOk} | onClick={onOk} | ||||
| > | > | ||||
| <Trash2 /> | |||||
| {t('common.ok')} | {t('common.ok')} | ||||
| </AlertDialogAction> | </AlertDialogAction> | ||||
| </AlertDialogFooter> | </AlertDialogFooter> |
| import { ChatSearchParams } from '@/constants/chat'; | |||||
| import { IDialog } from '@/interfaces/database/chat'; | |||||
| import chatService from '@/services/chat-service'; | |||||
| import { useQuery } from '@tanstack/react-query'; | |||||
| import { useCallback, useMemo } from 'react'; | |||||
| import { history, useSearchParams } from 'umi'; | |||||
| export const useGetChatSearchParams = () => { | |||||
| const [currentQueryParameters] = useSearchParams(); | |||||
| return { | |||||
| dialogId: currentQueryParameters.get(ChatSearchParams.DialogId) || '', | |||||
| conversationId: | |||||
| currentQueryParameters.get(ChatSearchParams.ConversationId) || '', | |||||
| isNew: currentQueryParameters.get(ChatSearchParams.isNew) || '', | |||||
| }; | |||||
| }; | |||||
| export const useClickDialogCard = () => { | |||||
| // eslint-disable-next-line @typescript-eslint/no-unused-vars | |||||
| const [_, setSearchParams] = useSearchParams(); | |||||
| const newQueryParameters: URLSearchParams = useMemo(() => { | |||||
| return new URLSearchParams(); | |||||
| }, []); | |||||
| const handleClickDialog = useCallback( | |||||
| (dialogId: string) => { | |||||
| newQueryParameters.set(ChatSearchParams.DialogId, dialogId); | |||||
| // newQueryParameters.set( | |||||
| // ChatSearchParams.ConversationId, | |||||
| // EmptyConversationId, | |||||
| // ); | |||||
| setSearchParams(newQueryParameters); | |||||
| }, | |||||
| [newQueryParameters, setSearchParams], | |||||
| ); | |||||
| return { handleClickDialog }; | |||||
| }; | |||||
| export const useFetchDialogList = (pureFetch = false) => { | |||||
| const { handleClickDialog } = useClickDialogCard(); | |||||
| const { dialogId } = useGetChatSearchParams(); | |||||
| const { | |||||
| data, | |||||
| isFetching: loading, | |||||
| refetch, | |||||
| } = useQuery<IDialog[]>({ | |||||
| queryKey: ['fetchDialogList'], | |||||
| initialData: [], | |||||
| gcTime: 0, | |||||
| refetchOnWindowFocus: false, | |||||
| queryFn: async (...params) => { | |||||
| console.log('🚀 ~ queryFn: ~ params:', params); | |||||
| const { data } = await chatService.listDialog(); | |||||
| if (data.code === 0) { | |||||
| const list: IDialog[] = data.data; | |||||
| if (!pureFetch) { | |||||
| if (list.length > 0) { | |||||
| if (list.every((x) => x.id !== dialogId)) { | |||||
| handleClickDialog(data.data[0].id); | |||||
| } | |||||
| } else { | |||||
| history.push('/chat'); | |||||
| } | |||||
| } | |||||
| } | |||||
| return data?.data ?? []; | |||||
| }, | |||||
| }); | |||||
| return { data, loading, refetch }; | |||||
| }; |
| import { useFetchNextDialogList } from '@/hooks/chat-hooks'; | |||||
| import { useFetchDialogList } from '@/hooks/use-chat-request'; | |||||
| import { ApplicationCard } from './application-card'; | import { ApplicationCard } from './application-card'; | ||||
| export function ChatList() { | export function ChatList() { | ||||
| const { data } = useFetchNextDialogList(); | |||||
| const { data } = useFetchDialogList(true); | |||||
| return data | return data | ||||
| .slice(0, 10) | .slice(0, 10) |