Merge pull request #110 from easyops-cn/steve/ai-portal

feat(): new brick: home-container

Author: weareoutman

bricks/ai-portal/docs/home-container.md

@@ -0,0 +1,11 @@
+构件 `ai-portal.home-container`
+
+## Examples
+
+### Basic
+
+```yaml preview
+brick: ai-portal.home-container
+properties:
+  textContent: Hello world
+```

bricks/ai-portal/src/bootstrap.ts

@@ -1,2 +1,3 @@
 import "./cruise-canvas/index.js";
 import "./chat-box/index.js";
+import "./home-container/index.js";

bricks/ai-portal/src/chat-box/i18n.ts

@@ -1,15 +1,15 @@
 import { i18n } from "@next-core/i18n";
 
 export enum K {
-  HOW_CAN_I_HELP = "HOW_CAN_I_HELP",
+  ASK_ANY_THING = "ASK_ANYTHING",
 }
 
 const en: Locale = {
-  [K.HOW_CAN_I_HELP]: "How can I help?",
+  [K.ASK_ANY_THING]: "Ask anything",
 };
 
 const zh: Locale = {
-  [K.HOW_CAN_I_HELP]: "有什么可以帮您的？",
+  [K.ASK_ANY_THING]: "询问任何问题",
 };
 
 export const NS = "bricks/ai-portal/chat-box";

bricks/ai-portal/src/chat-box/images/[email protected]

@@ -1,10 +1,20 @@
 import { describe, test, expect, jest } from "@jest/globals";
 import { act } from "react-dom/test-utils";
+import { fireEvent } from "@testing-library/dom";
 import "./";
 import type { ChatBox } from "./index.js";
 
 jest.mock("@next-core/theme", () => ({}));
 
+customElements.define(
+  "eo-icon",
+  class extends HTMLElement {
+    lib: string | undefined;
+    prefix: any;
+    icon: string | undefined;
+  }
+);
+
 describe("ai-portal.chat-box", () => {
   test("basic usage", async () => {
     const element = document.createElement("ai-portal.chat-box") as ChatBox;
@@ -21,4 +31,86 @@ describe("ai-portal.chat-box", () => {
     });
     expect(element.shadowRoot?.childNodes.length).toBe(0);
   });
+
+  test("auto focus", async () => {
+    const element = document.createElement("ai-portal.chat-box") as ChatBox;
+    element.autoFocus = true;
+    element.placeholder = "Please enter your message";
+
+    act(() => {
+      document.body.appendChild(element);
+    });
+
+    const textarea = element.shadowRoot?.querySelector(
+      "textarea"
+    ) as HTMLTextAreaElement;
+    expect(textarea).not.toBeNull();
+    expect(textarea.placeholder).toBe("Please enter your message");
+    const focus = jest.spyOn(textarea, "focus");
+
+    await act(async () => {
+      await Promise.resolve();
+    });
+    expect(focus).toBeCalled();
+
+    act(() => {
+      document.body.removeChild(element);
+    });
+  });
+
+  test("submit by click", () => {
+    const element = document.createElement("ai-portal.chat-box") as ChatBox;
+
+    const onSubmit = jest.fn();
+    element.addEventListener("message.submit", (e: Event) => {
+      onSubmit((e as CustomEvent).detail);
+    });
+
+    act(() => {
+      document.body.appendChild(element);
+    });
+
+    const textarea = element.shadowRoot?.querySelector(
+      "textarea"
+    ) as HTMLTextAreaElement;
+    expect(textarea).not.toBeNull();
+
+    act(() => {
+      fireEvent.change(textarea, { target: { value: "Hello" } });
+      fireEvent.click(element.shadowRoot!.querySelector("button")!);
+    });
+    expect(onSubmit).toBeCalledWith("Hello");
+
+    act(() => {
+      document.body.removeChild(element);
+    });
+  });
+
+  test("submit by enter", () => {
+    const element = document.createElement("ai-portal.chat-box") as ChatBox;
+
+    const onSubmit = jest.fn();
+    element.addEventListener("message.submit", (e: Event) => {
+      onSubmit((e as CustomEvent).detail);
+    });
+
+    act(() => {
+      document.body.appendChild(element);
+    });
+
+    const textarea = element.shadowRoot?.querySelector(
+      "textarea"
+    ) as HTMLTextAreaElement;
+    expect(textarea).not.toBeNull();
+
+    act(() => {
+      fireEvent.change(textarea, { target: { value: "Hello" } });
+      fireEvent.keyDown(textarea, { key: "Enter" });
+    });
+    expect(onSubmit).toBeCalledWith("Hello");
+
+    act(() => {
+      document.body.removeChild(element);
+    });
+  });
 });

bricks/ai-portal/src/chat-box/index.spec.tsx

@@ -1,27 +1,29 @@
-import React, { useCallback, useRef } from "react";
+import React, { useCallback, useEffect, useRef } from "react";
 import { createDecorators, type EventEmitter } from "@next-core/element";
 import { ReactNextElement, wrapBrick } from "@next-core/react-element";
-import { TextareaAutoResize } from "@next-shared/form";
+import {
+  TextareaAutoResize,
+  type TextareaAutoResizeRef,
+} from "@next-shared/form";
 import "@next-core/theme";
 import { initializeI18n } from "@next-core/i18n";
-import type { Button, ButtonProps } from "@next-bricks/basic/button";
+import type {
+  GeneralIcon,
+  GeneralIconProps,
+} from "@next-bricks/icons/general-icon";
 import { K, NS, locales, t } from "./i18n.js";
 import styleText from "./styles.shadow.css";
 
 initializeI18n(NS, locales);
 
-const WrappedButton = wrapBrick<Button, ButtonProps>("eo-button");
-
-const SEND_ICON: ButtonProps["icon"] = {
-  lib: "fa",
-  prefix: "fas",
-  icon: "arrow-up",
-};
+const WrappedIcon = wrapBrick<GeneralIcon, GeneralIconProps>("eo-icon");
 
 const { defineElement, property, event } = createDecorators();
 
 export interface ChatBoxProps {
   disabled?: boolean;
+  placeholder?: string;
+  autoFocus?: boolean;
 }
 
 /**
@@ -35,6 +37,12 @@ class ChatBox extends ReactNextElement implements ChatBoxProps {
   @property({ type: Boolean })
   accessor disabled: boolean | undefined;
 
+  @property()
+  accessor placeholder: string | undefined;
+
+  @property({ type: Boolean })
+  accessor autoFocus: boolean | undefined;
+
   @event({ type: "message.submit" })
   accessor #messageSubmit!: EventEmitter<string>;
 
@@ -46,6 +54,8 @@ class ChatBox extends ReactNextElement implements ChatBoxProps {
     return (
       <ChatBoxComponent
         disabled={this.disabled}
+        placeholder={this.placeholder}
+        autoFocus={this.autoFocus}
         onSubmit={this.#handleMessageSubmit}
       />
     );
@@ -59,9 +69,12 @@ export interface ChatBoxComponentProps extends ChatBoxProps {
 
 export function ChatBoxComponent({
   disabled,
+  placeholder,
+  autoFocus,
   onSubmit,
 }: ChatBoxComponentProps) {
   const containerRef = useRef<HTMLDivElement>(null);
+  const textareaRef = useRef<TextareaAutoResizeRef>(null);
   const valueRef = useRef("");
 
   const handleSubmit = useCallback(
@@ -82,26 +95,31 @@ export function ChatBoxComponent({
     onSubmit?.(valueRef.current);
   }, [onSubmit]);
 
+  useEffect(() => {
+    if (autoFocus) {
+      Promise.resolve().then(() => {
+        textareaRef.current?.focus();
+      });
+    }
+  }, []);
+
   return (
     <div className="container" ref={containerRef}>
       <TextareaAutoResize
         containerRef={containerRef}
+        ref={textareaRef}
         minRows={5}
-        paddingSize={24}
+        paddingSize={20}
         autoResize
         disabled={disabled}
-        placeholder={t(K.HOW_CAN_I_HELP)}
+        placeholder={placeholder ?? t(K.ASK_ANY_THING)}
         submitWhen="enter-without-shift"
         onSubmit={handleSubmit}
         onChange={handleChange}
       />
-      <WrappedButton
-        className="btn-send"
-        shape="circle"
-        icon={SEND_ICON}
-        disabled={disabled}
-        onClick={handleSubmitClick}
-      />
+      <button className="btn-send" onClick={handleSubmitClick}>
+        <WrappedIcon lib="fa" prefix="fas" icon="arrow-up" />
+      </button>
     </div>
   );
 }

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

@@ -1,5 +1,6 @@
 :host {
   display: block;
+  color: #262626;
 }
 
 :host([hidden]) {
@@ -12,38 +13,58 @@
 
 .container {
   position: relative;
+  background-color: #e1e3ec;
+  background-image: url("./images/[email protected]");
+  background-size: 694px 144px;
+  background-position: top left;
+  background-repeat: no-repeat;
+  box-shadow: inset 0px 2px 5px 1px rgba(42, 46, 59, 0.1);
+  border-radius: 20px;
+  padding: 12px;
 }
 
 textarea {
   display: block;
   width: 100%;
-  padding: 12px 18px;
+  padding: 10px 16px;
   color: var(--antd-input-color);
-  background: var(--antd-input-bg);
-  box-sizing: border-box;
-  border-radius: 1em;
-  border: 1px solid var(--antd-input-border-color);
+  background: rgba(255, 255, 255, 0.8);
+  border-radius: 14px;
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.5);
   font-size: 14px;
   line-height: 22px;
-  height: 32px;
-}
-
-textarea:not(:disabled):hover {
-  border: 1px solid var(--antd-input-hover-border-color);
+  height: 132px;
 }
 
-textarea:not(:disabled):focus {
-  border: 1px solid var(--antd-input-focus-border-color);
-  outline: 0;
-  box-shadow: 0 0 0 2px rgb(0 113 235 / 20%);
+textarea::placeholder {
+  color: rgba(0, 0, 0, 0.4);
 }
 
-textarea::placeholder {
-  color: var(--antd-input-placeholder-color);
+textarea:focus-visible {
+  outline: none;
 }
 
 .btn-send {
   position: absolute;
-  bottom: 1em;
-  right: 1em;
+  bottom: 26px;
+  right: 26px;
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.06);
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  color: inherit;
+}
+
+.btn-send:hover {
+  background: rgba(0, 0, 0, 0.08);
+}
+
+.btn-send:active {
+  background: rgba(0, 0, 0, 0.15);
 }

bricks/ai-portal/src/chat-box/styles.shadow.css

@@ -1,5 +1,6 @@
 .node-instruction {
   max-width: 437px;
+  max-width: min(437px, 90vw);
   background: rgba(255, 255, 255, 0.2);
   box-shadow: 0px 4px 10px 0px rgba(54, 64, 80, 0.08);
   border-radius: 9999px;

bricks/ai-portal/src/cruise-canvas/NodeInstruction/NodeInstruction.module.css

@@ -1,14 +1,22 @@
 .node-job {
   width: 330px;
+  max-width: 90vw;
   background: linear-gradient(180deg, #f5f8ff 0%, #edf0f9 100%);
   box-shadow:
     0px 4px 10px 0px rgba(177, 149, 207, 0.4),
     0px 2px 4px 0px rgba(0, 0, 0, 0.06);
   border-radius: 12px;
-  border: 1px solid #ffffff;
+  border: 1px solid #fff;
   padding: 8px;
 }
 
+.ask-user {
+  background: rgba(255, 255, 255, 0.4);
+  box-shadow: 0px 4px 10px 0px rgba(54, 64, 80, 0.18);
+  border-color: rgba(255, 255, 255, 0.5);
+  backdrop-filter: blur(28px);
+}
+
 .error {
   box-shadow: inset 0px 0px 8px 2px rgba(242, 76, 37, 0.6);
   border-color: rgba(242, 76, 37, 0.6);