create

dashboard-v4/dashboard/src/components/chat/MsgContainer.tsx

@@ -0,0 +1,30 @@
+interface IWidget {
+  children?: React.ReactNode;
+}
+const MsgContainer = ({ children }: IWidget) => {
+  return (
+    <div
+      style={{
+        display: "flex",
+        justifyContent: "flex-start",
+      }}
+    >
+      <div
+        style={{
+          maxWidth: "95%",
+          backgroundColor: "#ffffff",
+          color: "black",
+          borderRadius: "8px",
+          padding: "16px",
+          border: "none",
+          boxShadow: "0 1px 2px rgba(0, 0, 0, 0.03)",
+          textAlign: "left",
+        }}
+      >
+        {children}
+      </div>
+    </div>
+  );
+};
+
+export default MsgContainer;

dashboard-v4/dashboard/src/components/chat/MsgError.tsx

@@ -0,0 +1,23 @@
+import { Alert, Button } from "antd";
+import { ReloadOutlined } from "@ant-design/icons";
+interface IWidget {
+  message?: string;
+  onRefresh?: () => void;
+}
+const MsgError = ({ message, onRefresh }: IWidget) => {
+  return (
+    <Alert
+      type="error"
+      closable={false}
+      showIcon
+      message={message}
+      action={
+        <Button type="text" icon={<ReloadOutlined />} onClick={onRefresh}>
+          刷新
+        </Button>
+      }
+    />
+  );
+};
+
+export default MsgError;

dashboard-v4/dashboard/src/components/chat/MsgLoading.tsx

@@ -0,0 +1,20 @@
+import MsgContainer from "./MsgContainer";
+import { IAiModel } from "../api/ai";
+import User from "../auth/User";
+import { Space } from "antd";
+
+interface IWidget {
+  model?: IAiModel;
+}
+const MsgLoading = ({ model }: IWidget) => {
+  return (
+    <MsgContainer>
+      <Space>
+        <User {...model?.user} />
+        正在思考……
+      </Space>
+    </MsgContainer>
+  );
+};
+
+export default MsgLoading;

dashboard-v4/dashboard/src/components/chat/MsgSystem.tsx

@@ -0,0 +1,42 @@
+import { useState } from "react";
+
+interface IWidget {
+  value?: string;
+}
+const MsgSystem = ({ value }: IWidget) => {
+  const [display, setDisplay] = useState(false);
+  return (
+    <div
+      style={{
+        backgroundColor: "#fafafa",
+        border: "1px dashed #d9d9d9",
+        borderRadius: 4,
+        marginTop: 8,
+        fontSize: 12,
+        color: "#888",
+        padding: 8,
+      }}
+    >
+      <div
+        style={{ cursor: "pointer", userSelect: "none" }}
+        onClick={() => {
+          setDisplay(!display);
+        }}
+      >
+        {display ? "▼ 收起资料" : "▶ 展开资料"}
+      </div>
+      <div style={{ display: display ? "block" : "none" }}>
+        <pre
+          style={{
+            whiteSpace: "pre-wrap",
+            wordBreak: "break-word",
+            marginTop: 4,
+          }}
+        >
+          {value}
+        </pre>
+      </div>
+    </div>
+  );
+};
+export default MsgSystem;

dashboard-v4/dashboard/src/components/chat/MsgTyping.tsx

@@ -0,0 +1,23 @@
+import MsgContainer from "./MsgContainer";
+import { IAiModel } from "../api/ai";
+import Marked from "../general/Marked";
+import User from "../auth/User";
+
+interface IWidget {
+  model?: IAiModel;
+  text?: string;
+}
+const MsgTyping = ({ model, text }: IWidget) => {
+  return (
+    <MsgContainer>
+      <div>
+        <User {...model?.user} />
+      </div>
+      <div>
+        <Marked text={text} />
+      </div>
+    </MsgContainer>
+  );
+};
+
+export default MsgTyping;