test-chat-sdk 0.0.0

package/src/Chat/MobileAgents/style.module.less

@@ -0,0 +1,55 @@
+.mobileAgents {
+  :global {
+    .ant-drawer-content {
+      border-top-left-radius: 12px;
+      border-top-right-radius: 12px;
+
+      .ant-drawer-header {
+        padding: 16px 12px;
+      }
+
+      .ant-drawer-body {
+        padding: 12px;
+      }
+    }
+  }
+
+  .agentListContent {
+    display: flex;
+    flex-direction: column;
+    row-gap: 12px;
+
+    .agentItem {
+      padding: 12px 16px;
+      background-color: #f5f7f9;
+      border: 1px solid transparent;
+      border-radius: 10px;
+
+      &.active {
+        border: 1px solid var(--chat-blue);
+      }
+
+      .agentTitleBar {
+        display: flex;
+        align-items: center;
+        column-gap: 6px;
+
+        .avatar {
+          font-size: 24px;
+        }
+
+        .agentName {
+          color: var(--text-color);
+          font-weight: 500;
+        }
+      }
+
+      .agentDesc {
+        margin-top: 8px;
+        color: var(--text-color-third);
+        font-size: 13px;
+        line-height: 24px;
+      }
+    }
+  }
+}

package/src/Chat/components/AgentTip/index.tsx

@@ -0,0 +1,48 @@
+import LeftAvatar from '../CopilotAvatar';
+import Message from '../Message';
+import styles from './style.module.less';
+import { AgentType } from '../../type';
+import { isMobile } from '../../../utils/utils';
+
+type Props = {
+  currentAgent?: AgentType;
+  onSendMsg: (value: string) => void;
+};
+
+const AgentTip: React.FC<Props> = ({ currentAgent, onSendMsg }) => {
+  if (!currentAgent) {
+    return null;
+  }
+  return (
+    <div className={styles.agentTip}>
+      {!isMobile && <LeftAvatar />}
+      <Message position="left" bubbleClassName={styles.agentTipMsg}>
+        <div className={styles.title}>
+          您好，智能助理【{currentAgent.name}
+          】将与您对话，试着问：
+        </div>
+        <div className={styles.content}>
+          <div className={styles.examples}>
+            {currentAgent.examples?.length > 0 ? (
+              currentAgent.examples.map(example => (
+                <div
+                  key={example}
+                  className={styles.example}
+                  onClick={() => {
+                    onSendMsg(example);
+                  }}
+                >
+                  “{example}”
+                </div>
+              ))
+            ) : (
+              <div className={styles.example}>{currentAgent.description}</div>
+            )}
+          </div>
+        </div>
+      </Message>
+    </div>
+  );
+};
+
+export default AgentTip;

package/src/Chat/components/AgentTip/style.module.less

@@ -0,0 +1,44 @@
+.agentTip {
+  display: flex;
+
+  .agentTipMsg {
+    padding: 12px 20px 20px !important;
+
+    .title {
+      margin-bottom: 12px;
+      font-size: 14px;
+    }
+
+    .content {
+      display: flex;
+      flex-direction: column;
+      flex-wrap: wrap;
+      margin-top: 10px;
+      column-gap: 14px;
+
+      .topBar {
+        .tip {
+          margin-top: 2px;
+          font-size: 13px;
+        }
+      }
+
+      .examples {
+        display: flex;
+        flex-direction: column;
+        font-size: 13px;
+        row-gap: 8px;
+
+        .example {
+          color: var(--chat-blue);
+          cursor: pointer;
+        }
+      }
+
+      &.fullscreen {
+        flex: none;
+        width: 280px;
+      }
+    }
+  }
+}

package/src/Chat/components/ConversationModal/index.tsx

@@ -0,0 +1,65 @@
+import { Form, Input, Modal } from 'antd';
+import { useEffect, useRef, useState } from 'react';
+import { updateConversationName } from '../../service';
+import type { ConversationDetailType } from '../../type';
+
+const FormItem = Form.Item;
+
+type Props = {
+  visible: boolean;
+  editConversation?: ConversationDetailType;
+  onClose: () => void;
+  onFinish: (conversationName: string) => void;
+};
+
+const layout = {
+  labelCol: { span: 6 },
+  wrapperCol: { span: 18 },
+};
+
+const ConversationModal: React.FC<Props> = ({ visible, editConversation, onClose, onFinish }) => {
+  const [form] = Form.useForm();
+  const [loading, setLoading] = useState(false);
+  const conversationNameInputRef = useRef<any>();
+
+  useEffect(() => {
+    if (visible) {
+      form.setFieldsValue({ conversationName: editConversation!.chatName });
+      setTimeout(() => {
+        conversationNameInputRef.current.focus({
+          cursor: 'all',
+        });
+      }, 0);
+    }
+  }, [visible]);
+
+  const onConfirm = async () => {
+    const values = await form.validateFields();
+    setLoading(true);
+    await updateConversationName(values.conversationName, editConversation!.chatId);
+    setLoading(false);
+    onFinish(values.conversationName);
+  };
+
+  return (
+    <Modal
+      title="修改问答名称"
+      open={visible}
+      onCancel={onClose}
+      onOk={onConfirm}
+      confirmLoading={loading}
+    >
+      <Form {...layout} form={form}>
+        <FormItem name="conversationName" label="名称" rules={[{ required: true }]}>
+          <Input
+            placeholder="请输入问答名称"
+            ref={conversationNameInputRef}
+            onPressEnter={onConfirm}
+          />
+        </FormItem>
+      </Form>
+    </Modal>
+  );
+};
+
+export default ConversationModal;

package/src/Chat/components/CopilotAvatar/index.tsx

@@ -0,0 +1,8 @@
+import IconFont from '../../../components/IconFont';
+import styles from './style.module.less';
+
+const CopilotAvatar = () => {
+  return <IconFont type="icon-zhinengsuanfa" className={styles.leftAvatar} />;
+};
+
+export default CopilotAvatar;

package/src/Chat/components/CopilotAvatar/style.module.less

@@ -0,0 +1,13 @@
+.leftAvatar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  margin-right: 6px;
+  margin-right: 6px;
+  color: var(--chat-blue);
+  font-size: 40px;
+  background-color: #fff;
+  border-radius: 50%;
+}

package/src/Chat/components/Message.tsx

@@ -0,0 +1,38 @@
+import classNames from 'classnames';
+import styles from './style.module.less';
+import { ReactNode } from 'react';
+
+type Props = {
+  position: 'left' | 'right';
+  width?: number | string;
+  height?: number | string;
+  bubbleClassName?: string;
+  children?: ReactNode;
+};
+
+const Message: React.FC<Props> = ({ position, width, height, children, bubbleClassName }) => {
+  const messageClass = classNames(styles.message, {
+    [styles.left]: position === 'left',
+    [styles.right]: position === 'right',
+  });
+
+  return (
+    <div className={messageClass} style={{ width }}>
+      <div className={styles.messageContent}>
+        <div className={styles.messageBody}>
+          <div
+            className={`${styles.bubble}${bubbleClassName ? ` ${bubbleClassName}` : ''}`}
+            style={{ height }}
+            onClick={e => {
+              e.stopPropagation();
+            }}
+          >
+            {children}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Message;

package/src/Chat/components/RecommendQuestions/index.tsx

@@ -0,0 +1,64 @@
+import { useEffect, useState } from 'react';
+import LeftAvatar from '../CopilotAvatar';
+import Message from '../Message';
+import styles from './style.module.less';
+import { queryRecommendQuestions } from '../../service';
+import { isMobile } from '../../../utils/utils';
+
+type Props = {
+  onSelectQuestion: (value: string) => void;
+};
+
+const RecommendQuestions: React.FC<Props> = ({ onSelectQuestion }) => {
+  const [questions, setQuestions] = useState<string[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  const initData = async () => {
+    setLoading(true);
+    const res = await queryRecommendQuestions();
+    setLoading(false);
+    setQuestions(
+      res.data?.reduce((result: any[], item: any) => {
+        result = [
+          ...result,
+          ...item.recommendedQuestions.slice(0, 20).map((item: any) => item.question),
+        ];
+        return result;
+      }, []) || []
+    );
+  };
+
+  useEffect(() => {
+    initData();
+  }, []);
+
+  return (
+    <div className={styles.recommendQuestions}>
+      {!isMobile && <LeftAvatar />}
+      {loading ? (
+        <></>
+      ) : questions.length > 0 ? (
+        <Message position="left" bubbleClassName={styles.recommendQuestionsMsg}>
+          <div className={styles.title}>推荐问题：</div>
+          <div className={styles.content}>
+            {questions.map((question, index) => (
+              <div
+                key={`${question}_${index}`}
+                className={styles.question}
+                onClick={() => {
+                  onSelectQuestion(question);
+                }}
+              >
+                {question}
+              </div>
+            ))}
+          </div>
+        </Message>
+      ) : (
+        <Message position="left">您好，请问有什么我可以帮您吗？</Message>
+      )}
+    </div>
+  );
+};
+
+export default RecommendQuestions;

package/src/Chat/components/RecommendQuestions/style.module.less

@@ -0,0 +1,36 @@
+.recommendQuestions {
+  display: flex;
+
+  .recommendQuestionsMsg {
+    padding: 12px 20px 20px !important;
+
+    .title {
+      margin-bottom: 12px;
+      font-weight: 500;
+      font-size: 14px;
+    }
+
+    .content {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      column-gap: 16px;
+      row-gap: 20px;
+
+      .question {
+        height: 22px;
+        padding: 0 6px;
+        color: var(--text-color);
+        font-size: 12px;
+        line-height: 22px;
+        background-color: #f4f4f4;
+        border-radius: 11px;
+        cursor: pointer;
+
+        &:hover {
+          color: var(--chat-blue);
+        }
+      }
+    }
+  }
+}

package/src/Chat/components/Text.tsx

@@ -0,0 +1,42 @@
+import { isMobile } from '../../utils/utils';
+import { Avatar } from 'antd';
+import classNames from 'classnames';
+import LeftAvatar from './CopilotAvatar';
+import Message from './Message';
+import styles from './style.module.less';
+import { userAvatarUrl } from '../../common/env';
+import IconFont from '../../components/IconFont';
+
+type Props = {
+  position: 'left' | 'right';
+  data: any;
+  quote?: string;
+  anonymousUser?: boolean;
+};
+
+const Text: React.FC<Props> = ({ position, data, quote, anonymousUser }) => {
+  const textWrapperClass = classNames(styles.textWrapper, {
+    [styles.rightTextWrapper]: position === 'right',
+  });
+  const rightAvatarUrl = userAvatarUrl;
+  return (
+    <div className={textWrapperClass}>
+      {!isMobile && position === 'left' && <LeftAvatar />}
+      <Message position={position} bubbleClassName={styles.textBubble}>
+        {position === 'right' && quote && <div className={styles.quote}>{quote}</div>}
+        <div className={styles.text}>{data}</div>
+      </Message>
+      {!isMobile && position === 'right' && rightAvatarUrl && (
+        <Avatar
+          shape="circle"
+          size={40}
+          src={anonymousUser ? undefined : rightAvatarUrl}
+          icon={<IconFont type="icon-geren" />}
+          className={styles.rightAvatar}
+        />
+      )}
+    </div>
+  );
+};
+
+export default Text;