Merge pull request #481 from easyops-cn/steve/chat-panel

Steve/chat-panel

Author: weareoutman

bricks/advanced/src/jsx.ts

@@ -115,6 +115,7 @@ declare global {
               record: Record<string, any>;
             }>
           ) => void;
+          onRowClick?: (event: CustomEvent<Record<string, any>>) => void;
           onExpandedRowsChange?: (
             event: CustomEvent<(string | number)[]>
           ) => void;

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

@@ -1,4 +1,12 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, {
+  createRef,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from "react";
 import { createDecorators, type EventEmitter } from "@next-core/element";
 import { ReactNextElement, wrapBrick } from "@next-core/react-element";
 import { TextareaAutoResize } from "@next-shared/form";
@@ -67,7 +75,7 @@ export const WrappedActions = wrapBrick<
   onItemDragStart: "item.drag.start",
 });
 
-const { defineElement, property, event } = createDecorators();
+const { defineElement, property, event, method } = createDecorators();
 
 export interface ChatInputProps {
   placeholder?: string;
@@ -92,6 +100,8 @@ export interface ChatInputMapEvents {
   onTerminate: "terminate";
 }
 
+const ChatInputComponent = forwardRef(LegacyChatInputComponent);
+
 /**
  * 小型聊天输入框，用于对话等页面
  */
@@ -160,9 +170,17 @@ class ChatInput extends ReactNextElement implements ChatInputProps {
     this.#terminate.emit();
   };
 
+  #ref = createRef<ChatInputRef>();
+
+  @method()
+  setValue(value: string) {
+    this.#ref.current?.setValue(value);
+  }
+
   render() {
     return (
       <ChatInputComponent
+        ref={this.#ref}
         placeholder={this.placeholder}
         autoFocus={this.autoFocus}
         submitDisabled={this.submitDisabled}
@@ -181,28 +199,35 @@ class ChatInput extends ReactNextElement implements ChatInputProps {
   }
 }
 
+interface ChatInputRef {
+  setValue: (value: string) => void;
+}
+
 interface ChatInputComponentProps extends ChatInputProps {
   root: HTMLElement;
   onMessageSubmit: (value: string) => void;
   onChatSubmit: (payload: ChatPayload) => void;
   onTerminate: () => void;
 }
 
-function ChatInputComponent({
-  root,
-  placeholder,
-  autoFocus,
-  submitDisabled,
-  supportsTerminate,
-  terminating,
-  uploadOptions,
-  aiEmployees,
-  commands,
-  suggestionsPlacement,
-  onMessageSubmit,
-  onChatSubmit,
-  onTerminate,
-}: ChatInputComponentProps) {
+function LegacyChatInputComponent(
+  {
+    root,
+    placeholder,
+    autoFocus,
+    submitDisabled,
+    supportsTerminate,
+    terminating,
+    uploadOptions,
+    aiEmployees,
+    commands,
+    suggestionsPlacement,
+    onMessageSubmit,
+    onChatSubmit,
+    onTerminate,
+  }: ChatInputComponentProps,
+  ref: React.Ref<ChatInputRef>
+) {
   const containerRef = useRef<HTMLDivElement>(null);
 
   const [wrap, setWrap] = useState(false);
@@ -253,6 +278,20 @@ function ChatInputComponent({
     placement: suggestionsPlacement,
   });
 
+  useImperativeHandle(
+    ref,
+    () => ({
+      setValue: (value: string) => {
+        valueRef.current = value;
+        setValue(value);
+        setTimeout(() => {
+          textareaRef.current?.focus();
+        }, 100);
+      },
+    }),
+    [setValue, textareaRef, valueRef]
+  );
+
   useEffect(() => {
     if (!uploadEnabled) {
       resetFiles();

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

@@ -44,6 +44,8 @@ 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";
+import type { UseBrickConf } from "@next-core/types";
+import { ReactUseMultipleBricks } from "@next-core/react-runtime";
 
 const WrappedModal = wrapBrick<
   Modal,
@@ -74,6 +76,7 @@ export interface ChatPanelProps {
   height?: string | number;
   placeholder?: string;
   uploadOptions?: UploadOptions;
+  help?: { useBrick: UseBrickConf };
 }
 
 const ChatPanelComponent = forwardRef(LegacyChatPanelComponent);
@@ -105,6 +108,12 @@ class ChatPanel extends ReactNextElement implements ChatPanelProps {
   @property({ attribute: false })
   accessor uploadOptions: UploadOptions | undefined;
 
+  /**
+   * Show help messages when no conversation exists.
+   */
+  @property({ attribute: false })
+  accessor help: { useBrick: UseBrickConf } | undefined;
+
   #ref = createRef<ChatPanelRef>();
 
   @method()
@@ -117,6 +126,11 @@ class ChatPanel extends ReactNextElement implements ChatPanelProps {
     this.#ref.current?.close();
   }
 
+  @method()
+  setInputValue(content: string) {
+    this.#ref.current?.setInputValue(content);
+  }
+
   @method()
   send(payload: ChatPayload) {
     this.#ref.current?.send(payload);
@@ -138,6 +152,7 @@ class ChatPanel extends ReactNextElement implements ChatPanelProps {
         height={this.height}
         placeholder={this.placeholder}
         uploadOptions={this.uploadOptions}
+        help={this.help}
       />
     );
   }
@@ -151,6 +166,7 @@ interface ChatPanelComponentProps extends ChatPanelProps {
 interface ChatPanelRef {
   open: () => void;
   close: () => void;
+  setInputValue: (content: string) => void;
   send: (payload: ChatPayload) => void;
   showFile: (file: FileInfo) => void;
 }
@@ -164,6 +180,7 @@ function LegacyChatPanelComponent(
     height,
     placeholder,
     uploadOptions,
+    help,
   }: ChatPanelComponentProps,
   ref: React.Ref<ChatPanelRef>
 ) {
@@ -286,6 +303,9 @@ function LegacyChatPanelComponent(
       close: () => {
         modalRef.current?.close();
       },
+      setInputValue: (content: string) => {
+        inputRef.current?.setValue(content);
+      },
       send: (payload: ChatPayload) => {
         handleChatSubmit(payload);
       },
@@ -317,7 +337,11 @@ function LegacyChatPanelComponent(
       >
         <div className={styles.panel}>
           {!conversationId ? (
-            <div className={styles.main} />
+            <div className={styles.main}>
+              {help ? (
+                <ReactUseMultipleBricks useBrick={help.useBrick} />
+              ) : null}
+            </div>
           ) : conversationAvailable && depsReady ? (
             <div className={styles.main}>
               <div className={styles.chat} ref={scrollContainerRef}>

bricks/ai-portal/src/jsx.ts

@@ -345,7 +345,11 @@ declare global {
         HTMLAttributes<ChatPanel>,
         ChatPanel
       > &
-        ChatPanelProps;
+        Omit<ChatPanelProps, "help"> & {
+          help?: {
+            render: () => React.ReactNode;
+          };
+        };
     }
   }
 }

bricks/ai-portal/src/shared/ReadableCommand/ReadableCommand.tsx

@@ -82,6 +82,10 @@ export function getInitialContent(
           .slice(0, 1)
           .map((name) => `: ${name}`)
           .join("")}`;
+      case "serviceObject-createOrEdit":
+        return `/manage business object`;
+      case "serviceObjectInstance-createOrEdit":
+        return `/manage business object instance`;
       default:
         // unknown command type
         return `/${(cmd as CommandPayload).type}`;

bricks/ai-portal/src/shared/interfaces.ts

@@ -282,6 +282,8 @@ export type CommandPayload =
   | CommandPayloadServiceFlowCreate
   | CommandPayloadServiceFlowEdit
   | CommandPayloadGoalPlan
+  | CommandPayloadBusinessObjectManagement
+  | CommandPayloadBusinessInstanceManagement
   | LegacyCommandPayloadServiceFlowStarting;
 
 export interface BaseCommandPayload {
@@ -326,6 +328,25 @@ export interface CommandPayloadGoalPlan extends BaseCommandPayload {
   };
 }
 
+export interface CommandPayloadBusinessObjectManagement
+  extends BaseCommandPayload {
+  type: "serviceObject-createOrEdit";
+  payload: {
+    spaceInstanceId: string;
+    serviceObjectId?: string;
+  };
+}
+
+export interface CommandPayloadBusinessInstanceManagement
+  extends BaseCommandPayload {
+  type: "serviceObjectInstance-createOrEdit";
+  payload: {
+    spaceInstanceId: string;
+    serviceObjectId: string;
+    instanceId?: string;
+  };
+}
+
 /** @deprecated Use `payload` instead */
 export interface LegacyCommandPayloadServiceFlowStarting {
   type: "serviceFlowStarting";