bi-sdk-react 0.0.4 → 0.0.5

package/src/components/panel/AiPanel.tsx

@@ -1,12 +1,42 @@
-import React from "react";
+import {
+  DeleteOutlined,
+  HistoryOutlined,
+  MessageOutlined,
+  ReloadOutlined,
+  RobotOutlined,
+} from "@ant-design/icons";
+import {
+  Button,
+  Card,
+  Dropdown,
+  Modal,
+  Popconfirm,
+  Skeleton,
+  Space,
+  Tag,
+  Tooltip,
+} from "antd";
+import React, {
+  forwardRef,
+  useContext,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from "react";
 import styled from "styled-components";
-import { Tooltip, Space, Card } from "antd";
-import { HistoryOutlined, MessageOutlined } from "@ant-design/icons";
-import { PaneHeader } from "./PaneHeader";
+import { DesignerContext } from "../context/DesignerContext";
+import { IconFont } from "../icon/IconFont";
+import { ChatConversationType, ChatMessageType, ChatResponseAnswerEffectType, ChatResponseAnswerType } from "../typing";
+import { formatTime, uuid } from "../utils";
 import { ChatInput } from "./ChatInput";
+import { PaneHeader } from "./PaneHeader";
 
 export type AiPanelProps = {
   agentList?: { id: string; name: string }[];
+  headExtra?: React.ReactNode;
+  style?: React.CSSProperties;
+  onEffect?: (effect: ChatResponseAnswerEffectType) => void;
 };
 
 const Root = styled.div`
@@ -18,7 +48,7 @@ const Root = styled.div`
     display: flex;
     flex-direction: column;
     gap: 12px;
-    padding: 12px;
+    padding: 0 !important;
   }
   .conversation-list {
     margin: 0;
@@ -54,63 +84,599 @@ const Root = styled.div`
 
 const DEFAULT_AGENT_LIST: any[] = [];
 
+const BIZ_TYPE = "bi-design";
+
 export const AiPanel: React.FC<AiPanelProps> = ({
   agentList = DEFAULT_AGENT_LIST,
+  headExtra,
+  style = {},
+  onEffect,
 }) => {
+  const { pageId, fetch } = useContext(DesignerContext);
+  if (!fetch) return null;
+  const [conversationId, setConversationId] = useState<string | null>(null);
+  const [conversationList, setConversationList] = useState<
+    ChatConversationType[]
+  >([]);
+  const [messageList, setMessageList] = useState<ChatMessageType[]>([]);
+  const messageListRef = React.useRef<MessageListRef>(null);
+
+  const scrollToBottom = () => {
+    setTimeout(() => {
+      if (messageListRef.current) {
+        messageListRef.current.scrollToBottom();
+      }
+    }, 100);
+  };
+
+  const handleNewConversationClick = () => {
+    setConversationId(null);
+    setMessageList([]);
+  };
+  const handleDeleteConversation = async (id: string) => {
+    Modal.confirm({
+      title: "确认删除该对话吗？",
+      okText: "确认",
+      cancelText: "取消",
+      onOk: async () => {
+        await fetch.ai?.removeConversation(BIZ_TYPE, pageId, id);
+        setConversationList((list) => list.filter((i) => i.id !== id));
+        setMessageList((list) => list.filter((m) => m.conversationId !== id));
+        if (conversationId === id) {
+          handleNewConversationClick();
+        }
+      },
+    });
+  };
+
+  const handleActivateConversation = async (id: string) => {
+    setConversationId(id);
+    setConversationList((list) =>
+      list.map((i) => ({ ...i, isActived: i.id === id }))
+    );
+    const messages = await fetch.ai?.messageList(BIZ_TYPE, pageId, id);
+    setMessageList(messages || []);
+  };
+
+  const handleSendMessage = async (data: {
+    message: string;
+    agents?: { id: string | number; name: string }[] | null;
+    files?: { id: string; name: string; extension: string }[] | null;
+  }) => {
+    const questionMessage = {
+      id: uuid(),
+      conversationId: conversationId || "",
+      question: data.message,
+      createdAt: new Date().toISOString(),
+      files: data.files || [],
+      agents: data.agents || [],
+      sending: true,
+    } as ChatMessageType;
+    setMessageList((list) => [...list, questionMessage]);
+    scrollToBottom();
+
+    const { id, answer, createdAt, conversation } = await fetch.ai?.chat(
+      BIZ_TYPE,
+      pageId,
+      conversationId,
+      data
+    )!;
+    setConversationId(conversation?.id || "");
+    setConversationList((list) => [
+      ...list,
+      conversation || ({} as ChatConversationType),
+    ]);
+    Object.assign(questionMessage, {
+      id,
+      answer,
+      createdAt,
+      conversationId: conversation?.id || "",
+      sending: false,
+    });
+    if (answer.effect) {
+      onEffect?.(answer.effect);
+    }
+    setMessageList((list) => [...list]);
+    scrollToBottom();
+  };
+
+  const handleDeleteMessage = async (id: string) => {
+    await fetch.ai?.removeMessage(BIZ_TYPE, pageId, id);
+    setMessageList((list) => list.filter((i) => i.id !== id));
+  };
+
+  const groups = (() => {
+    const now = new Date();
+    const isSameDay = (d1: Date, d2: Date) =>
+      d1.getFullYear() === d2.getFullYear() &&
+      d1.getMonth() === d2.getMonth() &&
+      d1.getDate() === d2.getDate();
+    const yesterday = new Date(now);
+    yesterday.setDate(now.getDate() - 1);
+    const isSameMonth = (d1: Date, d2: Date) =>
+      d1.getFullYear() === d2.getFullYear() && d1.getMonth() === d2.getMonth();
+    const todayList: ChatConversationType[] = [];
+    const yesterdayList: ChatConversationType[] = [];
+    const monthList: ChatConversationType[] = [];
+    const oldList: ChatConversationType[] = [];
+    conversationList.forEach((c) => {
+      const d = new Date(c.createdAt);
+      if (isSameDay(d, now)) todayList.push(c);
+      else if (isSameDay(d, yesterday)) yesterdayList.push(c);
+      else if (isSameMonth(d, now)) monthList.push(c);
+      else oldList.push(c);
+    });
+    return [
+      { title: "今天", items: todayList },
+      { title: "昨天", items: yesterdayList },
+      { title: "本月内", items: monthList },
+      { title: "很久以前", items: oldList },
+    ].filter((g) => g.items.length > 0);
+  })();
+
+  const init = async () => {
+    try {
+      const list = await fetch.ai?.conversationList(BIZ_TYPE, pageId);
+      setConversationList(list || []);
+      const active = list?.find((i) => i.isActived);
+      if (active) {
+        setConversationId(active.id);
+        const messages = await fetch.ai?.messageList(
+          BIZ_TYPE,
+          pageId,
+          active.id
+        );
+        setMessageList(messages || []);
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  useEffect(() => {
+    init();
+  }, [fetch]);
+
+  useEffect(() => {
+    scrollToBottom();
+  }, []);
+
   return (
-    <Root>
+    <Root style={style}>
       <PaneHeader
         title="智能助理"
         extra={
           <Space>
             <Tooltip title="新对话" placement="topRight">
-              <a>
-                <MessageOutlined />
+              <a onClick={handleNewConversationClick}>
+                <IconFont type="icon-chat-plus" />
               </a>
             </Tooltip>
-            <Tooltip title="历史记录" placement="topRight">
+            <Dropdown
+              trigger={["click"]}
+              styles={{
+                root: {
+                  boxShadow: "var(--ant-box-shadow-drawer-up)",
+                  backgroundColor: "#ffffff",
+                  borderRadius: "var(--ant-border-radius)",
+                },
+              }}
+              popupRender={() => (
+                <HistoryDropdownPanel>
+                  {groups.map((g) => (
+                    <div className="group" key={g.title}>
+                      <div className="group-title">{g.title}</div>
+                      <ul className="group-list">
+                        {g.items.map((item) => (
+                          <li
+                            key={item.id}
+                            className={item.isActived ? "actived" : ""}
+                          >
+                            <a
+                              onClick={() =>
+                                handleActivateConversation(item.id)
+                              }
+                            >
+                              {item.name}
+                            </a>
+                            <small>
+                              <a
+                                onClick={() =>
+                                  handleDeleteConversation(item.id)
+                                }
+                              >
+                                <DeleteOutlined />
+                              </a>
+                            </small>
+                          </li>
+                        ))}
+                      </ul>
+                    </div>
+                  ))}
+                </HistoryDropdownPanel>
+              )}
+              placement="topRight"
+            >
               <a>
                 <HistoryOutlined />
               </a>
-            </Tooltip>
+            </Dropdown>
+            {headExtra}
           </Space>
         }
+        style={{ width: "initial" }}
       />
       <div className="body">
-        <div style={{ flex: "1 1 auto" }} />
-        <Card
-          title="历史记录"
-          size="small"
-          variant="borderless"
-          styles={{
-            header: {
-              padding: 0,
-              border: "none",
-            },
-            body: {
-              padding: 0,
-            },
-          }}
-        >
-          <ul className="conversation-list">
-            <li>
-              <a>
-                <MessageOutlined />
-                你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
-              </a>
-              <small>刚刚</small>
-            </li>
-            <li>
-              <a>
-                <MessageOutlined />
-                你好
-              </a>
-              <small>刚刚</small>
-            </li>
-          </ul>
-        </Card>
-        <ChatInput agentList={agentList} />
+        <div style={{ flex: "1 1 auto", overflowY: "auto" }}>
+          {messageList.length ? (
+            <MessageList
+              ref={messageListRef}
+              list={messageList}
+              onDeleteMessage={handleDeleteMessage}
+            />
+          ) : (
+            <EmptyMessage />
+          )}
+        </div>
+        {messageList.length === 0 && (
+          <Card
+            title="历史记录"
+            size="small"
+            variant="borderless"
+            styles={{
+              header: {
+                padding: 0,
+                border: "none",
+              },
+              body: {
+                padding: 0,
+              },
+            }}
+            style={{ padding: "12px 12px 0 12px" }}
+          >
+            <ul className="conversation-list">
+              {conversationList.slice(0, 3).map((item) => (
+                <li key={item.id}>
+                  <a>
+                    <MessageOutlined />
+                    {item.name}
+                  </a>
+                  <small>{formatTime(item.createdAt)}</small>
+                </li>
+              ))}
+            </ul>
+          </Card>
+        )}
+        <ChatInput
+          agentList={agentList}
+          style={{ padding: 12 }}
+          onUploading={fetch?.upload}
+          onSubmit={handleSendMessage}
+        />
       </div>
     </Root>
   );
 };
+
+const EmptyRoot = styled.div`
+  flex: 1 1 auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  padding: 12px;
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 12px;
+    text-align: center;
+  }
+
+  .logo {
+    width: 64px;
+    height: 64px;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    // background: var(--link-bg-color);
+    // border: 1px solid var(--ant-color-border);
+    color: var(--ant-color-info-text-active);
+  }
+
+  .title {
+    font-size: 18px;
+    font-weight: 600;
+    color: var(--ant-color-text);
+  }
+
+  .desc {
+    font-size: 14px;
+    color: var(--ant-color-text-secondary);
+  }
+`;
+
+const EmptyMessage: React.FC = () => {
+  return (
+    <EmptyRoot>
+      <div className="content">
+        <div className="logo">
+          <IconFont type="icon-ai-compute" style={{ fontSize: 60 }} />
+        </div>
+        <div className="title">与 智能助理 协作</div>
+        <div className="desc">
+          自动化执行常规开发任务，端到端高效完成，提高交付效率
+        </div>
+      </div>
+    </EmptyRoot>
+  );
+};
+
+const HistoryDropdownPanel = styled.div`
+  width: 260px;
+  padding: 8px;
+  .group {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    margin-bottom: 6px;
+  }
+  .group-title {
+    color: var(--ant-color-text-secondary);
+    font-size: 12px;
+  }
+  .group-list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+  }
+  .group-list li {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 6px;
+    padding: 6px 8px;
+    border-radius: 6px;
+    background: var(--link-bg-color);
+    cursor: pointer;
+    font-size: 13px;
+  }
+  .group-list li.actived {
+    background: var(--ant-color-primary-bg);
+  }
+  .group-list li a {
+    color: var(--ant-color-text);
+    flex: auto;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .group-list li small a {
+    color: var(--ant-color-error);
+  }
+`;
+
+const MessageRoot = styled.div`
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding-right: 8px;
+  overflow: auto;
+  scrollbar-width: none;
+  &::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+  &:hover {
+    scrollbar-width: thin;
+  }
+  &:hover::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+  &:hover::-webkit-scrollbar-thumb {
+    background: var(--ant-color-border);
+    border-radius: 4px;
+  }
+  &:hover::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  .msg {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    border-radius: var(--ant-border-radius);
+    // border: 1px solid var(--ant-color-border);
+    padding: 8px 10px;
+    background: var(--ant-color-bg-container);
+
+    .user-message {
+      background: var(--ant-color-primary-bg);
+      padding: 8px 10px;
+      max-width: 90%;
+      margin: 10px 0 10px auto;
+      position: relative;
+
+      .msg-tools {
+        position: absolute;
+        top: 0;
+        left: -25px;
+        display: none;
+      }
+
+      &:hover .msg-tools {
+        display: flex;
+      }
+
+      .msg-header {
+        justify-content: flex-end;
+        color: var(--ant-color-text-tertiary);
+        padding: 4px 0 8px 0;
+      }
+    }
+    .assistant-message {
+      .msg-header .msg-title {
+        color: var(--ant-color-primary);
+        padding: 8px 0;
+      }
+    }
+  }
+  .msg-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    color: var(--ant-color-text-secondary);
+    font-size: 12px;
+  }
+  .msg-title {
+    font-weight: 600;
+    color: var(--ant-color-text);
+  }
+  .msg-content {
+    color: var(--ant-color-text);
+    font-size: 13px;
+    line-height: 1.6;
+    white-space: pre-wrap;
+  }
+  .msg-meta {
+    display: flex;
+    align-items: center;
+    gap: 0 8px;
+    flex-wrap: wrap;
+
+    .ant-tag {
+      padding-inline: 0;
+    }
+  }
+  .msg-section {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+  }
+  .extra-list {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+  .extra-item {
+    // display: flex;
+    // align-items: center;
+    // gap: 6px;
+    font-size: 12px;
+    color: var(--ant-color-text-secondary);
+
+    .ant-tag {
+      margin-right: 6px;
+    }
+  }
+`;
+
+type MessageListRef = {
+  scrollToBottom: () => void;
+};
+
+const MessageList = forwardRef<
+  MessageListRef,
+  { list: ChatMessageType[]; onDeleteMessage: (id: string) => void }
+>(({ list, onDeleteMessage }, forwardRef) => {
+  const ref = useRef<HTMLDivElement>(null);
+
+  const scrollToBottom = () => {
+    setTimeout(() => {
+      if (ref.current) {
+        ref.current.scrollTop = ref.current.scrollHeight;
+      }
+    }, 100);
+  };
+
+  useImperativeHandle(forwardRef, () => ({
+    scrollToBottom,
+  }));
+
+  return (
+    <MessageRoot className="message-list" ref={ref}>
+      {list.map((msg) => (
+        <div className="msg" key={msg.id}>
+          <div className="user-message">
+            <Space size={4} orientation="vertical" className="msg-tools">
+              <Popconfirm
+                title="确认删除吗？"
+                okText="确认"
+                cancelText="取消"
+                onConfirm={() => onDeleteMessage(msg.id)}
+              >
+                <Tooltip title="删除">
+                  <Button type="link" size="small" icon={<DeleteOutlined />} />
+                </Tooltip>
+              </Popconfirm>
+              {/* <Tooltip title="重新发送">
+                  <Button type="link" size="small" icon={<ReloadOutlined />} />
+                </Tooltip> */}
+            </Space>
+            <div className="msg-header">
+              {/* <span className="msg-title">用户</span> */}
+              <span>{formatTime(msg.createdAt)}</span>
+            </div>
+            <div className="msg-content">{msg.question}</div>
+            {msg.files?.length || msg.agents?.length ? (
+              <div className="msg-meta">
+                {msg.files?.map((f) => (
+                  <Tag key={f.id} color="processing">
+                    <IconFont type="icon-paper-clip" /> {f.name}
+                  </Tag>
+                ))}
+                {msg.agents?.map((a) => (
+                  <Tag key={a.id} color="blue">
+                    <IconFont type="icon-at" /> {a.name}
+                  </Tag>
+                ))}
+              </div>
+            ) : null}
+          </div>
+          {/* <div
+            style={{
+              height: 1,
+              background: "var(--ant-color-border)",
+              opacity: 0.5,
+            }}
+          /> */}
+          <div className="assistant-message">
+            <div className="msg-header">
+              <span className="msg-title">
+                <RobotOutlined /> 智能助理
+              </span>
+              {/* <span>{msg.createdAt}</span> */}
+            </div>
+            <div className="msg-section">
+              {msg.sending ? (
+                <Skeleton active />
+              ) : (
+                <>
+                  <div className="msg-content">{msg.answer?.answer || ""}</div>
+                  {!!msg.answer?.extra?.length && (
+                    <div className="extra-list">
+                      {msg.answer.extra.map((e: any, idx: number) => (
+                        <div className="extra-item" key={idx}>
+                          <Tag color="gold">{e.element}</Tag>
+                          <span>{e.action}</span>
+                          {/* <span>·</span>
+                        <span>{e.area}</span> */}
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </>
+              )}
+            </div>
+          </div>
+        </div>
+      ))}
+    </MessageRoot>
+  );
+});