+
('');
+ const [convert, setConvert] = useState(false);
+ const [data, setData] = useState([]);
+ const [expand, setIsExpand] = useState(true);
+
+ const handleSelectChat = (conversation: ConversationProperties) => {
+ chat.conversation.remove();
+ chat.conversation.create({ ...conversation });
+ };
+
+ const handleRenameChat = (_conversation: ConversationProperties, _value: string) => {
+ setData((prev) => {
+ const idx = prev.findIndex((i) => i.id === _conversation.id);
+ if (idx === -1) return prev;
+ return produce(prev, (draft) => {
+ draft[idx].title = _value;
+ });
+ });
+ return Promise.resolve(true);
+ };
+
+ const handleDeleteChat = (conversation: ConversationProperties) => {
+ const list = cloneDeep(data).filter((i) => i.id !== conversation.id);
+ if (conversation.id === chat.conversation.get()?.id) {
+ chat.conversation.remove();
+ if (list.length) {
+ handleSelectChat(list[0]);
+ chat.conversation.create({ ...list[0] });
+ }
+ }
+ setData(list);
+ };
+ const handleCreateChat = () => {
+ chat.conversation.remove();
+ chat.conversation.create({ id: new Date().valueOf().toString() });
+ };
+
+ const addData = (str: string) => {
+ setData((prev) => {
+ const idx = prev.length + 1;
+ return [
+ ...prev,
+ {
+ id: chat.conversation.get()!.id,
+ title: str,
+ assistantId: idx.toString(),
+ createdAt: new Date().valueOf(),
+ updatedAt: new Date().valueOf(),
+ },
+ ];
+ });
+ handleSelectChat(chat.conversation.get()!);
+ };
+
+ const handleSubmit = (raw = value) => {
+ const val = raw?.trim();
+ if (chat.loading() || !val) return;
+ setValue('');
+ const promptId = new Date().valueOf().toString();
+ const messageId = (new Date().valueOf() + 1).toString();
+ chat.prompt.create({ id: promptId, title: val });
+ chat.message.create(promptId, { id: messageId, content: '' });
+ mockSSE({
+ message: val,
+ onopen() {
+ chat.start(promptId, messageId);
+ addData(val);
+ },
+ onmessage(str) {
+ chat.push(promptId, messageId, str);
+ },
+ onstop() {
+ chat.close(promptId, messageId);
+ },
+ });
+ };
+
+ useEffect(() => {
+ chat.conversation.create({ id: new Date().valueOf().toString() });
+ }, []);
+
+ return (
+
+
}
+ components={{
+ a: ({ children }) => (
+
+ ),
+ }}
+ >
+
+
+
+
+
+ handleSubmit('请告诉我一首诗')}>
+ 返回一首诗
+
+ handleSubmit('生成 CodeBlock')}>
+ 生成 CodeBlock
+
+
+
+
+ );
+}
diff --git a/src/chat/demos/global-state/index.tsx b/src/chat/demos/global-state/index.tsx
index bd2854f09..2d378a820 100644
--- a/src/chat/demos/global-state/index.tsx
+++ b/src/chat/demos/global-state/index.tsx
@@ -5,6 +5,7 @@ import { Conversation, Message, MessageStatus, Prompt } from 'dt-react-component
import { produce } from 'immer';
import { mockSSE } from '../mockSSE';
+import '../index.scss';
export default function () {
const [tabs, setTabs] = useState([{ label: 'Tab 1', children: 'Content of Tab 1', key: '1' }]);
@@ -127,7 +128,7 @@ function AI({ data, onSubmit }: { data?: Conversation; onSubmit?: (str?: string)
const [value, setValue] = useState
('');
return (
-
+
([]);
+ const [selectId, setSelectId] = React.useState('1');
+ const [expand, setIsExpand] = React.useState(true);
+
+ const handleSelectChat = (conversation: ConversationProperties) => {
+ setSelectId(conversation.id);
+ };
+
+ const handleRenameChat = (_conversation: ConversationProperties, _value: string) => {
+ return Promise.resolve(true);
+ };
+
+ const handleDeleteChat = (conversation: ConversationProperties) => {
+ console.log(conversation);
+ };
+ const handleNewChat = () => {
+ setData((prev) => {
+ const idx = prev.length + 1;
+ return [
+ ...prev,
+ {
+ id: idx.toString(),
+ title: `对话${idx}`,
+ assistantId: idx.toString(),
+ createdAt: new Date().valueOf(),
+ updatedAt: new Date().valueOf(),
+ },
+ ];
+ });
+ };
+
+ return (
+
+
+
+ {props.children}
+
+
+ );
+}
diff --git a/src/chat/demos/index.scss b/src/chat/demos/index.scss
new file mode 100644
index 000000000..255f7712b
--- /dev/null
+++ b/src/chat/demos/index.scss
@@ -0,0 +1,6 @@
+.dtc-aigc__demo {
+ width: 100%;
+ height: 400px;
+ display: flex;
+ flex-direction: column;
+}
diff --git a/src/chat/entity.ts b/src/chat/entity.ts
index 0c55c960c..9245911cb 100644
--- a/src/chat/entity.ts
+++ b/src/chat/entity.ts
@@ -29,6 +29,7 @@ export type ConversationProperties = {
id: string;
assistantId?: string;
createdAt?: Timestamp;
+ updatedAt?: Timestamp;
title?: string;
prompts?: Prompt[];
};
@@ -58,6 +59,7 @@ export abstract class Conversation {
// 后端 Id
assistantId?: string;
createdAt: Timestamp;
+ updatedAt: Timestamp;
title?: string;
prompts: Prompt[];
@@ -67,6 +69,7 @@ export abstract class Conversation {
this.id = props.id;
this.assistantId = props.assistantId;
this.createdAt = props.createdAt || new Date().valueOf();
+ this.updatedAt = props.updatedAt || new Date().valueOf();
this.title = props.title;
this.prompts = props.prompts || [];
}
diff --git a/src/chat/group/Item/index.scss b/src/chat/group/Item/index.scss
new file mode 100644
index 000000000..40b4918f0
--- /dev/null
+++ b/src/chat/group/Item/index.scss
@@ -0,0 +1,34 @@
+.dtc-aigc__dialog__list {
+ &__item {
+ line-height: 32px;
+ height: 32px;
+ padding: 0 16px;
+ border-radius: 4px;
+ margin-top: 4px;
+ color: #3D446E;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ cursor: pointer;
+ &:hover {
+ cursor: pointer;
+ background-color: #EBECF0;
+ .dtstack-icon {
+ display: block;
+ }
+ }
+ .dtstack-icon {
+ display: none;
+ }
+ &--selected {
+ background-color: #E8F1FF;
+ color: #1D78FF;
+ &:hover {
+ background-color: #E8F1FF;
+ }
+ }
+ &__input {
+ height: 24px;
+ }
+ }
+}
diff --git a/src/chat/group/Item/index.tsx b/src/chat/group/Item/index.tsx
new file mode 100644
index 000000000..602902491
--- /dev/null
+++ b/src/chat/group/Item/index.tsx
@@ -0,0 +1,104 @@
+import React, { useState } from 'react';
+import { MoreOutlined } from '@dtinsight/react-icons';
+import { Dropdown, Input, Menu, message } from 'antd';
+import classNames from 'classnames';
+
+import EllipsisText from '../../../ellipsisText';
+import useLocale from '../../../locale/useLocale';
+import { ConversationProperties } from '../../entity';
+import './index.scss';
+
+type IItemProps = {
+ conversation: ConversationProperties;
+ selectId?: string;
+ onRename?: (conversation: ConversationProperties, value: string) => Promise;
+ onDelete?: (conversation: ConversationProperties) => void;
+ onItemClick?: (conversation: ConversationProperties) => void;
+};
+
+export default function Item({
+ conversation,
+ selectId,
+ onRename,
+ onDelete,
+ onItemClick,
+}: IItemProps) {
+ const locale = useLocale('Chat');
+ const [edit, setEdit] = useState(false);
+ const handleRename = async (value: string) => {
+ if (!value) {
+ setEdit(false);
+ message.error(locale.renameError);
+ return;
+ }
+ const res = await onRename?.(conversation, value);
+ if (res) {
+ setEdit(false);
+ }
+ };
+
+ const handleDelete = () => {
+ onDelete?.(conversation);
+ };
+ const handleSelect = (conversation: ConversationProperties) => {
+ if (conversation.id === selectId || edit) {
+ return;
+ }
+ onItemClick?.(conversation);
+ };
+
+ return (
+ handleSelect(conversation)}
+ >
+ {edit ? (
+ {
+ handleRename(target.value);
+ }}
+ onPressEnter={({ target, keyCode }) => {
+ if (keyCode === 13) {
+ handleRename((target as HTMLInputElement).value);
+ }
+ }}
+ />
+ ) : (
+ <>
+
+ e.domEvent.stopPropagation()}>
+ setEdit(true)}>
+ {locale.rename}
+
+
+ {locale.delete}
+
+
+ }
+ overlayStyle={{ minWidth: '80px' }}
+ >
+ e.stopPropagation()} />
+
+
+ )}
+
+ );
+}
diff --git a/src/chat/group/List/index.tsx b/src/chat/group/List/index.tsx
new file mode 100644
index 000000000..30e473ee6
--- /dev/null
+++ b/src/chat/group/List/index.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import classNames from 'classnames';
+
+import { ConversationProperties } from '../../entity';
+import Item from '../Item';
+
+export interface IChatGroupListProps {
+ conversations?: ConversationProperties[];
+ className?: string;
+ selectId?: string;
+ renderItem?: (conversation: ConversationProperties) => React.ReactNode;
+ onItemClick?: (conversation: ConversationProperties) => void;
+ onRename?: (conversation: ConversationProperties, value: string) => Promise;
+ onDelete?: (conversation: ConversationProperties) => void;
+}
+export default function List(props: IChatGroupListProps) {
+ const { conversations, className, selectId, renderItem, onItemClick, onRename, onDelete } =
+ props;
+
+ return (
+
+ {conversations?.map((conversation) => {
+ if (renderItem) return renderItem(conversation);
+ return (
+
+ );
+}
diff --git a/src/chat/group/index.scss b/src/chat/group/index.scss
new file mode 100644
index 000000000..794b3ed42
--- /dev/null
+++ b/src/chat/group/index.scss
@@ -0,0 +1,110 @@
+.dtc-aigc__group {
+ display: flex;
+ width: 100%;
+ height: 100%;
+ position: relative;
+ &--fullscreen {
+ .dtc-aigc__group__list {
+ background-color: #F9F9FA;
+ }
+ &.dtc-aigc__group--expand .dtc-aigc__group__list {
+ width: 240px;
+ padding: 8px 0;
+ }
+ }
+ &--expand {
+ .dtc-aigc__group__list {
+ transform: translateX(0);
+ padding: 8px 0;
+ width: 200px;
+ &--float {
+ height: fit-content;
+ transform: translateY(0);
+ opacity: 1;
+ }
+ }
+ }
+ &__list {
+ width: 0;
+ background-color: transparent;
+ border-right: 1px solid #EBECF0;
+ padding: 0;
+ transform: translateX(-210px);
+ transform-origin: 0 0;
+ transition: all 0.3s ease;
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ &--hide {
+ display: none;
+ }
+ &--empty {
+ margin-top: 100%;
+ }
+ &--float {
+ position: absolute;
+ top: 2px;
+ left: 8px;
+ z-index: 10;
+ background-color: #FFF;
+ border-radius: 4px;
+ border: 1px solid #EBECF0;
+ box-shadow: 0 12px 20px 0 rgba(29, 120, 255, 0.1);
+ max-height: 400px;
+ transform: translateY(-10px);
+ height: 0;
+ width: 150px;
+ opacity: 0;
+ .dtc-aigc__group__list--empty {
+ margin-top: 0;
+ }
+ .dtc-aigc__dialog__list__item:hover {
+ .anticon-more {
+ display: none;
+ }
+ }
+ .dtc-aigc__group__list__item {
+ padding: 0 8px;
+ }
+ }
+ &__wrapper {
+ flex: 1;
+ overflow-y: auto;
+ }
+ &__item {
+ padding: 0 16px;
+ &__title {
+ color: #B1B4C5;
+ line-height: 20px;
+ font-size: 12px;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ }
+ }
+ .ant-btn.dtc__aigc__button {
+ margin: 16px;
+ gap: 4px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+ }
+ &__content {
+ flex: 1;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ overflow: hidden;
+ }
+ .dtc__spin {
+ &__wrapper {
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ margin: 40px 0;
+ }
+ }
+}
diff --git a/src/chat/group/index.tsx b/src/chat/group/index.tsx
new file mode 100644
index 000000000..cb63115ae
--- /dev/null
+++ b/src/chat/group/index.tsx
@@ -0,0 +1,224 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { ButtonProps, Spin } from 'antd';
+import classNames from 'classnames';
+import dayjs from 'dayjs';
+import shortid from 'shortid';
+
+import Empty from '../../empty';
+import useLocale from '../../locale/useLocale';
+import useMeasure from '../../useMeasure';
+import Button from '../button';
+import { ConversationProperties } from '../entity';
+import { AddDialogIcon } from '../icon';
+import Item from './Item';
+import List, { IChatGroupListProps } from './List';
+import './index.scss';
+
+const GROUP_FLOAT_WIDTH = 640;
+const EXPAND_KEY = 'data-expand';
+export type GroupProperties = {
+ id: string;
+ conversations?: ConversationProperties[];
+ title?: string;
+};
+
+type IConversationButtonProps = Omit;
+
+interface IGroupProps {
+ loading?: boolean;
+ children?: React.ReactNode;
+ fullscreen?: boolean;
+ expand?: boolean;
+ className?: string;
+ // 对话数据
+ data?: ConversationProperties[];
+ // 是否开启点击其他地方关闭
+ maskClose?: boolean;
+ // 添加对话按钮
+ conversationButton?: React.ReactNode;
+ // 添加对话按钮属性
+ conversationButtonProps?: React.HTMLAttributes & IConversationButtonProps;
+ // 列表属性
+ listProps?: IChatGroupListProps;
+ openFloat?: boolean;
+ onExpandChange?: (expand: boolean) => void;
+}
+function classifyDate(date?: string | Date | number) {
+ if (!date) return '';
+ const input = dayjs(date).startOf('day');
+ const now = dayjs().startOf('day');
+
+ const diffDays = now.diff(input, 'days');
+
+ if (diffDays < 1) {
+ return '今天';
+ } else if (diffDays < 2) {
+ return '昨天';
+ } else if (diffDays < 7) {
+ return '近7天';
+ } else if (diffDays < 15) {
+ return '近15天';
+ } else if (diffDays < 30) {
+ return '近30天';
+ } else {
+ return '其他';
+ }
+}
+function transform(data: ConversationProperties[]) {
+ return data.reduce((prev, current) => {
+ const group = prev.find((item) => item.title === classifyDate(current.updatedAt));
+
+ if (group) {
+ if (!group.conversations) {
+ group.conversations = [];
+ }
+ group.conversations.push(current);
+ } else {
+ prev.push({
+ id: `group_${shortid()}`,
+ title: classifyDate(current.updatedAt),
+ conversations: [current],
+ });
+ }
+ return prev;
+ }, [] as GroupProperties[]);
+}
+export default function Group(props: IGroupProps) {
+ const {
+ children,
+ fullscreen,
+ className,
+ data = [],
+ conversationButton,
+ conversationButtonProps,
+ expand,
+ maskClose = true,
+ listProps,
+ loading,
+ openFloat = true,
+ onExpandChange,
+ } = props;
+ const locale = useLocale('Chat');
+ const [ref, { width }] = useMeasure();
+
+ const listRef = useRef(null);
+ const isGroupFloat = useRef(false);
+ const isExpand = useRef(expand);
+ const isMaskClose = useRef(maskClose);
+ const [isHide, setIsHide] = useState(true);
+
+ // 浮动对话列表点击其他区域关闭
+ const listenerClick = useCallback((event: MouseEvent | TouchEvent) => {
+ if (!isMaskClose.current) return;
+ // 展开和关闭按钮
+ const dataExpand = (event.target as HTMLElement).closest(`[${EXPAND_KEY}]`);
+
+ if (
+ !listRef.current ||
+ listRef.current.contains(event.target as Node) ||
+ !isGroupFloat.current ||
+ !isExpand.current ||
+ dataExpand
+ ) {
+ return;
+ }
+ onExpandChange?.(false);
+ }, []);
+ useEffect(() => {
+ document.addEventListener('mousedown', listenerClick);
+ document.addEventListener('touchstart', listenerClick);
+ return () => {
+ document.removeEventListener('mousedown', listenerClick);
+ document.removeEventListener('touchstart', listenerClick);
+ };
+ }, []);
+
+ useEffect(() => {
+ isExpand.current = expand;
+ if (expand) {
+ setIsHide(false);
+ }
+ }, [expand]);
+
+ useEffect(() => {
+ isMaskClose.current = maskClose;
+ }, [maskClose]);
+
+ useEffect(() => {
+ isGroupFloat.current = width < GROUP_FLOAT_WIDTH && openFloat;
+ }, [width]);
+
+ const groups = useMemo(() => {
+ return transform(data);
+ }, [data]);
+
+ const renderGroups = (groups: GroupProperties[]) => {
+ return !groups.length ? (
+
+ ) : (
+ groups?.map((group) => {
+ if (!group.conversations?.length) return null;
+ return (
+
+
+ {group.title || ''}
+
+
+
+
{
+ if (!expand) setIsHide(true);
+ }}
+ >
+ {!(width < GROUP_FLOAT_WIDTH && openFloat) &&
+ (conversationButton ?? (
+
+ }
+ {...conversationButtonProps}
+ >
+ {locale.createConversation}
+
+ ))}
+
+ {loading ? : renderGroups(groups)}
+
+
+
{children}
+
{
@@ -46,10 +49,6 @@ export default function Input({
onPressEnter?.(e);
}
}}
- autoSize={{
- minRows: 2,
- maxRows: 7,
- }}
/>
{button?.disabled ? (
diff --git a/src/chat/markdown/index.scss b/src/chat/markdown/index.scss
index d076fe70a..08418932a 100644
--- a/src/chat/markdown/index.scss
+++ b/src/chat/markdown/index.scss
@@ -73,6 +73,33 @@
font-size: 14px;
}
}
+ &__table {
+ border: 1px solid #EBECF0;
+ width: 100%;
+ margin-block-end: 8px;
+ tr {
+ border-bottom: 1px solid #EBECF0;
+ height: 36px;
+ text-align: left;
+ font-size: 12px;
+ line-height: 20px;
+ color: #3D446E;
+ th, td {
+ padding: 8px 16px;
+ }
+ }
+ thead {
+ tr {
+ background-color: #F9F9FA;
+ font-weight: 500;
+ }
+ }
+ tbody {
+ tr {
+ background-color: #FFF;
+ }
+ }
+ }
&__inlineCode {
margin: 0 4px;
padding: 2px 8px;
diff --git a/src/chat/markdown/index.tsx b/src/chat/markdown/index.tsx
index 1f2223b33..7af88f7b7 100644
--- a/src/chat/markdown/index.tsx
+++ b/src/chat/markdown/index.tsx
@@ -49,6 +49,9 @@ export default memo(
hr() {
return
;
},
+ table({ children }) {
+ return ;
+ },
p: (data) => {
// avoid validateDOMNesting error for div as a descendant of p
if (data.node.children.every((child) => child.type === 'text')) {
@@ -71,7 +74,7 @@ export default memo(
includeElementIndex
{...rest}
>
- {children}
+ {ensureTag(children)}
);
},
@@ -85,3 +88,12 @@ export default memo(
return true;
}
);
+
+/**
+ * 确保 HTML 标签的前后都有两个换行符
+ */
+function ensureTag(children: string) {
+ if (typeof children !== 'string') return children;
+ const next = children.replace(/<\/?[a-z].[^<]*>/g, (str) => '\n\n' + str + '\n\n');
+ return next;
+}
diff --git a/src/chat/message/index.scss b/src/chat/message/index.scss
index 8e74318c4..e7db33695 100644
--- a/src/chat/message/index.scss
+++ b/src/chat/message/index.scss
@@ -3,6 +3,9 @@
display: flex;
gap: 4px;
position: relative;
+ &:has(+ .dtc__message__container):has(.dtc__message__iconGroup:not(:empty)) {
+ margin-bottom: 8px;
+ }
&:hover {
.dtc__message__iconGroup {
opacity: 1;
diff --git a/src/chat/message/index.tsx b/src/chat/message/index.tsx
index 740f76444..a0137b65c 100644
--- a/src/chat/message/index.tsx
+++ b/src/chat/message/index.tsx
@@ -10,6 +10,7 @@ import { Button, Space, Tooltip } from 'antd';
import classNames from 'classnames';
import Copy from '../../copy';
+import useLocale from '../../locale/useLocale';
import useIntersectionObserver from '../../useIntersectionObserver';
import { Message as MessageEntity, MessageStatus, Prompt as PromptEntity } from '../entity';
import Loading from '../loading';
@@ -43,6 +44,7 @@ export default function Message({
onStop,
onLazyRendered,
}: IMessageProps) {
+ const locale = useLocale('Chat');
const divRef = useIntersectionObserver(handleObserverCb);
const { components = {}, messageIcons, codeBlock, rehypePlugins, remarkPlugins } = useContext();
@@ -160,7 +162,7 @@ export default function Message({
onChange={(cur) => setCurrent(cur)}
/>
)}
- {stopped && 回答已停止}
+ {stopped && {locale.stoped}}
{(typing || loading) && (
@@ -171,7 +173,7 @@ export default function Message({
onClick={() => onStop?.(record)}
icon={
}
>
- 停止回答
+ {locale.stop}
+