Merge pull request #17 from dayuy/beta

feat: lobeUI ChatItem & EditableMessage

package.json

@@ -100,7 +100,8 @@
     "react-layout-kit": "^1",
     "shiki": "^1.10.3",
     "swr": "^2.2.5",
-    "url-join": "^5.0.0"
+    "url-join": "^5.0.0",
+    "use-merge-value": "^1.2.0"
   },
   "devDependencies": {
     "@testing-library/react": "^14",

src/ChatItem/components/MessageContent.tsx

@@ -0,0 +1,79 @@
+import { MarkdownProps } from '@lobehub/ui';
+import { useResponsive } from 'antd-style';
+import { type ReactNode, memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import EditableMessage from '@/EditableMessage';
+
+import { useStyles } from '../style';
+import { ChatItemProps } from '../type';
+
+export interface MessageContentProps {
+  editing?: ChatItemProps['editing'];
+  fontSize?: number;
+  message?: ReactNode;
+  messageExtra?: ChatItemProps['messageExtra'];
+  onChange?: ChatItemProps['onChange'];
+  onDoubleClick?: ChatItemProps['onDoubleClick'];
+  onEditingChange?: ChatItemProps['onEditingChange'];
+  placement?: ChatItemProps['placement'];
+  primary?: ChatItemProps['primary'];
+  renderMessage?: ChatItemProps['renderMessage'];
+  text?: ChatItemProps['text'];
+  type?: ChatItemProps['type'];
+  markdownProps?: MarkdownProps;
+  markdownClassname?: string;
+}
+
+const MessageContent = memo<MessageContentProps>(
+  ({
+    editing,
+    onChange,
+    onEditingChange,
+    text,
+    message,
+    placement,
+    messageExtra,
+    renderMessage,
+    type,
+    primary,
+    onDoubleClick,
+    fontSize,
+    markdownProps,
+    markdownClassname,
+  }) => {
+    const { cx, styles } = useStyles({ editing, placement, primary, type });
+    const { mobile } = useResponsive();
+
+    const content = (
+      <EditableMessage
+        classNames={{ input: styles.editingInput, markdown: markdownClassname }}
+        editButtonSize={'small'}
+        editing={editing}
+        fontSize={fontSize}
+        fullFeaturedCodeBlock
+        markdownProps={markdownProps}
+        onChange={onChange}
+        onEditingChange={onEditingChange}
+        openModal={mobile ? editing : undefined}
+        text={text}
+        value={message ? String(message).trim() : ''}
+      />
+    );
+    const messageContent = renderMessage ? renderMessage(content) : content;
+
+    return (
+      <Flexbox
+        className={cx(styles.message, editing && styles.editingContainer)}
+        onDoubleClick={onDoubleClick}
+      >
+        {messageContent}
+        {messageExtra && !editing ? (
+          <div className={styles.messageExtra}>{messageExtra}</div>
+        ) : null}
+      </Flexbox>
+    );
+  }
+);
+
+export default MessageContent;

src/ChatItem/demos/Alert.tsx

@@ -0,0 +1,47 @@
+import { Highlighter, StoryBook, useControls, useCreateStore } from '@lobehub/ui';
+
+import ChatItem, { ChatItemProps } from '..';
+import { avatar } from './data';
+
+const demoError = {
+  details: {
+    exception:
+      'Validation filter failedId-f5aab7304f6c754804f70000Id-f5aab7304f6c754804f70000Id-f5aab7304f6c754804f70000Id-f5aab7304f6c754804f70000Id-f5aab7304f6c754804f70000Id-f5aab7304f6c754804f70000',
+    msgId:
+      'Id-f5aab7304f6c754804f70000Id-f5aab7304f6c754804f70000Id-f5aab7304f6c754804f70000Id-f5aab7304f6c754804f70000Id-f5aab7304f6c754804f70000',
+  },
+  reasons: [
+    {
+      language: 'en',
+      message: 'Validation filter failed',
+    },
+  ],
+};
+export default () => {
+  const store = useCreateStore();
+  const control: ChatItemProps['error'] | any = useControls(
+    {
+      description: '',
+      message: 'Error',
+      type: {
+        options: ['success', 'info', 'warning', 'error'],
+        value: 'error',
+      },
+    },
+    { store }
+  );
+
+  return (
+    <StoryBook levaStore={store}>
+      <ChatItem
+        avatar={avatar}
+        error={control}
+        errorMessage={
+          <Highlighter copyButtonSize={'small'} language={'json'} type={'pure'}>
+            {JSON.stringify(demoError, null, 2)}
+          </Highlighter>
+        }
+      />
+    </StoryBook>
+  );
+};

src/ChatItem/demos/Tmarkdown.tsx

@@ -0,0 +1,61 @@
+import { ActionIconGroup, StoryBook, useControls, useCreateStore } from '@lobehub/ui';
+import { useState } from 'react';
+
+import ChatItem, { ChatItemProps } from '..';
+import { content } from '../../EditableMessage/demos/data';
+import { avatar, dropdownMenu, items } from './data';
+
+export default () => {
+  const [edit, setEdit] = useState(false);
+  const store = useCreateStore();
+  const control: ChatItemProps | any = useControls(
+    {
+      loading: false,
+      message: {
+        rows: true,
+        value: content,
+      },
+      placement: {
+        options: ['left', 'right'],
+        value: 'left',
+      },
+      primary: false,
+      showTitle: false,
+      time: 1_686_538_950_084,
+      type: {
+        options: ['block', 'pure'],
+        value: 'block',
+      },
+      markdownProps: {
+        fontSize: 15,
+        lineHeight: 1.625,
+        headerMultiple: 0,
+      },
+      markdownClassname: 'customMarkdown',
+    },
+    { store }
+  );
+
+  return (
+    <StoryBook levaStore={store}>
+      <ChatItem
+        {...control}
+        actions={
+          <ActionIconGroup
+            dropdownMenu={dropdownMenu}
+            items={items}
+            onActionClick={action => {
+              if (action.key === 'edit') {
+                setEdit(true);
+              }
+            }}
+            type="ghost"
+          />
+        }
+        avatar={avatar}
+        editing={edit}
+        onEditingChange={setEdit}
+      />
+    </StoryBook>
+  );
+};

src/ChatItem/demos/data.tsx

@@ -0,0 +1,37 @@
+import { type ActionIconGroupProps, MetaData } from '@lobehub/ui';
+import { Copy, Edit, RotateCw, Trash } from 'lucide-react';
+
+export const avatar: MetaData = {
+  avatar: '😎',
+  backgroundColor: '#E8DA5A',
+  title: 'Advertiser',
+};
+
+export const items: ActionIconGroupProps['items'] = [
+  {
+    icon: Edit,
+    key: 'edit',
+    label: 'Edit',
+  },
+];
+
+export const dropdownMenu: ActionIconGroupProps['dropdownMenu'] = [
+  {
+    icon: Copy,
+    key: 'copy',
+    label: 'Copy',
+  },
+  {
+    icon: RotateCw,
+    key: 'regenerate',
+    label: 'Regenerate',
+  },
+  {
+    type: 'divider',
+  },
+  {
+    icon: Trash,
+    key: 'delete',
+    label: 'Delete',
+  },
+];

src/ChatItem/demos/index.tsx

@@ -0,0 +1,55 @@
+import { ActionIconGroup, StoryBook, useControls, useCreateStore } from '@lobehub/ui';
+import { useState } from 'react';
+
+import ChatItem, { ChatItemProps } from '..';
+import { avatar, dropdownMenu, items } from './data';
+
+export default () => {
+  const [edit, setEdit] = useState(false);
+  const store = useCreateStore();
+  const control: ChatItemProps | any = useControls(
+    {
+      loading: false,
+      message: {
+        rows: true,
+        value:
+          "要使用 dayjs 的 fromNow 函数，需要先安装 dayjs 库并在代码中引入它。然后，可以使用以下语法来获取当前时间与给定时间之间的相对时间：\n\n```javascript\ndayjs().fromNow();\ndayjs('2021-05-01').fromNow();\n```",
+      },
+      placement: {
+        options: ['left', 'right'],
+        value: 'left',
+      },
+      primary: false,
+      showTitle: false,
+      time: 1_686_538_950_084,
+      type: {
+        options: ['block', 'pure'],
+        value: 'block',
+      },
+    },
+    { store }
+  );
+
+  return (
+    <StoryBook levaStore={store}>
+      <ChatItem
+        {...control}
+        actions={
+          <ActionIconGroup
+            dropdownMenu={dropdownMenu}
+            items={items}
+            onActionClick={action => {
+              if (action.key === 'edit') {
+                setEdit(true);
+              }
+            }}
+            type="ghost"
+          />
+        }
+        avatar={avatar}
+        editing={edit}
+        onEditingChange={setEdit}
+      />
+    </StoryBook>
+  );
+};

src/ChatItem/index.md

@@ -0,0 +1,22 @@
+---
+nav: Components
+group: Chat
+title: ChatItem
+description: ChatItem is a React component that represents a single item in a chat conversation. It displays the user's avatar, name, and message. It can also display a loading indicator if the message is still being sent.
+---
+
+## Default
+
+<code src="./demos/index.tsx" nopadding></code>
+
+## Markdown
+
+<code src="./demos/Tmarkdown.tsx" nopadding></code>
+
+## Alert
+
+<code src="./demos/Alert.tsx" nopadding></code>
+
+## APIs
+
+<API></API>