RYDE-WORK/Langchain-Chatchat
1
0
Fork 0
mirror of https://github.com/RYDE-WORK/Langchain-Chatchat.git synced 2026-02-02 12:34:42 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

代码&交互整理

Browse Source
This commit is contained in:
cca313 2024-04-12 21:52:50 +08:00
parent 14dc3f1394
commit 6bd3d20996
15 changed files with 147 additions and 199 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
frontend/src/app/knowledge/(desktop)/features/KnowledgeCard.tsx
View File

@ -1,5 +1,6 @@
import { EditOutlined, EllipsisOutlined, SettingOutlined } from '@ant-design/icons';
import { DeleteOutlined, EditOutlined } from '@ant-design/icons';
import { Card, Skeleton } from 'antd';
import { useRouter } from 'next/navigation';
import React, { useState } from 'react';
const { Meta } = Card;
@ -8,32 +9,27 @@ interface KnowLedgeCardProps {
intro: string;
name: string;
}
const App: React.FC = (props: KnowLedgeCardProps) => {
const KnowledgeCard: React.FC = (props: KnowLedgeCardProps) => {
const [loading, setLoading] = useState(false);
const { name, intro } = props;
const onChange = (checked: boolean) => {
setLoading(!checked);
const router = useRouter();
const handleCardEditClick = () => {
router.push('/knowledge/1/base');
};
return (
<Card
actions={[
<SettingOutlined key="setting" />,
<EditOutlined key="edit" />,
<EllipsisOutlined key="ellipsis" />,
<EditOutlined key="edit" onClick={handleCardEditClick} />,
<DeleteOutlined key="ellipsis" />,
]}
bordered={false}
style={{ marginTop: 16, width: 300 }}
>
<Skeleton active avatar loading={loading}>
<Meta
// avatar={<Avatar src="https://api.dicebear.com/7.x/miniavs/svg?seed=2" />}
description={intro}
title={name}
/>
<Meta description={intro} title={name} />
</Skeleton>
</Card>
);
};
export default App;
export default KnowledgeCard;

15
frontend/src/app/knowledge/(desktop)/features/KnowledgeList.tsx
View File

@ -3,14 +3,13 @@ import React, { memo } from 'react';
import KnowledgeCard from './KnowledgeCard';
const list = [
{ intro: 'aaaaa', name: '321' },
{ intro: 'aaaaa', name: '321' },
{ intro: 'aaaaa', name: '321' },
{ intro: 'aaaaa', name: '321' },
{ intro: 'aaaaa', name: '321' },
{ intro: 'aaaaa', name: '321' },
{ intro: 'aaaaa', name: '321' },
{ intro: 'aaaaa', name: '321' },
{ intro: '知识库简介', name: '知识库名称' },
{ intro: '知识库简介', name: '知识库名称' },
{ intro: '知识库简介', name: '知识库名称' },
{ intro: '知识库简介', name: '知识库名称' },
{ intro: '知识库简介', name: '知识库名称' },
{ intro: '知识库简介', name: '知识库名称' },
{ intro: '知识库简介', name: '知识库名称' },
];
const RenderList = memo(() =>

29
frontend/src/app/knowledge/(desktop)/features/CreateKnowledgeBase.tsx → frontend/src/app/knowledge/(desktop)/features/ModalCreateKnowledge.tsx
View File

@ -4,25 +4,6 @@ import { memo } from 'react';
import { useTranslation } from 'react-i18next';
import { Flexbox } from 'react-layout-kit';
// export const imageTypeOptions: SegmentedProps['options'] = [
// {
// label: 'JPG',
// value: ImageType.JPG,
// },
// {
// label: 'PNG',
// value: ImageType.PNG,
// },
// {
// label: 'SVG',
// value: ImageType.SVG,
// },
// {
// label: 'WEBP',
// value: ImageType.WEBP,
// },
// ];
const DEFAULT_FIELD_VALUE = {
// imageType: ImageType.JPG,
withBackground: true,
@ -30,8 +11,10 @@ const DEFAULT_FIELD_VALUE = {
withPluginInfo: false,
withSystemRole: false,
};
const CreateKnowledgeBase = memo<ModalProps>(({ onClose, open }) => {
interface ModalCreateKnowledgeProps extends ModalProps {
toggleModal: (open: boolean) => void;
}
const CreateKnowledgeBase = memo<ModalCreateKnowledgeProps>(({ toggleModal, open }) => {
const { t } = useTranslation('chat');
return (
@ -39,8 +22,8 @@ const CreateKnowledgeBase = memo<ModalProps>(({ onClose, open }) => {
allowFullscreen
centered={false}
maxHeight={false}
onCancel={onClose}
onOk={onClose}
onCancel={() => toggleModal(false)}
onOk={() => toggleModal(false)}
open={open}
title="创建知识库"
>

17
frontend/src/app/knowledge/(desktop)/index.tsx
View File

@ -3,36 +3,29 @@
import { FloatButton } from 'antd';
import { Plus } from 'lucide-react';
import dynamic from 'next/dynamic';
import { memo, useEffect, useState } from 'react';
import { memo, useState } from 'react';
import { Flexbox } from 'react-layout-kit';
import ResponsiveIndex from '@/components/ResponsiveIndex';
import KnowledgeCardList from './features/KnowledgeList';
// import CreateKnowledgeBase from './features/createKnowledgeBase';
import Layout from './layout.desktop';
const CreateKnowledgeBase = dynamic(() => import('./features/CreateKnowledgeBase'));
// const Mobile: FC = dynamic(() => import('../(mobile)'), { ssr: false }) as FC;
const ModalCreateKnowledge = dynamic(() => import('./features/ModalCreateKnowledge'));
const DesktopPage = memo(() => {
const [showModal, setShowModal] = useState(false);
useEffect(() => {
setShowModal(true);
}, []);
const onClose = () => setShowModal(false);
return (
<ResponsiveIndex Mobile={() => <div>321</div>}>
<>
<Layout>
<Flexbox gap={20} horizontal justify="flex-start" wrap="wrap">
<KnowledgeCardList />
<CreateKnowledgeBase onClose={onClose} open={showModal} />
</Flexbox>
<FloatButton icon={<Plus />} onClick={() => setShowModal(true)}>
新建知识库
</FloatButton>
</Layout>
</ResponsiveIndex>
<ModalCreateKnowledge open={showModal} toggleModal={setShowModal} />
</>
);
});
export default DesktopPage;

9
frontend/src/app/knowledge/[id]/base/[fileId]/features/ModalSegment.tsx
View File

@ -2,9 +2,14 @@ import { Input, Modal } from 'antd';
import { memo } from 'react';
import { Center, Flexbox } from 'react-layout-kit';
const ModalSegment = memo(() => {
type ModalSegmentProps = {
open: boolean;
toggleOpen: (open: boolean) => void;
};
const ModalSegment = memo<ModalSegmentProps>(({ open, toggleOpen }) => {
return (
<Modal okText="确认修改" open title="知识片段">
<Modal okText="确认修改" onCancel={() => toggleOpen(false)} open={open} title="知识片段">
<Flexbox padding={20}>
<Center>
<Input.TextArea autoSize={{ maxRows: 15, minRows: 10 }} style={{ width: 600 }} />

13
frontend/src/app/knowledge/[id]/base/[fileId]/page.tsx
View File

@ -2,9 +2,10 @@
import { Card, List } from 'antd';
import { createStyles } from 'antd-style';
import dynamic from 'next/dynamic';
import React, { memo, useState } from 'react';
import ModalSegment from './features/ModalSegment';
const ModalSegment = dynamic(() => import('./features/ModalSegment'));
const data = [
{
@ -42,7 +43,11 @@ const useStyle = createStyles(({ css, token }) => ({
const App = memo(() => {
const { styles } = useStyle();
const [isShowModal, setModal] = useState();
const [isModalOpen, toggleOpen] = useState(false);
console.log(toggleOpen);
const handleSegmentCardClick = () => {
toggleOpen(true);
};
return (
<>
<List
@ -55,14 +60,14 @@ const App = memo(() => {
}}
renderItem={() => (
<List.Item>
<Card className={styles.card} onClick={() => console.log(1)}>
<Card className={styles.card} onClick={handleSegmentCardClick}>
Card content
</Card>
</List.Item>
)}
size="large"
/>
<ModalSegment />
<ModalSegment open={isModalOpen} toggleOpen={toggleOpen} />
</>
);
});

9
frontend/src/app/knowledge/[id]/base/features/ModalAddFile.tsx
View File

@ -5,6 +5,11 @@ import React, { memo } from 'react';
const { Dragger } = Upload;
type ModalAddFileProps = {
open: boolean;
setModalOpen: (open: boolean) => void;
};
const props: UploadProps = {
action: 'https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload',
multiple: true,
@ -25,9 +30,9 @@ const props: UploadProps = {
},
};
const ModalAddFile = memo(() => {
const ModalAddFile = memo<ModalAddFileProps>(({ open, setModalOpen }) => {
return (
<Modal open title="添加文件">
<Modal onCancel={() => setModalOpen(false)} open={open} title="添加文件">
<Dragger {...props}>
<p className="ant-upload-drag-icon">
<InboxOutlined />

101
frontend/src/app/knowledge/[id]/base/page.tsx
View File

@ -2,11 +2,13 @@
import { Button, Table } from 'antd';
import type { TableColumnsType } from 'antd';
import dynamic from 'next/dynamic';
import Link from 'next/link';
import React, { useState } from 'react';
import { Flexbox } from 'react-layout-kit';
import ModalAddFile from './features/ModalAddFile';
// import ModalAddFile from './features/ModalAddFile';
const ModalAddFile = dynamic(() => import('./features/ModalAddFile'));
interface DataType {
address: string;
age: number;
@ -14,94 +16,82 @@ interface DataType {
name: string;
}
const columns: TableColumnsType<DataType> = [
{
dataIndex: 'index',
title: '序号',
},
{
dataIndex: 'name',
title: '文档名称',
},
{
dataIndex: 'loader',
title: '文档加载器',
},
{
dataIndex: 'loader',
title: '文档加载器',
},
{
dataIndex: 'splitter',
title: '分词器',
},
{
dataIndex: 'source',
title: '源文件',
},
{
dataIndex: 'vector',
title: '向量库',
},
];
const data: DataType[] = [];
for (let i = 0; i < 46; i++) {
data.push({
address: `London, Park Lane no. ${i}`,
age: 32,
index: i,
key: i,
name: `Edward King ${i}`,
});
}
const App: React.FC = () => {
const App: React.FC<{ params }> = ({ params }) => {
const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
const [loading, setLoading] = useState(false);
const start = () => {
setLoading(true);
// ajax request after empty completing
setTimeout(() => {
setSelectedRowKeys([]);
setLoading(false);
}, 1000);
};
const [isShowModal, setModal] = useState(false);
const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
console.log('selectedRowKeys changed:', newSelectedRowKeys);
setSelectedRowKeys(newSelectedRowKeys);
};
const columns: TableColumnsType<DataType> = [
{
dataIndex: 'index',
title: '序号',
},
{
dataIndex: 'name',
render: (text) => <Link href={`/knowledge/${params.id}/base/2`}>{text}</Link>,
title: '文档名称',
},
{
dataIndex: 'loader',
title: '文档加载器',
},
{
dataIndex: 'loader',
title: '文档加载器',
},
{
dataIndex: 'splitter',
title: '分词器',
},
{
dataIndex: 'source',
title: '源文件',
},
{
dataIndex: 'vector',
title: '向量库',
},
];
const rowSelection = {
onChange: onSelectChange,
selectedRowKeys,
};
const hasSelected = selectedRowKeys.length > 0;
console.log(params);
return (
<>
<Flexbox width={'100%'}>
<Flexbox direction="horizontal" justify="space-between" style={{ marginBottom: 16 }}>
<Flexbox direction="horizontal" gap={20}>
<Button disabled={!hasSelected} loading={loading} onClick={start} type="default">
<Button disabled={!hasSelected} loading={loading} type="default">
下载选中文档
</Button>
<Button disabled={!hasSelected} loading={loading} onClick={start} type="default">
<Button disabled={!hasSelected} loading={loading} type="default">
重新添加至向量库
</Button>
<Button disabled={!hasSelected} loading={loading} onClick={start} type="default">
<Button disabled={!hasSelected} loading={loading} type="default">
向量库删除
</Button>
<Button disabled={!hasSelected} loading={loading} onClick={start} type="default">
<Button disabled={!hasSelected} loading={loading} type="default">
从知识库中删除
</Button>
<span style={{ marginLeft: 8 }}>
{hasSelected ? `Selected ${selectedRowKeys.length} items` : ''}
</span>
</Flexbox>
<div>
<Button loading={loading} onClick={start} type="primary">
<Button loading={loading} onClick={() => setModal(true)} type="primary">
添加文件
</Button>
</div>
@ -110,10 +100,11 @@ const App: React.FC = () => {
columns={columns}
dataSource={data}
rowSelection={rowSelection}
size="middle"
style={{ width: '100%' }}
/>
</Flexbox>
<ModalAddFile />
<ModalAddFile open={isShowModal} setModalOpen={setModal} />
</>
);
};

40
frontend/src/app/knowledge/[id]/config/page.tsx
View File

@ -1,53 +1,58 @@
'use client';
import { Form, type ItemGroup } from '@lobehub/ui';
import { Form as AntForm, Input, InputNumber, Slider, Switch } from 'antd';
import { Form as AntForm, Button, Input, InputNumber, Switch } from 'antd';
import { Settings } from 'lucide-react';
import { memo, useCallback } from 'react';
import { Flexbox } from 'react-layout-kit';
import { FORM_STYLE } from '@/const/layoutTokens';
const KnowledgeBaseConfig = memo(() => {
const [form] = AntForm.useForm();
const handleConfigChange = useCallback(() => {
console.log(321);
}, []);
const handleConfigChange = useCallback(async () => {
try {
const values = await form.validateFields();
console.log('Success:', values);
} catch (errorInfo) {
console.log('Failed:', errorInfo);
}
}, [form]);
const system: ItemGroup = {
children: [
{
children: <Input placeholder={'请为知识库命名'} />,
desc: '名称',
label: '知识库名称',
name: 'name',
rules: [{ message: '请输入知识库名称', required: true }],
},
{
children: <Input.TextArea placeholder={'请简单介绍你的知识库'} />,
desc: '简介',
label: '知识库简介',
name: 'intro',
rules: [{ message: '请输入知识库简介', required: true }],
},
{
children: <InputNumber placeholder={'请输入数字'} style={{ width: 200 }} />,
desc: '321',
label: '单段文本最大长度',
name: 'paragraphMaxLength',
rules: [{ message: '请输入知识库名称', required: true }],
},
{
children: <InputNumber placeholder={'请输入数字'} style={{ width: 200 }} />,
desc: '321',
label: '相邻文本重合长度',
name: 'paragraphOverlapLength',
rules: [{ message: '请输入知识库名称', required: true }],
},
{
children: <Slider style={{ width: 100 }} />,
desc: '321',
children: <InputNumber style={{ width: 200 }} />,
label: '文本匹配条数',
name: 'paragraphMatchCount',
rules: [{ message: '请输入知识库名称', required: true }],
},
{
children: <Switch style={{ width: 100 }} />,
desc: '321',
children: <Switch style={{ width: 50 }} />,
label: '开启中文标题加强',
name: 'chineseTitleEnhance',
},
@ -56,7 +61,16 @@ const KnowledgeBaseConfig = memo(() => {
title: '知识库设置',
};
return <Form form={form} items={[system]} onValuesChange={handleConfigChange} {...FORM_STYLE} />;
return (
<>
<Form form={form} items={[system]} onValuesChange={handleConfigChange} {...FORM_STYLE} />
<Flexbox padding={50}>
<Button size="large" style={{ width: 400 }}>
保存
</Button>
</Flexbox>
</>
);
});
export default KnowledgeBaseConfig;

31
frontend/src/app/knowledge/[id]/features/KnowledgeBaseConfig.tsx
View File

@ -1,31 +0,0 @@
import { Form, type ItemGroup } from '@lobehub/ui';
import { Form as AntForm, Input } from 'antd';
import { AppWindow } from 'lucide-react';
import { memo, useCallback } from 'react';
import { FORM_STYLE } from '@/const/layoutTokens';
// 参考settings/llm/Anthropic/index.tsx的代码生成一个名为KnowledgeBaseConfig.tsx的表单组件
const KnowledgeBaseConfig = memo(() => {
const [form] = AntForm.useForm();
const handleConfigChange = useCallback(() => {
console.log(321);
}, []);
const system: ItemGroup = {
children: [
{
children: <Input placeholder={'321'} />,
desc: '知识库名称321',
label: '知识库名称',
name: 'password',
},
],
icon: AppWindow,
title: '321',
};
return <Form form={form} items={[system]} onValuesChange={handleConfigChange} {...FORM_STYLE} />;
});
export default KnowledgeBaseConfig;

16
frontend/src/app/knowledge/[id]/layout.tsx
View File

@ -1,6 +1,5 @@
'use client';
import { createStyles } from 'antd-style';
import { PropsWithChildren, memo } from 'react';
import { Center, Flexbox } from 'react-layout-kit';
@ -9,16 +8,12 @@ import { SidebarTabKey } from '@/store/global/initialState';
import KnowledgeTabs from './tabs';
const useStyles = createStyles(({ stylish, token, css }) => ({
container: {
paddingLeft: 20,
paddingRight: 20,
position: 'relative',
},
}));
export default memo(({ children, params }: PropsWithChildren) => {
interface LayoutProps extends PropsWithChildren {
params: Record<string, string>;
}
export default memo<LayoutProps>(({ children, params }) => {
console.log(params);
return (
<AppLayoutDesktop sidebarKey={SidebarTabKey.Knowledge}>
<Flexbox direction="horizontal" flex={1} gap={40} height={'100%'}>
@ -32,6 +27,7 @@ export default memo(({ children, params }: PropsWithChildren) => {
<Center>图标占位</Center>
<Center>知识库名称</Center>
</Flexbox>
<KnowledgeTabs params={params} />
</Flexbox>
<Flexbox padding={40} width={'100%'}>

11
frontend/src/app/knowledge/[id]/page.tsx
View File

@ -1,11 +0,0 @@
'use client';
import dynamic from 'next/dynamic';
import { memo } from 'react';
const KnowledgeBaseConfig = dynamic(() => import('./features/KnowledgeBaseConfig'));
const KnowledgeDetail = memo(() => {
return <KnowledgeBaseConfig />;
});
export default KnowledgeDetail;

24
frontend/src/app/knowledge/[id]/tabs/index.tsx
View File

@ -1,27 +1,35 @@
import { Settings2, Webhook } from 'lucide-react';
import Link from 'next/link';
import { memo } from 'react';
import { KnowledgeTabs } from '@/store/global/initialState';
import { useRouter } from 'next/navigation';
import { memo, useState } from 'react';
import Item from './TabItem';
export enum KnowledgeTabs {
Base = 'base',
Config = 'config',
}
export interface KnowledgeTabsProps {
activeTab?: KnowledgeTabs;
params: Record<string, string>;
}
const KnowledgeTabsBox = memo<KnowledgeTabsProps>(({ activeTab, params }) => {
const KnowledgeTabsBox = memo<KnowledgeTabsProps>(({ params }) => {
console.log(params);
const [activeTab, setActiveTab] = useState<KnowledgeTabs>(KnowledgeTabs.Base);
const items = [
{ icon: Webhook, label: '知识库', value: KnowledgeTabs.Base },
{ icon: Settings2, label: '配置', value: KnowledgeTabs.Config },
];
const router = useRouter();
const handleTabClick = (value: KnowledgeTabs) => {
setActiveTab(value);
router.push(`/knowledge/${params.id}/${value}`);
};
return items.map(({ value, icon, label }) => (
<Link aria-label={label} href={`/knowledge/${params.id}/${value}`} key={value}>
<div aria-label={label} key={value} onClick={() => handleTabClick(value)}>
<Item active={activeTab === value} hoverable icon={icon} label={label} />
</Link>
</div>
));
});

2
frontend/src/store/global/initialState.ts
View File

@ -2,7 +2,7 @@ import { GlobalCommonState, initialCommonState } from './slices/common/initialSt
import { GlobalPreferenceState, initialPreferenceState } from './slices/preference/initialState';
import { GlobalSettingsState, initialSettingsState } from './slices/settings/initialState';
export { KnowledgeTabs, SettingsTabs, SidebarTabKey } from './slices/common/initialState';
export { SettingsTabs, SidebarTabKey } from './slices/common/initialState';
export type GlobalState = GlobalCommonState & GlobalSettingsState & GlobalPreferenceState;

5
frontend/src/store/global/slices/common/initialState.ts
View File

@ -15,11 +15,6 @@ export enum SettingsTabs {
TTS = 'tts',
}
export enum KnowledgeTabs {
Base = 'base',
Config = 'config',
}
export interface Guide {
// Topic 引导
topic?: boolean;