Merge pull request #476 from easyops-cn/steve/sidebar

Steve/sidebar

Author: weareoutman

bricks/advanced/src/jsx.ts

@@ -60,7 +60,7 @@ declare global {
         HTMLAttributes<EoNextTable>,
         EoNextTable
       > &
-        Omit<NextTableProps, "columns"> & {
+        Omit<NextTableProps, "columns" | "cell"> & {
           columns?: Array<
             Omit<ColumnProp, "useBrick" | "headerBrick"> & {
               align?: string;
@@ -82,6 +82,19 @@ declare global {
               };
             }
           >;
+          cell?: {
+            render?: (data: {
+              rowData: Record<string, any>;
+              cellData: any;
+              columnKey: string | number;
+            }) => React.ReactNode;
+            header?: {
+              render?: (data: {
+                title: string;
+                columnKey: string | number;
+              }) => React.ReactNode;
+            };
+          };
           onPageChange?: (
             event: CustomEvent<{ page: number; pageSize: number }>
           ) => void;

bricks/ai-portal/src/chat-panel/index.tsx

@@ -1,8 +1,10 @@
 import React, {
   createRef,
   forwardRef,
+  useCallback,
   useEffect,
   useImperativeHandle,
+  useMemo,
   useRef,
   useState,
 } from "react";
@@ -19,7 +21,10 @@ import { http } from "@next-core/http";
 import styles from "./styles.module.css";
 import type { ChatInput } from "../chat-input";
 import type {
+  ActiveImages,
   ChatPayload,
+  CommandPayload,
+  FileInfo,
   RequestStore,
   UploadOptions,
 } from "../shared/interfaces";
@@ -35,6 +40,9 @@ import floatingStyles from "../shared/FloatingButton.module.css";
 import backgroundImage from "../home-container/images/background.png";
 import { DONE_STATES } from "../shared/constants";
 import { WrappedChatInput, WrappedIcon } from "../shared/bricks";
+import { FilePreview } from "../shared/FilePreview/FilePreview.js";
+import { ImagesPreview } from "../shared/FilePreview/ImagesPreview.js";
+import { TaskContext, type TaskContextValue } from "../shared/TaskContext";
 
 const WrappedModal = wrapBrick<
   Modal,
@@ -59,6 +67,8 @@ const { defineElement, property, method } = createDecorators();
 
 export interface ChatPanelProps {
   panelTitle?: string;
+  aiEmployeeId?: string;
+  cmd?: CommandPayload;
   width?: string | number;
   height?: string | number;
   placeholder?: string;
@@ -78,6 +88,12 @@ class ChatPanel extends ReactNextElement implements ChatPanelProps {
   @property()
   accessor panelTitle: string | undefined;
 
+  @property()
+  accessor aiEmployeeId: string | undefined;
+
+  @property({ attribute: false })
+  accessor cmd: CommandPayload | undefined;
+
   @property({ attribute: false }) accessor width: string | number | undefined;
 
   @property({ attribute: false }) accessor height: string | number | undefined;
@@ -100,11 +116,23 @@ class ChatPanel extends ReactNextElement implements ChatPanelProps {
     this.#ref.current?.close();
   }
 
+  @method()
+  send(payload: ChatPayload) {
+    this.#ref.current?.send(payload);
+  }
+
+  @method()
+  showFile(file: FileInfo) {
+    this.#ref.current?.showFile(file);
+  }
+
   render() {
     return (
       <ChatPanelComponent
         ref={this.#ref}
         panelTitle={this.panelTitle}
+        aiEmployeeId={this.aiEmployeeId}
+        cmd={this.cmd}
         width={this.width}
         height={this.height}
         placeholder={this.placeholder}
@@ -122,11 +150,15 @@ interface ChatPanelComponentProps extends ChatPanelProps {
 interface ChatPanelRef {
   open: () => void;
   close: () => void;
+  send: (payload: ChatPayload) => void;
+  showFile: (file: FileInfo) => void;
 }
 
 function LegacyChatPanelComponent(
   {
     panelTitle,
+    aiEmployeeId,
+    cmd,
     width,
     height,
     placeholder,
@@ -137,15 +169,6 @@ function LegacyChatPanelComponent(
   const modalRef = useRef<Modal>(null);
   const inputRef = useRef<ChatInput>(null);
 
-  useImperativeHandle(ref, () => ({
-    open: () => {
-      modalRef.current?.open();
-    },
-    close: () => {
-      modalRef.current?.close();
-    },
-  }));
-
   const [submitDisabled, setSubmitDisabled] = useState(false);
 
   const [conversationId, setConversationId] = useState<string | null>(null);
@@ -198,105 +221,148 @@ function LegacyChatPanelComponent(
     scrollContentRef
   );
 
-  const handleChatSubmit = async (e: CustomEvent<ChatPayload>) => {
-    if (conversationId) {
-      const { content, ...extra } = e.detail;
-      humanInputRef.current?.(e.detail.content, undefined, extra);
-      return;
-    }
-    setSubmitDisabled(true);
-    try {
-      const res = await http.post<{
-        data: { conversationId: string };
-      }>("api/gateway/logic.llm.aiops_service/api/v1/elevo/conversations", {});
-      const conversationId = res.data.conversationId;
-      setConversationId(conversationId);
-      setInitialRequest({
-        ...e.detail,
-        conversationId: conversationId,
-      });
-    } catch (e) {
-      handleHttpError(e);
-    } finally {
-      setSubmitDisabled(false);
-    }
-  };
+  const handleChatSubmit = useCallback(
+    async (payload: ChatPayload) => {
+      if (conversationId) {
+        const { content, ...extra } = payload;
+        humanInputRef.current?.(content, undefined, {
+          ...extra,
+          ...(aiEmployeeId ? { aiEmployeeId } : null),
+          ...(cmd ? { cmd } : null),
+        });
+        return;
+      }
+      setSubmitDisabled(true);
+      try {
+        const res = await http.post<{
+          data: { conversationId: string };
+        }>(
+          "api/gateway/logic.llm.aiops_service/api/v1/elevo/conversations",
+          {}
+        );
+        const conversationId = res.data.conversationId;
+        setConversationId(conversationId);
+        setInitialRequest({
+          ...payload,
+          ...(aiEmployeeId ? { aiEmployeeId } : null),
+          ...(cmd ? { cmd } : null),
+          conversationId: conversationId,
+        });
+      } catch (e) {
+        handleHttpError(e);
+      } finally {
+        setSubmitDisabled(false);
+      }
+    },
+    [aiEmployeeId, cmd, conversationId, humanInputRef]
+  );
+
+  const [activeFile, setActiveFile] = useState<FileInfo | null>(null);
+  const [activeImages, setActiveImages] = useState<ActiveImages | null>(null);
+
+  const taskContextValue = useMemo(
+    () =>
+      ({
+        setActiveFile,
+        setActiveImages,
+      }) as TaskContextValue,
+    []
+  );
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      open: () => {
+        modalRef.current?.open();
+      },
+      close: () => {
+        modalRef.current?.close();
+      },
+      send: (payload: ChatPayload) => {
+        handleChatSubmit(payload);
+      },
+      showFile: (file: FileInfo) => {
+        setActiveFile(file);
+      },
+    }),
+    [handleChatSubmit]
+  );
 
   return (
-    <WrappedModal
-      modalTitle={panelTitle}
-      width={width}
-      height={height}
-      themeVariant="elevo"
-      maskClosable
-      noFooter
-      headerBordered
-      fullscreenButton
-      background={`fixed url(${backgroundImage}) center center / cover no-repeat`}
-      onOpen={() => {
-        setTimeout(() => {
-          inputRef.current?.focus();
-        }, 100);
-      }}
-      ref={modalRef}
-    >
-      <div className={styles.panel}>
-        {!conversationId ? (
-          <div className={styles.main} />
-        ) : conversationAvailable && depsReady ? (
-          <div className={styles.main}>
-            <div className={styles.chat} ref={scrollContainerRef}>
-              <div className={styles.messages} ref={scrollContentRef}>
-                {messages.map((msg, index, list) => (
-                  <div className={styles.message} key={index}>
-                    {msg.role === "user" ? (
-                      <UserMessage
-                        content={msg.content}
-                        cmd={msg.cmd}
-                        files={msg.files}
-                      />
-                    ) : (
-                      <AssistantMessage
-                        chunks={msg.chunks}
-                        scopeState={conversation.state}
-                        isLatest={index === list.length - 1}
-                      />
-                    )}
-                  </div>
-                ))}
+    <TaskContext.Provider value={taskContextValue}>
+      <WrappedModal
+        modalTitle={panelTitle}
+        width={width}
+        height={height}
+        themeVariant="elevo"
+        maskClosable
+        noFooter
+        headerBordered
+        fullscreenButton
+        background={`fixed url(${backgroundImage}) center center / cover no-repeat`}
+        onOpen={() => {
+          setTimeout(() => {
+            inputRef.current?.focus();
+          }, 100);
+        }}
+        ref={modalRef}
+      >
+        <div className={styles.panel}>
+          {!conversationId ? (
+            <div className={styles.main} />
+          ) : conversationAvailable && depsReady ? (
+            <div className={styles.main}>
+              <div className={styles.chat} ref={scrollContainerRef}>
+                <div className={styles.messages} ref={scrollContentRef}>
+                  {messages.map((msg, index, list) => (
+                    <div className={styles.message} key={index}>
+                      {msg.role === "user" ? (
+                        <UserMessage content={msg.content} files={msg.files} />
+                      ) : (
+                        <AssistantMessage
+                          chunks={msg.chunks}
+                          scopeState={conversation.state}
+                          isLatest={index === list.length - 1}
+                        />
+                      )}
+                    </div>
+                  ))}
+                </div>
               </div>
+              <button
+                className={`${scrollStyles["scroll-down"]} ${floatingStyles["floating-button"]}`}
+                style={{ bottom: "30px" }}
+                hidden={!scrollable}
+                onClick={scrollToBottom}
+              >
+                <WrappedIcon lib="antd" icon="down" />
+              </button>
             </div>
-            <button
-              className={`${scrollStyles["scroll-down"]} ${floatingStyles["floating-button"]}`}
-              style={{ bottom: "30px" }}
-              hidden={!scrollable}
-              onClick={scrollToBottom}
-            >
-              <WrappedIcon lib="antd" icon="down" />
-            </button>
-          </div>
-        ) : (
-          <div className={styles["loading-icon"]}>
-            <WrappedIcon
-              lib="antd"
-              theme="outlined"
-              icon="loading-3-quarters"
-              spinning
+          ) : (
+            <div className={styles["loading-icon"]}>
+              <WrappedIcon
+                lib="antd"
+                theme="outlined"
+                icon="loading-3-quarters"
+                spinning
+              />
+            </div>
+          )}
+          <div className={styles.input}>
+            <WrappedChatInput
+              ref={inputRef}
+              placeholder={placeholder}
+              suggestionsPlacement="top"
+              submitDisabled={submitDisabled || !canChat}
+              supportsTerminate
+              uploadOptions={uploadOptions}
+              onChatSubmit={(e) => handleChatSubmit(e.detail)}
             />
           </div>
-        )}
-        <div className={styles.input}>
-          <WrappedChatInput
-            ref={inputRef}
-            placeholder={placeholder}
-            suggestionsPlacement="top"
-            submitDisabled={submitDisabled || !canChat}
-            supportsTerminate
-            uploadOptions={uploadOptions}
-            onChatSubmit={handleChatSubmit}
-          />
         </div>
-      </div>
-    </WrappedModal>
+      </WrappedModal>
+      {activeFile && <FilePreview file={activeFile} fromModal />}
+      {activeImages && <ImagesPreview images={activeImages} fromModal />}
+    </TaskContext.Provider>
   );
 }

bricks/ai-portal/src/chat-stream/Aside/FlowApp/FlowApp.tsx

@@ -151,6 +151,7 @@ function ActivityDetail({ activity }: ActivityDetailProps) {
               {msg.role === "user" ? (
                 <UserMessage
                   content={msg.content}
+                  mentionedAiEmployeeId={msg.mentionedAiEmployeeId}
                   cmd={msg.cmd}
                   files={msg.files}
                 />