mirror of
https://github.com/infiniflow/ragflow.git
synced 2025-12-25 08:06:48 +08:00
Features: Memory page rendering and other bug fixes (#11784)
### What problem does this PR solve? Features: Memory page rendering and other bug fixes - Rendering of the Memory list page - Rendering of the message list page in Memory - Fixed an issue where the empty state was incorrectly displayed when search criteria were applied - Added a web link for the API-Key - modifying the index_mode attribute of the Confluence data source. ### Type of change - [x] Bug Fix (non-breaking change which fixes an issue) - [x] New Feature (non-breaking change which adds functionality)
This commit is contained in:
chanx
@ -81,19 +81,20 @@ export default function Agents() {
|
||||
}, [isCreate, showCreatingModal, searchUrl, setSearchUrl]);
|
||||
return (
|
||||
<>
|
||||
{(!data?.length || data?.length <= 0) && (
|
||||
{(!data?.length || data?.length <= 0) && !searchString && (
|
||||
<div className="flex w-full items-center justify-center h-[calc(100vh-164px)]">
|
||||
<EmptyAppCard
|
||||
showIcon
|
||||
size="large"
|
||||
className="w-[480px] p-14"
|
||||
isSearch={!!searchString}
|
||||
type={EmptyCardType.Agent}
|
||||
onClick={() => showCreatingModal()}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<section className="flex flex-col w-full flex-1">
|
||||
{!!data?.length && (
|
||||
{(!!data?.length || searchString) && (
|
||||
<>
|
||||
<div className="px-8 pt-8 ">
|
||||
<ListFilterBar
|
||||
@ -138,6 +139,18 @@ export default function Agents() {
|
||||
</DropdownMenu>
|
||||
</ListFilterBar>
|
||||
</div>
|
||||
{(!data?.length || data?.length <= 0) && searchString && (
|
||||
<div className="flex w-full items-center justify-center h-[calc(100vh-164px)]">
|
||||
<EmptyAppCard
|
||||
showIcon
|
||||
size="large"
|
||||
className="w-[480px] p-14"
|
||||
isSearch={!!searchString}
|
||||
type={EmptyCardType.Agent}
|
||||
onClick={() => showCreatingModal()}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex-1 overflow-auto">
|
||||
<CardContainer className="max-h-[calc(100dvh-280px)] overflow-auto px-8">
|
||||
{data.map((x) => {
|
||||
|
||||
@ -12,7 +12,7 @@ import { Switch } from '@/components/ui/switch';
|
||||
import { useTranslate } from '@/hooks/common-hooks';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { useMemo, useState } from 'react';
|
||||
import { useFormContext } from 'react-hook-form';
|
||||
import { FieldValues, useFormContext } from 'react-hook-form';
|
||||
import {
|
||||
useHandleKbEmbedding,
|
||||
useHasParsedDocument,
|
||||
@ -65,17 +65,59 @@ export function ChunkMethodItem(props: IProps) {
|
||||
/>
|
||||
);
|
||||
}
|
||||
export function EmbeddingModelItem({ line = 1, isEdit }: IProps) {
|
||||
|
||||
export const EmbeddingSelect = ({
|
||||
isEdit,
|
||||
field,
|
||||
name,
|
||||
}: {
|
||||
isEdit: boolean;
|
||||
field: FieldValues;
|
||||
name?: string;
|
||||
}) => {
|
||||
const { t } = useTranslate('knowledgeConfiguration');
|
||||
const form = useFormContext();
|
||||
const embeddingModelOptions = useSelectEmbeddingModelOptions();
|
||||
const { handleChange } = useHandleKbEmbedding();
|
||||
const disabled = useHasParsedDocument(isEdit);
|
||||
const oldValue = useMemo(() => {
|
||||
const embdStr = form.getValues('embd_id');
|
||||
const embdStr = form.getValues(name || 'embd_id');
|
||||
return embdStr || '';
|
||||
}, [form]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
return (
|
||||
<Spin
|
||||
spinning={loading}
|
||||
className={cn(' rounded-lg after:bg-bg-base', {
|
||||
'opacity-20': loading,
|
||||
})}
|
||||
>
|
||||
<SelectWithSearch
|
||||
onChange={async (value) => {
|
||||
field.onChange(value);
|
||||
if (isEdit && disabled) {
|
||||
setLoading(true);
|
||||
const res = await handleChange({
|
||||
embed_id: value,
|
||||
callback: field.onChange,
|
||||
});
|
||||
if (res.code !== 0) {
|
||||
field.onChange(oldValue);
|
||||
}
|
||||
setLoading(false);
|
||||
}
|
||||
}}
|
||||
value={field.value}
|
||||
options={embeddingModelOptions}
|
||||
placeholder={t('embeddingModelPlaceholder')}
|
||||
/>
|
||||
</Spin>
|
||||
);
|
||||
};
|
||||
|
||||
export function EmbeddingModelItem({ line = 1, isEdit }: IProps) {
|
||||
const { t } = useTranslate('knowledgeConfiguration');
|
||||
const form = useFormContext();
|
||||
return (
|
||||
<>
|
||||
<FormField
|
||||
@ -102,33 +144,10 @@ export function EmbeddingModelItem({ line = 1, isEdit }: IProps) {
|
||||
className={cn('text-muted-foreground', { 'w-3/4': line === 1 })}
|
||||
>
|
||||
<FormControl>
|
||||
<Spin
|
||||
spinning={loading}
|
||||
className={cn(' rounded-lg after:bg-bg-base', {
|
||||
'opacity-20': loading,
|
||||
})}
|
||||
>
|
||||
<SelectWithSearch
|
||||
onChange={async (value) => {
|
||||
field.onChange(value);
|
||||
if (isEdit && disabled) {
|
||||
setLoading(true);
|
||||
const res = await handleChange({
|
||||
embed_id: value,
|
||||
callback: field.onChange,
|
||||
});
|
||||
if (res.code !== 0) {
|
||||
field.onChange(oldValue);
|
||||
}
|
||||
setLoading(false);
|
||||
}
|
||||
}}
|
||||
value={field.value}
|
||||
options={embeddingModelOptions}
|
||||
placeholder={t('embeddingModelPlaceholder')}
|
||||
triggerClassName="!bg-bg-base"
|
||||
/>
|
||||
</Spin>
|
||||
<EmbeddingSelect
|
||||
isEdit={!!isEdit}
|
||||
field={field}
|
||||
></EmbeddingSelect>
|
||||
</FormControl>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -70,18 +70,19 @@ export default function Datasets() {
|
||||
return (
|
||||
<>
|
||||
<section className="py-4 flex-1 flex flex-col">
|
||||
{(!kbs?.length || kbs?.length <= 0) && (
|
||||
{(!kbs?.length || kbs?.length <= 0) && !searchString && (
|
||||
<div className="flex w-full items-center justify-center h-[calc(100vh-164px)]">
|
||||
<EmptyAppCard
|
||||
showIcon
|
||||
size="large"
|
||||
className="w-[480px] p-14"
|
||||
isSearch={!!searchString}
|
||||
type={EmptyCardType.Dataset}
|
||||
onClick={() => showModal()}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{!!kbs?.length && (
|
||||
{(!!kbs?.length || searchString) && (
|
||||
<>
|
||||
<ListFilterBar
|
||||
title={t('header.dataset')}
|
||||
@ -98,6 +99,18 @@ export default function Datasets() {
|
||||
{t('knowledgeList.createKnowledgeBase')}
|
||||
</Button>
|
||||
</ListFilterBar>
|
||||
{(!kbs?.length || kbs?.length <= 0) && searchString && (
|
||||
<div className="flex w-full items-center justify-center h-[calc(100vh-164px)]">
|
||||
<EmptyAppCard
|
||||
showIcon
|
||||
size="large"
|
||||
className="w-[480px] p-14"
|
||||
isSearch={!!searchString}
|
||||
type={EmptyCardType.Dataset}
|
||||
onClick={() => showModal()}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex-1">
|
||||
<CardContainer className="max-h-[calc(100dvh-280px)] overflow-auto px-8">
|
||||
{kbs.map((dataset) => {
|
||||
|
||||
75
web/src/pages/memories/add-or-edit-modal.tsx
Normal file
75
web/src/pages/memories/add-or-edit-modal.tsx
Normal file
@ -0,0 +1,75 @@
|
||||
import { DynamicForm, DynamicFormRef } from '@/components/dynamic-form';
|
||||
import { useModelOptions } from '@/components/llm-setting-items/llm-form-field';
|
||||
import { HomeIcon } from '@/components/svg-icon';
|
||||
import { Modal } from '@/components/ui/modal/modal';
|
||||
import { t } from 'i18next';
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import { createMemoryFields } from './constants';
|
||||
import { IMemory } from './interface';
|
||||
|
||||
type IProps = {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
onSubmit?: (data: any) => void;
|
||||
initialMemory: IMemory;
|
||||
loading?: boolean;
|
||||
};
|
||||
export const AddOrEditModal = (props: IProps) => {
|
||||
const { open, onClose, onSubmit, initialMemory } = props;
|
||||
// const [fields, setFields] = useState<FormFieldConfig[]>(createMemoryFields);
|
||||
// const formRef = useRef<DynamicFormRef>(null);
|
||||
const [formInstance, setFormInstance] = useState<DynamicFormRef | null>(null);
|
||||
|
||||
const formCallbackRef = useCallback((node: DynamicFormRef | null) => {
|
||||
if (node) {
|
||||
// formRef.current = node;
|
||||
setFormInstance(node);
|
||||
}
|
||||
}, []);
|
||||
const { modelOptions } = useModelOptions();
|
||||
|
||||
useEffect(() => {
|
||||
if (initialMemory && initialMemory.id) {
|
||||
formInstance?.onFieldUpdate('memory_type', { hidden: true });
|
||||
formInstance?.onFieldUpdate('embedding', { hidden: true });
|
||||
formInstance?.onFieldUpdate('llm', { hidden: true });
|
||||
} else {
|
||||
formInstance?.onFieldUpdate('llm', { options: modelOptions as any });
|
||||
}
|
||||
}, [modelOptions, formInstance, initialMemory]);
|
||||
|
||||
return (
|
||||
<Modal
|
||||
open={open}
|
||||
onOpenChange={onClose}
|
||||
className="!w-[480px]"
|
||||
title={
|
||||
<div className="flex flex-col">
|
||||
<div>
|
||||
<HomeIcon name="memory" width={'24'} />
|
||||
</div>
|
||||
{t('memory.createMemory')}
|
||||
</div>
|
||||
}
|
||||
showfooter={false}
|
||||
confirmLoading={props.loading}
|
||||
>
|
||||
<DynamicForm.Root
|
||||
ref={formCallbackRef}
|
||||
fields={createMemoryFields}
|
||||
onSubmit={() => {}}
|
||||
defaultValues={initialMemory}
|
||||
>
|
||||
<div className="flex justify-end gap-2 pb-5">
|
||||
<DynamicForm.CancelButton handleCancel={onClose} />
|
||||
<DynamicForm.SavingButton
|
||||
submitLoading={false}
|
||||
submitFunc={(data) => {
|
||||
onSubmit?.(data);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</DynamicForm.Root>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
41
web/src/pages/memories/constants/index.tsx
Normal file
41
web/src/pages/memories/constants/index.tsx
Normal file
@ -0,0 +1,41 @@
|
||||
import { FormFieldConfig, FormFieldType } from '@/components/dynamic-form';
|
||||
import { EmbeddingSelect } from '@/pages/dataset/dataset-setting/configuration/common-item';
|
||||
import { t } from 'i18next';
|
||||
|
||||
export const createMemoryFields = [
|
||||
{
|
||||
name: 'memory_name',
|
||||
label: t('memory.name'),
|
||||
placeholder: t('memory.memoryNamePlaceholder'),
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: 'memory_type',
|
||||
label: t('memory.memoryType'),
|
||||
type: FormFieldType.MultiSelect,
|
||||
placeholder: t('memory.descriptionPlaceholder'),
|
||||
options: [
|
||||
{ label: 'Raw', value: 'raw' },
|
||||
{ label: 'Semantic', value: 'semantic' },
|
||||
{ label: 'Episodic', value: 'episodic' },
|
||||
{ label: 'Procedural', value: 'procedural' },
|
||||
],
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: 'embedding',
|
||||
label: t('memory.embeddingModel'),
|
||||
placeholder: t('memory.selectModel'),
|
||||
required: true,
|
||||
// hideLabel: true,
|
||||
// type: 'custom',
|
||||
render: (field) => <EmbeddingSelect field={field} isEdit={false} />,
|
||||
},
|
||||
{
|
||||
name: 'llm',
|
||||
label: t('memory.llm'),
|
||||
placeholder: t('memory.selectModel'),
|
||||
required: true,
|
||||
type: FormFieldType.Select,
|
||||
},
|
||||
] as FormFieldConfig[];
|
||||
288
web/src/pages/memories/hooks.ts
Normal file
288
web/src/pages/memories/hooks.ts
Normal file
@ -0,0 +1,288 @@
|
||||
// src/pages/next-memoryes/hooks.ts
|
||||
|
||||
import message from '@/components/ui/message';
|
||||
import { useSetModalState } from '@/hooks/common-hooks';
|
||||
import { useHandleSearchChange } from '@/hooks/logic-hooks';
|
||||
import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
|
||||
import memoryService, { updateMemoryById } from '@/services/memory-service';
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
||||
import { useDebounce } from 'ahooks';
|
||||
import { useCallback, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useParams, useSearchParams } from 'umi';
|
||||
import {
|
||||
CreateMemoryResponse,
|
||||
DeleteMemoryProps,
|
||||
DeleteMemoryResponse,
|
||||
ICreateMemoryProps,
|
||||
IMemory,
|
||||
IMemoryAppDetailProps,
|
||||
MemoryDetailResponse,
|
||||
MemoryListResponse,
|
||||
} from './interface';
|
||||
|
||||
export const useCreateMemory = () => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const {
|
||||
data,
|
||||
isError,
|
||||
mutateAsync: createMemoryMutation,
|
||||
} = useMutation<CreateMemoryResponse, Error, ICreateMemoryProps>({
|
||||
mutationKey: ['createMemory'],
|
||||
mutationFn: async (props) => {
|
||||
const { data: response } = await memoryService.createMemory(props);
|
||||
if (response.code !== 0) {
|
||||
throw new Error(response.message || 'Failed to create memory');
|
||||
}
|
||||
return response.data;
|
||||
},
|
||||
onSuccess: () => {
|
||||
message.success(t('message.created'));
|
||||
},
|
||||
onError: (error) => {
|
||||
message.error(t('message.error', { error: error.message }));
|
||||
},
|
||||
});
|
||||
|
||||
const createMemory = useCallback(
|
||||
(props: ICreateMemoryProps) => {
|
||||
return createMemoryMutation(props);
|
||||
},
|
||||
[createMemoryMutation],
|
||||
);
|
||||
|
||||
return { data, isError, createMemory };
|
||||
};
|
||||
|
||||
export const useFetchMemoryList = () => {
|
||||
const { handleInputChange, searchString, pagination, setPagination } =
|
||||
useHandleSearchChange();
|
||||
const debouncedSearchString = useDebounce(searchString, { wait: 500 });
|
||||
const { data, isLoading, isError, refetch } = useQuery<
|
||||
MemoryListResponse,
|
||||
Error
|
||||
>({
|
||||
queryKey: [
|
||||
'memoryList',
|
||||
{
|
||||
debouncedSearchString,
|
||||
...pagination,
|
||||
},
|
||||
],
|
||||
queryFn: async () => {
|
||||
const { data: response } = await memoryService.getMemoryList(
|
||||
{
|
||||
params: {
|
||||
keywords: debouncedSearchString,
|
||||
page_size: pagination.pageSize,
|
||||
page: pagination.current,
|
||||
},
|
||||
data: {},
|
||||
},
|
||||
true,
|
||||
);
|
||||
if (response.code !== 0) {
|
||||
throw new Error(response.message || 'Failed to fetch memory list');
|
||||
}
|
||||
console.log(response);
|
||||
return response;
|
||||
},
|
||||
});
|
||||
|
||||
// const setMemoryListParams = (newParams: MemoryListParams) => {
|
||||
// setMemoryParams((prevParams) => ({
|
||||
// ...prevParams,
|
||||
// ...newParams,
|
||||
// }));
|
||||
// };
|
||||
|
||||
return {
|
||||
data,
|
||||
isLoading,
|
||||
isError,
|
||||
pagination,
|
||||
searchString,
|
||||
handleInputChange,
|
||||
setPagination,
|
||||
refetch,
|
||||
};
|
||||
};
|
||||
|
||||
export const useFetchMemoryDetail = (tenantId?: string) => {
|
||||
const { id } = useParams();
|
||||
|
||||
const [memoryParams] = useSearchParams();
|
||||
const shared_id = memoryParams.get('shared_id');
|
||||
const memoryId = id || shared_id;
|
||||
let param: { id: string | null; tenant_id?: string } = {
|
||||
id: memoryId,
|
||||
};
|
||||
if (shared_id) {
|
||||
param = {
|
||||
id: memoryId,
|
||||
tenant_id: tenantId,
|
||||
};
|
||||
}
|
||||
const fetchMemoryDetailFunc = shared_id
|
||||
? memoryService.getMemoryDetailShare
|
||||
: memoryService.getMemoryDetail;
|
||||
|
||||
const { data, isLoading, isError } = useQuery<MemoryDetailResponse, Error>({
|
||||
queryKey: ['memoryDetail', memoryId],
|
||||
enabled: !shared_id || !!tenantId,
|
||||
queryFn: async () => {
|
||||
const { data: response } = await fetchMemoryDetailFunc(param);
|
||||
if (response.code !== 0) {
|
||||
throw new Error(response.message || 'Failed to fetch memory detail');
|
||||
}
|
||||
return response;
|
||||
},
|
||||
});
|
||||
|
||||
return { data: data?.data, isLoading, isError };
|
||||
};
|
||||
|
||||
export const useDeleteMemory = () => {
|
||||
const { t } = useTranslation();
|
||||
const queryClient = useQueryClient();
|
||||
const {
|
||||
data,
|
||||
isError,
|
||||
mutateAsync: deleteMemoryMutation,
|
||||
} = useMutation<DeleteMemoryResponse, Error, DeleteMemoryProps>({
|
||||
mutationKey: ['deleteMemory'],
|
||||
mutationFn: async (props) => {
|
||||
const { data: response } = await memoryService.deleteMemory(props);
|
||||
if (response.code !== 0) {
|
||||
throw new Error(response.message || 'Failed to delete memory');
|
||||
}
|
||||
|
||||
queryClient.invalidateQueries({ queryKey: ['memoryList'] });
|
||||
return response;
|
||||
},
|
||||
onSuccess: () => {
|
||||
message.success(t('message.deleted'));
|
||||
},
|
||||
onError: (error) => {
|
||||
message.error(t('message.error', { error: error.message }));
|
||||
},
|
||||
});
|
||||
|
||||
const deleteMemory = useCallback(
|
||||
(props: DeleteMemoryProps) => {
|
||||
return deleteMemoryMutation(props);
|
||||
},
|
||||
[deleteMemoryMutation],
|
||||
);
|
||||
|
||||
return { data, isError, deleteMemory };
|
||||
};
|
||||
|
||||
export const useUpdateMemory = () => {
|
||||
const { t } = useTranslation();
|
||||
const queryClient = useQueryClient();
|
||||
const {
|
||||
data,
|
||||
isError,
|
||||
mutateAsync: updateMemoryMutation,
|
||||
} = useMutation<any, Error, IMemoryAppDetailProps>({
|
||||
mutationKey: ['updateMemory'],
|
||||
mutationFn: async (formData) => {
|
||||
const { data: response } = await updateMemoryById(formData.id, formData);
|
||||
if (response.code !== 0) {
|
||||
throw new Error(response.message || 'Failed to update memory');
|
||||
}
|
||||
return response.data;
|
||||
},
|
||||
onSuccess: (data, variables) => {
|
||||
message.success(t('message.updated'));
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: ['memoryDetail', variables.id],
|
||||
});
|
||||
},
|
||||
onError: (error) => {
|
||||
message.error(t('message.error', { error: error.message }));
|
||||
},
|
||||
});
|
||||
|
||||
const updateMemory = useCallback(
|
||||
(formData: IMemoryAppDetailProps) => {
|
||||
return updateMemoryMutation(formData);
|
||||
},
|
||||
[updateMemoryMutation],
|
||||
);
|
||||
|
||||
return { data, isError, updateMemory };
|
||||
};
|
||||
|
||||
export const useRenameMemory = () => {
|
||||
const [memory, setMemory] = useState<IMemory>({} as IMemory);
|
||||
const { navigateToMemory } = useNavigatePage();
|
||||
const {
|
||||
visible: openCreateModal,
|
||||
hideModal: hideChatRenameModal,
|
||||
showModal: showChatRenameModal,
|
||||
} = useSetModalState();
|
||||
const { updateMemory } = useUpdateMemory();
|
||||
const { createMemory } = useCreateMemory();
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const handleShowChatRenameModal = useCallback(
|
||||
(record?: IMemory) => {
|
||||
if (record) {
|
||||
setMemory(record);
|
||||
}
|
||||
showChatRenameModal();
|
||||
},
|
||||
[showChatRenameModal],
|
||||
);
|
||||
|
||||
const handleHideModal = useCallback(() => {
|
||||
hideChatRenameModal();
|
||||
setMemory({} as IMemory);
|
||||
}, [hideChatRenameModal]);
|
||||
|
||||
const onMemoryRenameOk = useCallback(
|
||||
async (data: ICreateMemoryProps, callBack?: () => void) => {
|
||||
let res;
|
||||
setLoading(true);
|
||||
if (memory?.id) {
|
||||
try {
|
||||
// const reponse = await memoryService.getMemoryDetail({
|
||||
// id: memory?.id,
|
||||
// });
|
||||
// const detail = reponse.data?.data;
|
||||
// console.log('detail-->', detail);
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
// const { id, created_by, update_time, ...memoryDataTemp } = detail;
|
||||
res = await updateMemory({
|
||||
// ...memoryDataTemp,
|
||||
name: data.memory_name,
|
||||
id: memory?.id,
|
||||
} as unknown as IMemoryAppDetailProps);
|
||||
} catch (e) {
|
||||
console.error('error', e);
|
||||
}
|
||||
} else {
|
||||
res = await createMemory(data);
|
||||
}
|
||||
if (res && !memory?.id) {
|
||||
navigateToMemory(res?.id)();
|
||||
}
|
||||
callBack?.();
|
||||
setLoading(false);
|
||||
handleHideModal();
|
||||
},
|
||||
[memory, createMemory, handleHideModal, navigateToMemory, updateMemory],
|
||||
);
|
||||
return {
|
||||
memoryRenameLoading: loading,
|
||||
initialMemory: memory,
|
||||
onMemoryRenameOk,
|
||||
openCreateModal,
|
||||
hideMemoryModal: handleHideModal,
|
||||
showMemoryRenameModal: handleShowChatRenameModal,
|
||||
};
|
||||
};
|
||||
163
web/src/pages/memories/index.tsx
Normal file
163
web/src/pages/memories/index.tsx
Normal file
@ -0,0 +1,163 @@
|
||||
import { CardContainer } from '@/components/card-container';
|
||||
import { EmptyCardType } from '@/components/empty/constant';
|
||||
import { EmptyAppCard } from '@/components/empty/empty';
|
||||
import ListFilterBar from '@/components/list-filter-bar';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { RAGFlowPagination } from '@/components/ui/ragflow-pagination';
|
||||
import { useTranslate } from '@/hooks/common-hooks';
|
||||
import { pick } from 'lodash';
|
||||
import { Plus } from 'lucide-react';
|
||||
import { useCallback, useEffect } from 'react';
|
||||
import { useSearchParams } from 'umi';
|
||||
import { AddOrEditModal } from './add-or-edit-modal';
|
||||
import { useFetchMemoryList, useRenameMemory } from './hooks';
|
||||
import { ICreateMemoryProps } from './interface';
|
||||
import { MemoryCard } from './memory-card';
|
||||
|
||||
export default function MemoryList() {
|
||||
// const { data } = useFetchFlowList();
|
||||
const { t } = useTranslate('memory');
|
||||
// const [isEdit, setIsEdit] = useState(false);
|
||||
const {
|
||||
data: list,
|
||||
pagination,
|
||||
searchString,
|
||||
handleInputChange,
|
||||
setPagination,
|
||||
refetch: refetchList,
|
||||
} = useFetchMemoryList();
|
||||
|
||||
const {
|
||||
openCreateModal,
|
||||
showMemoryRenameModal,
|
||||
hideMemoryModal,
|
||||
searchRenameLoading,
|
||||
onMemoryRenameOk,
|
||||
initialMemory,
|
||||
} = useRenameMemory();
|
||||
|
||||
const onMemoryConfirm = (data: ICreateMemoryProps) => {
|
||||
onMemoryRenameOk(data, () => {
|
||||
refetchList();
|
||||
});
|
||||
};
|
||||
const openCreateModalFun = useCallback(() => {
|
||||
// setIsEdit(false);
|
||||
showMemoryRenameModal();
|
||||
}, [showMemoryRenameModal]);
|
||||
const handlePageChange = useCallback(
|
||||
(page: number, pageSize?: number) => {
|
||||
setPagination({ page, pageSize });
|
||||
},
|
||||
[setPagination],
|
||||
);
|
||||
|
||||
const [searchUrl, setMemoryUrl] = useSearchParams();
|
||||
const isCreate = searchUrl.get('isCreate') === 'true';
|
||||
useEffect(() => {
|
||||
if (isCreate) {
|
||||
openCreateModalFun();
|
||||
searchUrl.delete('isCreate');
|
||||
setMemoryUrl(searchUrl);
|
||||
}
|
||||
}, [isCreate, openCreateModalFun, searchUrl, setMemoryUrl]);
|
||||
|
||||
return (
|
||||
<section className="w-full h-full flex flex-col">
|
||||
{(!list?.data?.memory_list?.length ||
|
||||
list?.data?.memory_list?.length <= 0) &&
|
||||
!searchString && (
|
||||
<div className="flex w-full items-center justify-center h-[calc(100vh-164px)]">
|
||||
<EmptyAppCard
|
||||
showIcon
|
||||
size="large"
|
||||
className="w-[480px] p-14"
|
||||
isSearch={!!searchString}
|
||||
type={EmptyCardType.Memory}
|
||||
onClick={() => openCreateModalFun()}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{(!!list?.data?.memory_list?.length || searchString) && (
|
||||
<>
|
||||
<div className="px-8 pt-8">
|
||||
<ListFilterBar
|
||||
icon="memory"
|
||||
title={t('memory')}
|
||||
showFilter={false}
|
||||
onSearchChange={handleInputChange}
|
||||
searchString={searchString}
|
||||
>
|
||||
<Button
|
||||
variant={'default'}
|
||||
onClick={() => {
|
||||
openCreateModalFun();
|
||||
}}
|
||||
>
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
{t('createMemory')}
|
||||
</Button>
|
||||
</ListFilterBar>
|
||||
</div>
|
||||
{(!list?.data?.memory_list?.length ||
|
||||
list?.data?.memory_list?.length <= 0) &&
|
||||
searchString && (
|
||||
<div className="flex w-full items-center justify-center h-[calc(100vh-164px)]">
|
||||
<EmptyAppCard
|
||||
showIcon
|
||||
size="large"
|
||||
className="w-[480px] p-14"
|
||||
isSearch={!!searchString}
|
||||
type={EmptyCardType.Memory}
|
||||
onClick={() => openCreateModalFun()}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex-1">
|
||||
<CardContainer className="max-h-[calc(100dvh-280px)] overflow-auto px-8">
|
||||
{list?.data.memory_list.map((x) => {
|
||||
return (
|
||||
<MemoryCard
|
||||
key={x.id}
|
||||
data={x}
|
||||
showMemoryRenameModal={() => {
|
||||
showMemoryRenameModal(x);
|
||||
}}
|
||||
></MemoryCard>
|
||||
);
|
||||
})}
|
||||
</CardContainer>
|
||||
</div>
|
||||
{list?.data.total && list?.data.total > 0 && (
|
||||
<div className="px-8 mb-4">
|
||||
<RAGFlowPagination
|
||||
{...pick(pagination, 'current', 'pageSize')}
|
||||
// total={pagination.total}
|
||||
total={list?.data.total}
|
||||
onChange={handlePageChange}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{/* {openCreateModal && (
|
||||
<RenameDialog
|
||||
hideModal={hideMemoryRenameModal}
|
||||
onOk={onMemoryRenameConfirm}
|
||||
initialName={initialMemoryName}
|
||||
loading={searchRenameLoading}
|
||||
title={<HomeIcon name="memory" width={'24'} />}
|
||||
></RenameDialog>
|
||||
)} */}
|
||||
{openCreateModal && (
|
||||
<AddOrEditModal
|
||||
initialMemory={initialMemory}
|
||||
open={openCreateModal}
|
||||
loading={searchRenameLoading}
|
||||
onClose={hideMemoryModal}
|
||||
onSubmit={onMemoryConfirm}
|
||||
/>
|
||||
)}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
121
web/src/pages/memories/interface.ts
Normal file
121
web/src/pages/memories/interface.ts
Normal file
@ -0,0 +1,121 @@
|
||||
export interface ICreateMemoryProps {
|
||||
memory_name: string;
|
||||
memory_type: Array<string>;
|
||||
embedding: string;
|
||||
llm: string;
|
||||
}
|
||||
|
||||
export interface CreateMemoryResponse {
|
||||
id: string;
|
||||
name: string;
|
||||
description: string;
|
||||
}
|
||||
|
||||
export interface MemoryListParams {
|
||||
keywords?: string;
|
||||
parser_id?: string;
|
||||
page?: number;
|
||||
page_size?: number;
|
||||
orderby?: string;
|
||||
desc?: boolean;
|
||||
owner_ids?: string;
|
||||
}
|
||||
export type MemoryType = 'raw' | 'semantic' | 'episodic' | 'procedural';
|
||||
export type StorageType = 'table' | 'graph';
|
||||
export type Permissions = 'me' | 'team';
|
||||
export type ForgettingPolicy = 'fifo' | 'lru';
|
||||
|
||||
export interface IMemory {
|
||||
id: string;
|
||||
name: string;
|
||||
avatar: string;
|
||||
tenant_id: string;
|
||||
owner_name: string;
|
||||
memory_type: MemoryType[];
|
||||
storage_type: StorageType;
|
||||
embedding: string;
|
||||
llm: string;
|
||||
permissions: Permissions;
|
||||
description: string;
|
||||
memory_size: number;
|
||||
forgetting_policy: ForgettingPolicy;
|
||||
temperature: string;
|
||||
system_prompt: string;
|
||||
user_prompt: string;
|
||||
}
|
||||
export interface MemoryListResponse {
|
||||
code: number;
|
||||
data: {
|
||||
memory_list: Array<IMemory>;
|
||||
total: number;
|
||||
};
|
||||
message: string;
|
||||
}
|
||||
|
||||
export interface DeleteMemoryProps {
|
||||
memory_id: string;
|
||||
}
|
||||
|
||||
export interface DeleteMemoryResponse {
|
||||
code: number;
|
||||
data: boolean;
|
||||
message: string;
|
||||
}
|
||||
|
||||
export interface IllmSettingProps {
|
||||
llm_id: string;
|
||||
parameter: string;
|
||||
temperature?: number;
|
||||
top_p?: number;
|
||||
frequency_penalty?: number;
|
||||
presence_penalty?: number;
|
||||
}
|
||||
interface IllmSettingEnableProps {
|
||||
temperatureEnabled?: boolean;
|
||||
topPEnabled?: boolean;
|
||||
presencePenaltyEnabled?: boolean;
|
||||
frequencyPenaltyEnabled?: boolean;
|
||||
}
|
||||
export interface IMemoryAppDetailProps {
|
||||
avatar: any;
|
||||
created_by: string;
|
||||
description: string;
|
||||
id: string;
|
||||
name: string;
|
||||
memory_config: {
|
||||
cross_languages: string[];
|
||||
doc_ids: string[];
|
||||
chat_id: string;
|
||||
highlight: boolean;
|
||||
kb_ids: string[];
|
||||
keyword: boolean;
|
||||
query_mindmap: boolean;
|
||||
related_memory: boolean;
|
||||
rerank_id: string;
|
||||
use_rerank?: boolean;
|
||||
similarity_threshold: number;
|
||||
summary: boolean;
|
||||
llm_setting: IllmSettingProps & IllmSettingEnableProps;
|
||||
top_k: number;
|
||||
use_kg: boolean;
|
||||
vector_similarity_weight: number;
|
||||
web_memory: boolean;
|
||||
chat_settingcross_languages: string[];
|
||||
meta_data_filter?: {
|
||||
method: string;
|
||||
manual: { key: string; op: string; value: string }[];
|
||||
};
|
||||
};
|
||||
tenant_id: string;
|
||||
update_time: number;
|
||||
}
|
||||
|
||||
export interface MemoryDetailResponse {
|
||||
code: number;
|
||||
data: IMemoryAppDetailProps;
|
||||
message: string;
|
||||
}
|
||||
|
||||
// export type IUpdateMemoryProps = Omit<IMemoryAppDetailProps, 'id'> & {
|
||||
// id: string;
|
||||
// };
|
||||
32
web/src/pages/memories/memory-card.tsx
Normal file
32
web/src/pages/memories/memory-card.tsx
Normal file
@ -0,0 +1,32 @@
|
||||
import { HomeCard } from '@/components/home-card';
|
||||
import { MoreButton } from '@/components/more-button';
|
||||
import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
|
||||
import { IMemory } from './interface';
|
||||
import { MemoryDropdown } from './memory-dropdown';
|
||||
|
||||
interface IProps {
|
||||
data: IMemory;
|
||||
showMemoryRenameModal: (data: IMemory) => void;
|
||||
}
|
||||
export function MemoryCard({ data, showMemoryRenameModal }: IProps) {
|
||||
const { navigateToMemory } = useNavigatePage();
|
||||
|
||||
return (
|
||||
<HomeCard
|
||||
data={{
|
||||
name: data?.name,
|
||||
avatar: data?.avatar,
|
||||
description: data?.description,
|
||||
}}
|
||||
moreDropdown={
|
||||
<MemoryDropdown
|
||||
dataset={data}
|
||||
showMemoryRenameModal={showMemoryRenameModal}
|
||||
>
|
||||
<MoreButton></MoreButton>
|
||||
</MemoryDropdown>
|
||||
}
|
||||
onClick={navigateToMemory(data?.id)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
74
web/src/pages/memories/memory-dropdown.tsx
Normal file
74
web/src/pages/memories/memory-dropdown.tsx
Normal file
@ -0,0 +1,74 @@
|
||||
import {
|
||||
ConfirmDeleteDialog,
|
||||
ConfirmDeleteDialogNode,
|
||||
} from '@/components/confirm-delete-dialog';
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from '@/components/ui/dropdown-menu';
|
||||
import { PenLine, Trash2 } from 'lucide-react';
|
||||
import { MouseEventHandler, PropsWithChildren, useCallback } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { IMemoryAppProps, useDeleteMemory } from './hooks';
|
||||
|
||||
export function MemoryDropdown({
|
||||
children,
|
||||
dataset,
|
||||
showMemoryRenameModal,
|
||||
}: PropsWithChildren & {
|
||||
dataset: IMemoryAppProps;
|
||||
showMemoryRenameModal: (dataset: IMemoryAppProps) => void;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const { deleteMemory } = useDeleteMemory();
|
||||
const handleShowChatRenameModal: MouseEventHandler<HTMLDivElement> =
|
||||
useCallback(
|
||||
(e) => {
|
||||
e.stopPropagation();
|
||||
showMemoryRenameModal(dataset);
|
||||
},
|
||||
[dataset, showMemoryRenameModal],
|
||||
);
|
||||
const handleDelete: MouseEventHandler<HTMLDivElement> = useCallback(() => {
|
||||
deleteMemory({ search_id: dataset.id });
|
||||
}, [dataset.id, deleteMemory]);
|
||||
|
||||
return (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>{children}</DropdownMenuTrigger>
|
||||
<DropdownMenuContent>
|
||||
<DropdownMenuItem onClick={handleShowChatRenameModal}>
|
||||
{t('common.rename')} <PenLine />
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
<ConfirmDeleteDialog
|
||||
onOk={handleDelete}
|
||||
title={t('deleteModal.delMemory')}
|
||||
content={{
|
||||
node: (
|
||||
<ConfirmDeleteDialogNode
|
||||
avatar={{ avatar: dataset.avatar, name: dataset.name }}
|
||||
name={dataset.name}
|
||||
/>
|
||||
),
|
||||
}}
|
||||
>
|
||||
<DropdownMenuItem
|
||||
className="text-state-error"
|
||||
onSelect={(e) => {
|
||||
e.preventDefault();
|
||||
}}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
>
|
||||
{t('common.delete')} <Trash2 />
|
||||
</DropdownMenuItem>
|
||||
</ConfirmDeleteDialog>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
);
|
||||
}
|
||||
3
web/src/pages/memory/constant.tsx
Normal file
3
web/src/pages/memory/constant.tsx
Normal file
@ -0,0 +1,3 @@
|
||||
export enum MemoryApiAction {
|
||||
FetchMemoryDetail = 'fetchMemoryDetail',
|
||||
}
|
||||
59
web/src/pages/memory/hooks/use-memory-messages.ts
Normal file
59
web/src/pages/memory/hooks/use-memory-messages.ts
Normal file
@ -0,0 +1,59 @@
|
||||
import { useHandleSearchChange } from '@/hooks/logic-hooks';
|
||||
import { getMemoryDetailById } from '@/services/memory-service';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { useParams, useSearchParams } from 'umi';
|
||||
import { MemoryApiAction } from '../constant';
|
||||
import { IMessageTableProps } from '../memory-message/interface';
|
||||
|
||||
export const useFetchMemoryMessageList = (props?: {
|
||||
refreshCount?: number;
|
||||
}) => {
|
||||
const { refreshCount } = props || {};
|
||||
const { id } = useParams();
|
||||
const [searchParams] = useSearchParams();
|
||||
const memoryBaseId = searchParams.get('id') || id;
|
||||
const { handleInputChange, searchString, pagination, setPagination } =
|
||||
useHandleSearchChange();
|
||||
|
||||
let queryKey: (MemoryApiAction | number)[] = [
|
||||
MemoryApiAction.FetchMemoryDetail,
|
||||
];
|
||||
if (typeof refreshCount === 'number') {
|
||||
queryKey = [MemoryApiAction.FetchMemoryDetail, refreshCount];
|
||||
}
|
||||
|
||||
const { data, isFetching: loading } = useQuery<IMessageTableProps>({
|
||||
queryKey: [...queryKey, searchString, pagination],
|
||||
initialData: {} as IMessageTableProps,
|
||||
gcTime: 0,
|
||||
queryFn: async () => {
|
||||
if (memoryBaseId) {
|
||||
const { data } = await getMemoryDetailById(memoryBaseId as string, {
|
||||
// filter: {
|
||||
// agent_id: '',
|
||||
// },
|
||||
keyword: searchString,
|
||||
page: pagination.current,
|
||||
page_size: pagination.pageSize,
|
||||
});
|
||||
// setPagination({
|
||||
// page: data?.page ?? 1,
|
||||
// pageSize: data?.page_size ?? 10,
|
||||
// total: data?.total ?? 0,
|
||||
// });
|
||||
return data?.data ?? {};
|
||||
} else {
|
||||
return {};
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
return {
|
||||
data,
|
||||
loading,
|
||||
handleInputChange,
|
||||
searchString,
|
||||
pagination,
|
||||
setPagination,
|
||||
};
|
||||
};
|
||||
59
web/src/pages/memory/hooks/use-memory-setting.ts
Normal file
59
web/src/pages/memory/hooks/use-memory-setting.ts
Normal file
@ -0,0 +1,59 @@
|
||||
import { useHandleSearchChange } from '@/hooks/logic-hooks';
|
||||
import { IMemory } from '@/pages/memories/interface';
|
||||
import { getMemoryDetailById } from '@/services/memory-service';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { useParams, useSearchParams } from 'umi';
|
||||
import { MemoryApiAction } from '../constant';
|
||||
|
||||
export const useFetchMemoryBaseConfiguration = (props?: {
|
||||
refreshCount?: number;
|
||||
}) => {
|
||||
const { refreshCount } = props || {};
|
||||
const { id } = useParams();
|
||||
const [searchParams] = useSearchParams();
|
||||
const memoryBaseId = searchParams.get('id') || id;
|
||||
const { handleInputChange, searchString, pagination, setPagination } =
|
||||
useHandleSearchChange();
|
||||
|
||||
let queryKey: (MemoryApiAction | number)[] = [
|
||||
MemoryApiAction.FetchMemoryDetail,
|
||||
];
|
||||
if (typeof refreshCount === 'number') {
|
||||
queryKey = [MemoryApiAction.FetchMemoryDetail, refreshCount];
|
||||
}
|
||||
|
||||
const { data, isFetching: loading } = useQuery<IMemory>({
|
||||
queryKey: [...queryKey, searchString, pagination],
|
||||
initialData: {} as IMemory,
|
||||
gcTime: 0,
|
||||
queryFn: async () => {
|
||||
if (memoryBaseId) {
|
||||
const { data } = await getMemoryDetailById(memoryBaseId as string, {
|
||||
// filter: {
|
||||
// agent_id: '',
|
||||
// },
|
||||
keyword: searchString,
|
||||
page: pagination.current,
|
||||
page_size: pagination.size,
|
||||
});
|
||||
// setPagination({
|
||||
// page: data?.page ?? 1,
|
||||
// pageSize: data?.page_size ?? 10,
|
||||
// total: data?.total ?? 0,
|
||||
// });
|
||||
return data?.data ?? {};
|
||||
} else {
|
||||
return {};
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
return {
|
||||
data,
|
||||
loading,
|
||||
handleInputChange,
|
||||
searchString,
|
||||
pagination,
|
||||
setPagination,
|
||||
};
|
||||
};
|
||||
17
web/src/pages/memory/index.tsx
Normal file
17
web/src/pages/memory/index.tsx
Normal file
@ -0,0 +1,17 @@
|
||||
import Spotlight from '@/components/spotlight';
|
||||
import { Outlet } from 'umi';
|
||||
import { SideBar } from './sidebar';
|
||||
|
||||
export default function DatasetWrapper() {
|
||||
return (
|
||||
<section className="flex h-full flex-col w-full">
|
||||
<div className="flex flex-1 min-h-0">
|
||||
<SideBar></SideBar>
|
||||
<div className=" relative flex-1 overflow-auto border-[0.5px] border-border-button p-5 rounded-md mr-5 mb-5">
|
||||
<Spotlight />
|
||||
<Outlet />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
51
web/src/pages/memory/memory-message/index.tsx
Normal file
51
web/src/pages/memory/memory-message/index.tsx
Normal file
@ -0,0 +1,51 @@
|
||||
import ListFilterBar from '@/components/list-filter-bar';
|
||||
import { t } from 'i18next';
|
||||
import { useFetchMemoryMessageList } from '../hooks/use-memory-messages';
|
||||
import { MemoryTable } from './message-table';
|
||||
|
||||
export default function MemoryMessage() {
|
||||
const {
|
||||
searchString,
|
||||
// documents,
|
||||
data,
|
||||
pagination,
|
||||
handleInputChange,
|
||||
setPagination,
|
||||
// filterValue,
|
||||
// handleFilterSubmit,
|
||||
loading,
|
||||
} = useFetchMemoryMessageList();
|
||||
return (
|
||||
<div className="flex flex-col gap-2">
|
||||
<ListFilterBar
|
||||
title="Dataset"
|
||||
onSearchChange={handleInputChange}
|
||||
searchString={searchString}
|
||||
// value={filterValue}
|
||||
// onChange={handleFilterSubmit}
|
||||
// onOpenChange={onOpenChange}
|
||||
// filters={filters}
|
||||
leftPanel={
|
||||
<div className="items-start">
|
||||
<div className="pb-1">{t('knowledgeDetails.subbarFiles')}</div>
|
||||
<div className="text-text-secondary text-sm">
|
||||
{t('knowledgeDetails.datasetDescription')}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
></ListFilterBar>
|
||||
<MemoryTable
|
||||
messages={data?.messages?.message_list ?? []}
|
||||
pagination={pagination}
|
||||
setPagination={setPagination}
|
||||
total={data?.messages?.total ?? 0}
|
||||
// rowSelection={rowSelection}
|
||||
// setRowSelection={setRowSelection}
|
||||
// loading={loading}
|
||||
></MemoryTable>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="h-4 w-4 rounded-full bg-text ">message</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
19
web/src/pages/memory/memory-message/interface.ts
Normal file
19
web/src/pages/memory/memory-message/interface.ts
Normal file
@ -0,0 +1,19 @@
|
||||
export interface IMessageInfo {
|
||||
message_id: number;
|
||||
message_type: 'semantic' | 'raw' | 'procedural';
|
||||
source_id: string | '-';
|
||||
id: string;
|
||||
user_id: string;
|
||||
agent_id: string;
|
||||
agent_name: string;
|
||||
session_id: string;
|
||||
valid_at: string;
|
||||
invalid_at: string;
|
||||
forget_at: string;
|
||||
status: boolean;
|
||||
}
|
||||
|
||||
export interface IMessageTableProps {
|
||||
messages: { message_list: Array<IMessageInfo>; total: number };
|
||||
storage_type: string;
|
||||
}
|
||||
225
web/src/pages/memory/memory-message/message-table.tsx
Normal file
225
web/src/pages/memory/memory-message/message-table.tsx
Normal file
@ -0,0 +1,225 @@
|
||||
import {
|
||||
ColumnDef,
|
||||
ColumnFiltersState,
|
||||
SortingState,
|
||||
VisibilityState,
|
||||
flexRender,
|
||||
getCoreRowModel,
|
||||
getFilteredRowModel,
|
||||
getPaginationRowModel,
|
||||
getSortedRowModel,
|
||||
useReactTable,
|
||||
} from '@tanstack/react-table';
|
||||
import * as React from 'react';
|
||||
|
||||
import { EmptyType } from '@/components/empty/constant';
|
||||
import Empty from '@/components/empty/empty';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { RAGFlowPagination } from '@/components/ui/ragflow-pagination';
|
||||
import { Switch } from '@/components/ui/switch';
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from '@/components/ui/table';
|
||||
import { Pagination } from '@/interfaces/common';
|
||||
import { t } from 'i18next';
|
||||
import { pick } from 'lodash';
|
||||
import { Eraser, TextSelect } from 'lucide-react';
|
||||
import { useMemo } from 'react';
|
||||
import { IMessageInfo } from './interface';
|
||||
|
||||
export type MemoryTableProps = {
|
||||
messages: Array<IMessageInfo>;
|
||||
total: number;
|
||||
pagination: Pagination;
|
||||
setPagination: (params: { page: number; pageSize: number }) => void;
|
||||
};
|
||||
|
||||
export function MemoryTable({
|
||||
messages,
|
||||
total,
|
||||
pagination,
|
||||
setPagination,
|
||||
}: MemoryTableProps) {
|
||||
const [sorting, setSorting] = React.useState<SortingState>([]);
|
||||
const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
|
||||
[],
|
||||
);
|
||||
const [columnVisibility, setColumnVisibility] =
|
||||
React.useState<VisibilityState>({});
|
||||
|
||||
// Define columns for the memory table
|
||||
const columns: ColumnDef<IMessageInfo>[] = useMemo(
|
||||
() => [
|
||||
{
|
||||
accessorKey: 'session_id',
|
||||
header: () => <span>{t('memoryDetail.messages.sessionId')}</span>,
|
||||
cell: ({ row }) => (
|
||||
<div className="text-sm font-medium ">
|
||||
{row.getValue('session_id')}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: 'agent_name',
|
||||
header: () => <span>{t('memoryDetail.messages.agent')}</span>,
|
||||
cell: ({ row }) => (
|
||||
<div className="text-sm font-medium ">
|
||||
{row.getValue('agent_name')}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: 'message_type',
|
||||
header: () => <span>{t('memoryDetail.messages.type')}</span>,
|
||||
cell: ({ row }) => (
|
||||
<div className="text-sm font-medium capitalize">
|
||||
{row.getValue('message_type')}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: 'valid_at',
|
||||
header: () => <span>{t('memoryDetail.messages.validDate')}</span>,
|
||||
cell: ({ row }) => (
|
||||
<div className="text-sm ">{row.getValue('valid_at')}</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: 'forget_at',
|
||||
header: () => <span>{t('memoryDetail.messages.forgetAt')}</span>,
|
||||
cell: ({ row }) => (
|
||||
<div className="text-sm ">{row.getValue('forget_at')}</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: 'source_id',
|
||||
header: () => <span>{t('memoryDetail.messages.source')}</span>,
|
||||
cell: ({ row }) => (
|
||||
<div className="text-sm ">{row.getValue('source_id')}</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: 'status',
|
||||
header: () => <span>{t('memoryDetail.messages.enable')}</span>,
|
||||
cell: ({ row }) => {
|
||||
const isEnabled = row.getValue('status') as boolean;
|
||||
return (
|
||||
<div className="flex items-center">
|
||||
<Switch defaultChecked={isEnabled} onChange={() => {}} />
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: 'action',
|
||||
header: () => <span>{t('memoryDetail.messages.action')}</span>,
|
||||
meta: {
|
||||
cellClassName: 'w-12',
|
||||
},
|
||||
cell: () => (
|
||||
<div className=" hidden group-hover:flex">
|
||||
<Button variant={'ghost'} className="bg-transparent">
|
||||
<TextSelect />
|
||||
</Button>
|
||||
<Button
|
||||
variant={'delete'}
|
||||
className="bg-transparent"
|
||||
aria-label="Edit"
|
||||
>
|
||||
<Eraser />
|
||||
</Button>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
],
|
||||
[],
|
||||
);
|
||||
|
||||
const currentPagination = useMemo(() => {
|
||||
return {
|
||||
pageIndex: (pagination.current || 1) - 1,
|
||||
pageSize: pagination.pageSize || 10,
|
||||
};
|
||||
}, [pagination]);
|
||||
|
||||
const table = useReactTable({
|
||||
data: messages,
|
||||
columns,
|
||||
onSortingChange: setSorting,
|
||||
onColumnFiltersChange: setColumnFilters,
|
||||
getCoreRowModel: getCoreRowModel(),
|
||||
getPaginationRowModel: getPaginationRowModel(),
|
||||
getSortedRowModel: getSortedRowModel(),
|
||||
getFilteredRowModel: getFilteredRowModel(),
|
||||
onColumnVisibilityChange: setColumnVisibility,
|
||||
manualPagination: true,
|
||||
state: {
|
||||
sorting,
|
||||
columnFilters,
|
||||
columnVisibility,
|
||||
pagination: currentPagination,
|
||||
},
|
||||
rowCount: total,
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="w-full">
|
||||
<Table rootClassName="max-h-[calc(100vh-222px)]">
|
||||
<TableHeader>
|
||||
{table.getHeaderGroups().map((headerGroup) => (
|
||||
<TableRow key={headerGroup.id}>
|
||||
{headerGroup.headers.map((header) => (
|
||||
<TableHead key={header.id}>
|
||||
{header.isPlaceholder
|
||||
? null
|
||||
: flexRender(
|
||||
header.column.columnDef.header,
|
||||
header.getContext(),
|
||||
)}
|
||||
</TableHead>
|
||||
))}
|
||||
</TableRow>
|
||||
))}
|
||||
</TableHeader>
|
||||
<TableBody className="relative">
|
||||
{table.getRowModel().rows?.length ? (
|
||||
table.getRowModel().rows.map((row) => (
|
||||
<TableRow
|
||||
key={row.id}
|
||||
data-state={row.getIsSelected() && 'selected'}
|
||||
className="group"
|
||||
>
|
||||
{row.getVisibleCells().map((cell) => (
|
||||
<TableCell key={cell.id}>
|
||||
{flexRender(cell.column.columnDef.cell, cell.getContext())}
|
||||
</TableCell>
|
||||
))}
|
||||
</TableRow>
|
||||
))
|
||||
) : (
|
||||
<TableRow>
|
||||
<TableCell colSpan={columns.length} className="h-24 text-center">
|
||||
<Empty type={EmptyType.Data} />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
|
||||
<div className="flex items-center justify-end py-4 absolute bottom-3 right-3">
|
||||
<RAGFlowPagination
|
||||
{...pick(pagination, 'current', 'pageSize')}
|
||||
total={total}
|
||||
onChange={(page, pageSize) => {
|
||||
setPagination({ page, pageSize });
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
13
web/src/pages/memory/memory-setting/index.tsx
Normal file
13
web/src/pages/memory/memory-setting/index.tsx
Normal file
@ -0,0 +1,13 @@
|
||||
export default function MemoryMessage() {
|
||||
return (
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="h-4 w-4 rounded-full bg-text-secondary">11</div>
|
||||
<div className="h-4 w-4 rounded-full bg-text-secondary">11</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="h-4 w-4 rounded-full bg-text ">setting</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
17
web/src/pages/memory/sidebar/hooks.tsx
Normal file
17
web/src/pages/memory/sidebar/hooks.tsx
Normal file
@ -0,0 +1,17 @@
|
||||
import { Routes } from '@/routes';
|
||||
import { useCallback } from 'react';
|
||||
import { useNavigate, useParams } from 'umi';
|
||||
|
||||
export const useHandleMenuClick = () => {
|
||||
const navigate = useNavigate();
|
||||
const { id } = useParams();
|
||||
|
||||
const handleMenuClick = useCallback(
|
||||
(key: Routes) => () => {
|
||||
navigate(`${Routes.Memory}${key}/${id}`);
|
||||
},
|
||||
[id, navigate],
|
||||
);
|
||||
|
||||
return { handleMenuClick };
|
||||
};
|
||||
88
web/src/pages/memory/sidebar/index.tsx
Normal file
88
web/src/pages/memory/sidebar/index.tsx
Normal file
@ -0,0 +1,88 @@
|
||||
import { RAGFlowAvatar } from '@/components/ragflow-avatar';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { useSecondPathName } from '@/hooks/route-hook';
|
||||
import { cn, formatBytes } from '@/lib/utils';
|
||||
import { Routes } from '@/routes';
|
||||
import { formatPureDate } from '@/utils/date';
|
||||
import { Banknote, Logs } from 'lucide-react';
|
||||
import { useMemo } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useFetchMemoryBaseConfiguration } from '../hooks/use-memory-setting';
|
||||
import { useHandleMenuClick } from './hooks';
|
||||
|
||||
type PropType = {
|
||||
refreshCount?: number;
|
||||
};
|
||||
|
||||
export function SideBar({ refreshCount }: PropType) {
|
||||
const pathName = useSecondPathName();
|
||||
const { handleMenuClick } = useHandleMenuClick();
|
||||
// refreshCount: be for avatar img sync update on top left
|
||||
const { data } = useFetchMemoryBaseConfiguration({ refreshCount });
|
||||
const { t } = useTranslation();
|
||||
|
||||
const items = useMemo(() => {
|
||||
const list = [
|
||||
{
|
||||
icon: <Logs className="size-4" />,
|
||||
label: t(`knowledgeDetails.overview`),
|
||||
key: Routes.MemoryMessage,
|
||||
},
|
||||
{
|
||||
icon: <Banknote className="size-4" />,
|
||||
label: t(`knowledgeDetails.configuration`),
|
||||
key: Routes.MemorySetting,
|
||||
},
|
||||
];
|
||||
return list;
|
||||
}, [t]);
|
||||
|
||||
return (
|
||||
<aside className="relative p-5 space-y-8">
|
||||
<div className="flex gap-2.5 max-w-[200px] items-center">
|
||||
<RAGFlowAvatar
|
||||
avatar={data.avatar}
|
||||
name={data.name}
|
||||
className="size-16"
|
||||
></RAGFlowAvatar>
|
||||
<div className=" text-text-secondary text-xs space-y-1 overflow-hidden">
|
||||
<h3 className="text-lg font-semibold line-clamp-1 text-text-primary text-ellipsis overflow-hidden">
|
||||
{data.name}
|
||||
</h3>
|
||||
<div className="flex justify-between">
|
||||
<span>
|
||||
{data.doc_num} {t('knowledgeDetails.files')}
|
||||
</span>
|
||||
<span>{formatBytes(data.size)}</span>
|
||||
</div>
|
||||
<div>
|
||||
{t('knowledgeDetails.created')} {formatPureDate(data.create_time)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="w-[200px] flex flex-col gap-5">
|
||||
{items.map((item, itemIdx) => {
|
||||
const active = '/' + pathName === item.key;
|
||||
return (
|
||||
<Button
|
||||
key={itemIdx}
|
||||
variant={active ? 'secondary' : 'ghost'}
|
||||
className={cn(
|
||||
'w-full justify-start gap-2.5 px-3 relative h-10 text-text-secondary',
|
||||
{
|
||||
'bg-bg-card': active,
|
||||
'text-text-primary': active,
|
||||
},
|
||||
)}
|
||||
onClick={handleMenuClick(item.key)}
|
||||
>
|
||||
{item.icon}
|
||||
<span>{item.label}</span>
|
||||
</Button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
@ -50,18 +50,19 @@ export default function ChatList() {
|
||||
|
||||
return (
|
||||
<section className="flex flex-col w-full flex-1">
|
||||
{data.dialogs?.length <= 0 && (
|
||||
{data.dialogs?.length <= 0 && !searchString && (
|
||||
<div className="flex w-full items-center justify-center h-[calc(100vh-164px)]">
|
||||
<EmptyAppCard
|
||||
showIcon
|
||||
size="large"
|
||||
className="w-[480px] p-14"
|
||||
isSearch={!!searchString}
|
||||
type={EmptyCardType.Chat}
|
||||
onClick={() => handleShowCreateModal()}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{data.dialogs?.length > 0 && (
|
||||
{(data.dialogs?.length > 0 || searchString) && (
|
||||
<>
|
||||
<div className="px-8 pt-8">
|
||||
<ListFilterBar
|
||||
@ -76,6 +77,18 @@ export default function ChatList() {
|
||||
</Button>
|
||||
</ListFilterBar>
|
||||
</div>
|
||||
{data.dialogs?.length <= 0 && searchString && (
|
||||
<div className="flex w-full items-center justify-center h-[calc(100vh-164px)]">
|
||||
<EmptyAppCard
|
||||
showIcon
|
||||
size="large"
|
||||
className="w-[480px] p-14"
|
||||
isSearch={!!searchString}
|
||||
type={EmptyCardType.Chat}
|
||||
onClick={() => handleShowCreateModal()}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex-1 overflow-auto">
|
||||
<CardContainer className="max-h-[calc(100dvh-280px)] overflow-auto px-8">
|
||||
{data.dialogs.map((x) => {
|
||||
|
||||
@ -2,9 +2,11 @@
|
||||
|
||||
import message from '@/components/ui/message';
|
||||
import { useSetModalState } from '@/hooks/common-hooks';
|
||||
import { useHandleSearchChange } from '@/hooks/logic-hooks';
|
||||
import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
|
||||
import searchService from '@/services/search-service';
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
||||
import { useDebounce } from 'ahooks';
|
||||
import { useCallback, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useParams, useSearchParams } from 'umi';
|
||||
@ -84,21 +86,34 @@ interface SearchListResponse {
|
||||
message: string;
|
||||
}
|
||||
|
||||
export const useFetchSearchList = (params?: SearchListParams) => {
|
||||
const [searchParams, setSearchParams] = useState<SearchListParams>({
|
||||
page: 1,
|
||||
page_size: 50,
|
||||
...params,
|
||||
});
|
||||
export const useFetchSearchList = () => {
|
||||
const { handleInputChange, searchString, pagination, setPagination } =
|
||||
useHandleSearchChange();
|
||||
const debouncedSearchString = useDebounce(searchString, { wait: 500 });
|
||||
|
||||
const { data, isLoading, isError, refetch } = useQuery<
|
||||
SearchListResponse,
|
||||
Error
|
||||
>({
|
||||
queryKey: ['searchList', searchParams],
|
||||
queryKey: [
|
||||
'searchList',
|
||||
{
|
||||
debouncedSearchString,
|
||||
...pagination,
|
||||
},
|
||||
],
|
||||
queryFn: async () => {
|
||||
const { data: response } =
|
||||
await searchService.getSearchList(searchParams);
|
||||
const { data: response } = await searchService.getSearchList(
|
||||
{
|
||||
params: {
|
||||
keywords: debouncedSearchString,
|
||||
page_size: pagination.pageSize,
|
||||
page: pagination.current,
|
||||
},
|
||||
data: {},
|
||||
},
|
||||
true,
|
||||
);
|
||||
if (response.code !== 0) {
|
||||
throw new Error(response.message || 'Failed to fetch search list');
|
||||
}
|
||||
@ -106,19 +121,14 @@ export const useFetchSearchList = (params?: SearchListParams) => {
|
||||
},
|
||||
});
|
||||
|
||||
const setSearchListParams = (newParams: SearchListParams) => {
|
||||
setSearchParams((prevParams) => ({
|
||||
...prevParams,
|
||||
...newParams,
|
||||
}));
|
||||
};
|
||||
|
||||
return {
|
||||
data,
|
||||
isLoading,
|
||||
isError,
|
||||
searchParams,
|
||||
setSearchListParams,
|
||||
pagination,
|
||||
searchString,
|
||||
handleInputChange,
|
||||
setPagination,
|
||||
refetch,
|
||||
};
|
||||
};
|
||||
|
||||
@ -7,6 +7,7 @@ import { RenameDialog } from '@/components/rename-dialog';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { RAGFlowPagination } from '@/components/ui/ragflow-pagination';
|
||||
import { useTranslate } from '@/hooks/common-hooks';
|
||||
import { pick } from 'lodash';
|
||||
import { Plus } from 'lucide-react';
|
||||
import { useCallback, useEffect } from 'react';
|
||||
import { useSearchParams } from 'umi';
|
||||
@ -19,10 +20,13 @@ export default function SearchList() {
|
||||
// const [isEdit, setIsEdit] = useState(false);
|
||||
const {
|
||||
data: list,
|
||||
searchParams,
|
||||
setSearchListParams,
|
||||
pagination,
|
||||
searchString,
|
||||
handleInputChange,
|
||||
setPagination,
|
||||
refetch: refetchList,
|
||||
} = useFetchSearchList();
|
||||
|
||||
const {
|
||||
openCreateModal,
|
||||
showSearchRenameModal,
|
||||
@ -32,9 +36,9 @@ export default function SearchList() {
|
||||
initialSearchName,
|
||||
} = useRenameSearch();
|
||||
|
||||
const handleSearchChange = (value: string) => {
|
||||
console.log(value);
|
||||
};
|
||||
// const handleSearchChange = (value: string) => {
|
||||
// console.log(value);
|
||||
// };
|
||||
const onSearchRenameConfirm = (name: string) => {
|
||||
onSearchRenameOk(name, () => {
|
||||
refetchList();
|
||||
@ -44,10 +48,12 @@ export default function SearchList() {
|
||||
// setIsEdit(false);
|
||||
showSearchRenameModal();
|
||||
}, [showSearchRenameModal]);
|
||||
const handlePageChange = (page: number, pageSize: number) => {
|
||||
// setIsEdit(false);
|
||||
setSearchListParams({ ...searchParams, page, page_size: pageSize });
|
||||
};
|
||||
const handlePageChange = useCallback(
|
||||
(page: number, pageSize?: number) => {
|
||||
setPagination({ page, pageSize });
|
||||
},
|
||||
[setPagination],
|
||||
);
|
||||
|
||||
const [searchUrl, setSearchUrl] = useSearchParams();
|
||||
const isCreate = searchUrl.get('isCreate') === 'true';
|
||||
@ -62,25 +68,28 @@ export default function SearchList() {
|
||||
return (
|
||||
<section className="w-full h-full flex flex-col">
|
||||
{(!list?.data?.search_apps?.length ||
|
||||
list?.data?.search_apps?.length <= 0) && (
|
||||
<div className="flex w-full items-center justify-center h-[calc(100vh-164px)]">
|
||||
<EmptyAppCard
|
||||
showIcon
|
||||
size="large"
|
||||
className="w-[480px] p-14"
|
||||
type={EmptyCardType.Search}
|
||||
onClick={() => openCreateModalFun()}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{!!list?.data?.search_apps?.length && (
|
||||
list?.data?.search_apps?.length <= 0) &&
|
||||
!searchString && (
|
||||
<div className="flex w-full items-center justify-center h-[calc(100vh-164px)]">
|
||||
<EmptyAppCard
|
||||
showIcon
|
||||
size="large"
|
||||
className="w-[480px] p-14"
|
||||
type={EmptyCardType.Search}
|
||||
isSearch={!!searchString}
|
||||
onClick={() => openCreateModalFun()}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{(!!list?.data?.search_apps?.length || searchString) && (
|
||||
<>
|
||||
<div className="px-8 pt-8">
|
||||
<ListFilterBar
|
||||
icon="searches"
|
||||
title={t('searchApps')}
|
||||
showFilter={false}
|
||||
onSearchChange={(e) => handleSearchChange(e.target.value)}
|
||||
searchString={searchString}
|
||||
onSearchChange={handleInputChange}
|
||||
>
|
||||
<Button
|
||||
variant={'default'}
|
||||
@ -93,6 +102,20 @@ export default function SearchList() {
|
||||
</Button>
|
||||
</ListFilterBar>
|
||||
</div>
|
||||
{(!list?.data?.search_apps?.length ||
|
||||
list?.data?.search_apps?.length <= 0) &&
|
||||
searchString && (
|
||||
<div className="flex w-full items-center justify-center h-[calc(100vh-164px)]">
|
||||
<EmptyAppCard
|
||||
showIcon
|
||||
size="large"
|
||||
className="w-[480px] p-14"
|
||||
type={EmptyCardType.Search}
|
||||
isSearch={!!searchString}
|
||||
onClick={() => openCreateModalFun()}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex-1">
|
||||
<CardContainer className="max-h-[calc(100dvh-280px)] overflow-auto px-8">
|
||||
{list?.data.search_apps.map((x) => {
|
||||
@ -111,8 +134,8 @@ export default function SearchList() {
|
||||
{list?.data.total && list?.data.total > 0 && (
|
||||
<div className="px-8 mb-4">
|
||||
<RAGFlowPagination
|
||||
current={searchParams.page}
|
||||
pageSize={searchParams.page_size}
|
||||
{...pick(pagination, 'current', 'pageSize')}
|
||||
// total={pagination.total}
|
||||
total={list?.data.total}
|
||||
onChange={handlePageChange}
|
||||
/>
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
import { useEffect, useMemo } from 'react';
|
||||
import { useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import { ControllerRenderProps, useFormContext } from 'react-hook-form';
|
||||
|
||||
import { Checkbox } from '@/components/ui/checkbox';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { debounce } from 'lodash';
|
||||
|
||||
/* ---------------- Token Field ---------------- */
|
||||
|
||||
@ -48,15 +49,15 @@ type ConfluenceIndexingMode = 'everything' | 'space' | 'page';
|
||||
export type ConfluenceIndexingModeFieldProps = ControllerRenderProps;
|
||||
|
||||
export const ConfluenceIndexingModeField = (
|
||||
fieldProps: ConfluenceIndexingModeFieldProps,
|
||||
fieldProps: ControllerRenderProps,
|
||||
) => {
|
||||
const { value, onChange, disabled } = fieldProps;
|
||||
const [mode, setMode] = useState<ConfluenceIndexingMode>(
|
||||
value || 'everything',
|
||||
);
|
||||
const { watch, setValue } = useFormContext();
|
||||
|
||||
const mode = useMemo<ConfluenceIndexingMode>(
|
||||
() => (value as ConfluenceIndexingMode) || 'everything',
|
||||
[value],
|
||||
);
|
||||
useEffect(() => setMode(value), [value]);
|
||||
|
||||
const spaceValue = watch('config.space');
|
||||
const pageIdValue = watch('config.page_id');
|
||||
@ -66,27 +67,40 @@ export const ConfluenceIndexingModeField = (
|
||||
if (!value) onChange('everything');
|
||||
}, [value, onChange]);
|
||||
|
||||
const handleModeChange = (nextMode?: string) => {
|
||||
const normalized = (nextMode || 'everything') as ConfluenceIndexingMode;
|
||||
onChange(normalized);
|
||||
const handleModeChange = useCallback(
|
||||
(nextMode?: string) => {
|
||||
let normalized: ConfluenceIndexingMode = 'everything';
|
||||
if (nextMode) {
|
||||
normalized = nextMode as ConfluenceIndexingMode;
|
||||
setMode(normalized);
|
||||
onChange(normalized);
|
||||
} else {
|
||||
setMode(mode);
|
||||
normalized = mode;
|
||||
onChange(mode);
|
||||
// onChange(mode);
|
||||
}
|
||||
if (normalized === 'everything') {
|
||||
setValue('config.space', '');
|
||||
setValue('config.page_id', '');
|
||||
setValue('config.index_recursively', false);
|
||||
} else if (normalized === 'space') {
|
||||
setValue('config.page_id', '');
|
||||
setValue('config.index_recursively', false);
|
||||
} else if (normalized === 'page') {
|
||||
setValue('config.space', '');
|
||||
}
|
||||
},
|
||||
[mode, onChange, setValue],
|
||||
);
|
||||
|
||||
if (normalized === 'everything') {
|
||||
setValue('config.space', '', { shouldDirty: true, shouldTouch: true });
|
||||
setValue('config.page_id', '', { shouldDirty: true, shouldTouch: true });
|
||||
setValue('config.index_recursively', false, {
|
||||
shouldDirty: true,
|
||||
shouldTouch: true,
|
||||
});
|
||||
} else if (normalized === 'space') {
|
||||
setValue('config.page_id', '', { shouldDirty: true, shouldTouch: true });
|
||||
setValue('config.index_recursively', false, {
|
||||
shouldDirty: true,
|
||||
shouldTouch: true,
|
||||
});
|
||||
} else if (normalized === 'page') {
|
||||
setValue('config.space', '', { shouldDirty: true, shouldTouch: true });
|
||||
}
|
||||
};
|
||||
const debouncedHandleChange = useMemo(
|
||||
() =>
|
||||
debounce(() => {
|
||||
handleModeChange();
|
||||
}, 300),
|
||||
[handleModeChange],
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="w-full rounded-lg border border-border-button bg-bg-card p-4 space-y-4">
|
||||
@ -127,12 +141,11 @@ export const ConfluenceIndexingModeField = (
|
||||
<Input
|
||||
className="w-full"
|
||||
value={spaceValue ?? ''}
|
||||
onChange={(e) =>
|
||||
setValue('config.space', e.target.value, {
|
||||
shouldDirty: true,
|
||||
shouldTouch: true,
|
||||
})
|
||||
}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value;
|
||||
setValue('config.space', value);
|
||||
debouncedHandleChange();
|
||||
}}
|
||||
placeholder="e.g. KB"
|
||||
disabled={disabled}
|
||||
/>
|
||||
@ -148,12 +161,10 @@ export const ConfluenceIndexingModeField = (
|
||||
<Input
|
||||
className="w-full"
|
||||
value={pageIdValue ?? ''}
|
||||
onChange={(e) =>
|
||||
setValue('config.page_id', e.target.value, {
|
||||
shouldDirty: true,
|
||||
shouldTouch: true,
|
||||
})
|
||||
}
|
||||
onChange={(e) => {
|
||||
setValue('config.page_id', e.target.value);
|
||||
debouncedHandleChange();
|
||||
}}
|
||||
placeholder="e.g. 123456"
|
||||
disabled={disabled}
|
||||
/>
|
||||
@ -164,12 +175,10 @@ export const ConfluenceIndexingModeField = (
|
||||
<div className="flex items-center gap-2 pt-2">
|
||||
<Checkbox
|
||||
checked={Boolean(indexRecursively)}
|
||||
onCheckedChange={(checked) =>
|
||||
setValue('config.index_recursively', Boolean(checked), {
|
||||
shouldDirty: true,
|
||||
shouldTouch: true,
|
||||
})
|
||||
}
|
||||
onCheckedChange={(checked) => {
|
||||
setValue('config.index_recursively', Boolean(checked));
|
||||
debouncedHandleChange();
|
||||
}}
|
||||
disabled={disabled}
|
||||
/>
|
||||
<span className="text-sm text-text-secondary">
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import { FormFieldType } from '@/components/dynamic-form';
|
||||
import SvgIcon from '@/components/svg-icon';
|
||||
import { t } from 'i18next';
|
||||
import { ControllerRenderProps } from 'react-hook-form';
|
||||
import { ConfluenceIndexingModeField } from './component/confluence-token-field';
|
||||
import GmailTokenField from './component/gmail-token-field';
|
||||
import GoogleDriveTokenField from './component/google-drive-token-field';
|
||||
@ -237,7 +238,9 @@ export const DataSourceFormFields = {
|
||||
required: false,
|
||||
horizontal: true,
|
||||
labelClassName: 'self-start pt-4',
|
||||
render: (fieldProps) => <ConfluenceIndexingModeField {...fieldProps} />,
|
||||
render: (fieldProps: ControllerRenderProps) => (
|
||||
<ConfluenceIndexingModeField {...fieldProps} />
|
||||
),
|
||||
},
|
||||
{
|
||||
label: 'Space Key',
|
||||
@ -598,6 +601,7 @@ export const DataSourceFormDefaultValues = {
|
||||
confluence_username: '',
|
||||
confluence_access_token: '',
|
||||
},
|
||||
index_mode: 'everything',
|
||||
},
|
||||
},
|
||||
[DataSourceKey.GOOGLE_DRIVE]: {
|
||||
|
||||
@ -136,7 +136,7 @@ const SourceDetailPage = () => {
|
||||
...customFields,
|
||||
] as FormFieldConfig[];
|
||||
|
||||
const neweFields = fields.map((field) => {
|
||||
const newFields = fields.map((field) => {
|
||||
return {
|
||||
...field,
|
||||
horizontal: true,
|
||||
@ -145,7 +145,7 @@ const SourceDetailPage = () => {
|
||||
},
|
||||
};
|
||||
});
|
||||
setFields(neweFields);
|
||||
setFields(newFields);
|
||||
|
||||
const defultValueTemp = {
|
||||
...(DataSourceFormDefaultValues[
|
||||
|
||||
@ -0,0 +1,34 @@
|
||||
import { LlmIcon } from '@/components/svg-icon';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { APIMapUrl } from '@/constants/llm';
|
||||
import { t } from 'i18next';
|
||||
import { ArrowUpRight, Plus } from 'lucide-react';
|
||||
|
||||
export const LLMHeader = ({ name }: { name: string }) => {
|
||||
return (
|
||||
<div className="flex items-center space-x-3 mb-3">
|
||||
<LlmIcon name={name} imgClass="h-8 w-8 text-text-primary" />
|
||||
<div className="flex flex-1 gap-1 items-center">
|
||||
<div className="font-normal text-base truncate">{name}</div>
|
||||
{!!APIMapUrl[name as keyof typeof APIMapUrl] && (
|
||||
<Button
|
||||
variant={'ghost'}
|
||||
className=" bg-transparent w-4 h-5"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
window.open(APIMapUrl[name as keyof typeof APIMapUrl]);
|
||||
}}
|
||||
// target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<ArrowUpRight size={16} />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
<Button className=" px-2 items-center gap-0 text-xs h-6 rounded-md transition-colors hidden group-hover:flex">
|
||||
<Plus size={12} />
|
||||
{t('addTheModel')}
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -2,9 +2,10 @@
|
||||
import { LlmIcon } from '@/components/svg-icon';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { SearchInput } from '@/components/ui/input';
|
||||
import { APIMapUrl } from '@/constants/llm';
|
||||
import { useTranslate } from '@/hooks/common-hooks';
|
||||
import { useSelectLlmList } from '@/hooks/use-llm-request';
|
||||
import { Plus } from 'lucide-react';
|
||||
import { ArrowUpRight, Plus } from 'lucide-react';
|
||||
import { FC, useMemo, useState } from 'react';
|
||||
|
||||
type TagType =
|
||||
@ -128,10 +129,26 @@ export const AvailableModels: FC<{
|
||||
>
|
||||
<div className="flex items-center space-x-3 mb-3">
|
||||
<LlmIcon name={model.name} imgClass="h-8 w-8 text-text-primary" />
|
||||
<div className="flex-1">
|
||||
<div className="flex flex-1 gap-1 items-center">
|
||||
<div className="font-normal text-base truncate">
|
||||
{model.name}
|
||||
</div>
|
||||
{!!APIMapUrl[model.name as keyof typeof APIMapUrl] && (
|
||||
<Button
|
||||
variant={'ghost'}
|
||||
className=" bg-transparent w-4 h-5"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
window.open(
|
||||
APIMapUrl[model.name as keyof typeof APIMapUrl],
|
||||
);
|
||||
}}
|
||||
// target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<ArrowUpRight size={16} />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
<Button className=" px-2 items-center gap-0 text-xs h-6 rounded-md transition-colors hidden group-hover:flex">
|
||||
<Plus size={12} />
|
||||
|
||||
@ -14,6 +14,7 @@ import { useTranslate } from '@/hooks/common-hooks';
|
||||
import { KeyboardEventHandler, useCallback, useEffect } from 'react';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { ApiKeyPostBody } from '../../../interface';
|
||||
import { LLMHeader } from '../../components/llm-header';
|
||||
|
||||
interface IProps extends Omit<IModalManagerChildrenProps, 'showModal'> {
|
||||
loading: boolean;
|
||||
@ -70,7 +71,7 @@ const ApiKeyModal = ({
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title={t('configureModelTitle')}
|
||||
title={<LLMHeader name={llmFactory} />}
|
||||
open={visible}
|
||||
onOpenChange={(open) => !open && hideModal()}
|
||||
onOk={handleOk}
|
||||
|
||||
@ -3,6 +3,7 @@ import { IModalProps } from '@/interfaces/common';
|
||||
import { IAddLlmRequestBody } from '@/interfaces/request/llm';
|
||||
import { Form, Input, InputNumber, Modal, Select, Switch } from 'antd';
|
||||
import omit from 'lodash/omit';
|
||||
import { LLMHeader } from '../../components/llm-header';
|
||||
|
||||
type FieldType = IAddLlmRequestBody & {
|
||||
api_version: string;
|
||||
@ -57,7 +58,7 @@ const AzureOpenAIModal = ({
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title={t('addLlmTitle', { name: llmFactory })}
|
||||
title={<LLMHeader name={llmFactory} />}
|
||||
open={visible}
|
||||
onOk={handleOk}
|
||||
onCancel={hideModal}
|
||||
|
||||
@ -3,6 +3,7 @@ import { IModalProps } from '@/interfaces/common';
|
||||
import { IAddLlmRequestBody } from '@/interfaces/request/llm';
|
||||
import { Flex, Form, Input, InputNumber, Modal, Select, Space } from 'antd';
|
||||
import { useMemo } from 'react';
|
||||
import { LLMHeader } from '../../components/llm-header';
|
||||
import { BedrockRegionList } from '../../constant';
|
||||
|
||||
type FieldType = IAddLlmRequestBody & {
|
||||
@ -42,7 +43,7 @@ const BedrockModal = ({
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title={t('addLlmTitle', { name: llmFactory })}
|
||||
title={<LLMHeader name={llmFactory} />}
|
||||
open={visible}
|
||||
onOk={handleOk}
|
||||
onCancel={hideModal}
|
||||
|
||||
@ -3,6 +3,7 @@ import { IModalProps } from '@/interfaces/common';
|
||||
import { IAddLlmRequestBody } from '@/interfaces/request/llm';
|
||||
import { Flex, Form, Input, InputNumber, Modal, Select, Space } from 'antd';
|
||||
import omit from 'lodash/omit';
|
||||
import { LLMHeader } from '../../components/llm-header';
|
||||
|
||||
type FieldType = IAddLlmRequestBody & {
|
||||
fish_audio_ak: string;
|
||||
@ -39,7 +40,7 @@ const FishAudioModal = ({
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title={t('addLlmTitle', { name: llmFactory })}
|
||||
title={<LLMHeader name={llmFactory} />}
|
||||
open={visible}
|
||||
onOk={handleOk}
|
||||
onCancel={hideModal}
|
||||
|
||||
@ -2,6 +2,7 @@ import { useTranslate } from '@/hooks/common-hooks';
|
||||
import { IModalProps } from '@/interfaces/common';
|
||||
import { IAddLlmRequestBody } from '@/interfaces/request/llm';
|
||||
import { Form, Input, InputNumber, Modal, Select } from 'antd';
|
||||
import { LLMHeader } from '../../components/llm-header';
|
||||
|
||||
type FieldType = IAddLlmRequestBody & {
|
||||
google_project_id: string;
|
||||
@ -41,7 +42,7 @@ const GoogleModal = ({
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title={t('addLlmTitle', { name: llmFactory })}
|
||||
title={<LLMHeader name={llmFactory} />}
|
||||
open={visible}
|
||||
onOk={handleOk}
|
||||
onCancel={hideModal}
|
||||
|
||||
@ -3,6 +3,7 @@ import { IModalProps } from '@/interfaces/common';
|
||||
import { IAddLlmRequestBody } from '@/interfaces/request/llm';
|
||||
import { Form, Input, Modal } from 'antd';
|
||||
import omit from 'lodash/omit';
|
||||
import { LLMHeader } from '../../components/llm-header';
|
||||
|
||||
type FieldType = IAddLlmRequestBody & {
|
||||
vision: boolean;
|
||||
@ -46,7 +47,7 @@ const HunyuanModal = ({
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title={t('addLlmTitle', { name: llmFactory })}
|
||||
title={<LLMHeader name={llmFactory} />}
|
||||
open={visible}
|
||||
onOk={handleOk}
|
||||
onCancel={hideModal}
|
||||
|
||||
@ -3,6 +3,7 @@ import { IModalProps } from '@/interfaces/common';
|
||||
import { IAddLlmRequestBody } from '@/interfaces/request/llm';
|
||||
import { Flex, Form, Input, Modal, Select, Space } from 'antd';
|
||||
import omit from 'lodash/omit';
|
||||
import { LLMHeader } from '../../components/llm-header';
|
||||
|
||||
type FieldType = IAddLlmRequestBody & {
|
||||
TencentCloud_sid: string;
|
||||
@ -45,7 +46,7 @@ const TencentCloudModal = ({
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title={t('addLlmTitle', { name: llmFactory })}
|
||||
title={<LLMHeader name={llmFactory} />}
|
||||
open={visible}
|
||||
onOk={handleOk}
|
||||
onCancel={hideModal}
|
||||
|
||||
@ -14,6 +14,7 @@ import {
|
||||
} from 'antd';
|
||||
import omit from 'lodash/omit';
|
||||
import { useEffect } from 'react';
|
||||
import { LLMHeader } from '../../components/llm-header';
|
||||
|
||||
type FieldType = IAddLlmRequestBody & {
|
||||
vision: boolean;
|
||||
@ -147,11 +148,7 @@ const OllamaModal = ({
|
||||
};
|
||||
return (
|
||||
<Modal
|
||||
title={
|
||||
editMode
|
||||
? t('editLlmTitle', { name: llmFactory })
|
||||
: t('addLlmTitle', { name: llmFactory })
|
||||
}
|
||||
title={<LLMHeader name={llmFactory} />}
|
||||
open={visible}
|
||||
onOk={handleOk}
|
||||
onCancel={hideModal}
|
||||
|
||||
@ -3,6 +3,7 @@ import { IModalProps } from '@/interfaces/common';
|
||||
import { IAddLlmRequestBody } from '@/interfaces/request/llm';
|
||||
import { Form, Input, InputNumber, Modal, Select } from 'antd';
|
||||
import omit from 'lodash/omit';
|
||||
import { LLMHeader } from '../../components/llm-header';
|
||||
|
||||
type FieldType = IAddLlmRequestBody & {
|
||||
vision: boolean;
|
||||
@ -51,7 +52,7 @@ const SparkModal = ({
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title={t('addLlmTitle', { name: llmFactory })}
|
||||
title={<LLMHeader name={llmFactory} />}
|
||||
open={visible}
|
||||
onOk={handleOk}
|
||||
onCancel={hideModal}
|
||||
|
||||
@ -3,6 +3,7 @@ import { IModalProps } from '@/interfaces/common';
|
||||
import { IAddLlmRequestBody } from '@/interfaces/request/llm';
|
||||
import { Flex, Form, Input, InputNumber, Modal, Select, Space } from 'antd';
|
||||
import omit from 'lodash/omit';
|
||||
import { LLMHeader } from '../../components/llm-header';
|
||||
|
||||
type FieldType = IAddLlmRequestBody & {
|
||||
vision: boolean;
|
||||
@ -45,7 +46,7 @@ const VolcEngineModal = ({
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title={t('addLlmTitle', { name: llmFactory })}
|
||||
title={<LLMHeader name={llmFactory} />}
|
||||
open={visible}
|
||||
onOk={handleOk}
|
||||
onCancel={hideModal}
|
||||
|
||||
@ -3,6 +3,7 @@ import { IModalProps } from '@/interfaces/common';
|
||||
import { IAddLlmRequestBody } from '@/interfaces/request/llm';
|
||||
import { Form, Input, InputNumber, Modal, Select } from 'antd';
|
||||
import omit from 'lodash/omit';
|
||||
import { LLMHeader } from '../../components/llm-header';
|
||||
|
||||
type FieldType = IAddLlmRequestBody & {
|
||||
vision: boolean;
|
||||
@ -49,7 +50,7 @@ const YiyanModal = ({
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title={t('addLlmTitle', { name: llmFactory })}
|
||||
title={<LLMHeader name={llmFactory} />}
|
||||
open={visible}
|
||||
onOk={handleOk}
|
||||
onCancel={hideModal}
|
||||
|
||||
Reference in New Issue
Block a user