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

feat(): new brick: chat-panel

Author: weareoutman

bricks/ai-portal/docs/chat-panel.md

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

bricks/ai-portal/src/blank-state/index.spec.tsx

@@ -17,20 +17,21 @@ describe("ai-portal.blank-state", () => {
       document.body.appendChild(element);
     });
     expect(element.shadowRoot?.childNodes).toMatchInlineSnapshot(`
-      NodeList [
-        <style>
-          styles.shadow.css
-        </style>,
-        <img
-          height="138"
-          src="[email protected]"
-          width="184"
-        />,
-        <p>
-          No goals
-        </p>,
-      ]
-    `);
+NodeList [
+  <style>
+    styles.shadow.css
+  </style>,
+  <img
+    height="138"
+    src="[email protected]"
+    width="184"
+  />,
+  <p>
+    No goals
+  </p>,
+  <slot />,
+]
+`);
 
     act(() => {
       document.body.removeChild(element);
@@ -46,18 +47,19 @@ describe("ai-portal.blank-state", () => {
       document.body.appendChild(element);
     });
     expect(element.shadowRoot?.childNodes).toMatchInlineSnapshot(`
-      NodeList [
-        <style>
-          styles.shadow.css
-        </style>,
-        <img
-          height="138"
-          src="[email protected]"
-          width="184"
-        />,
-        <p />,
-      ]
-    `);
+NodeList [
+  <style>
+    styles.shadow.css
+  </style>,
+  <img
+    height="138"
+    src="[email protected]"
+    width="184"
+  />,
+  <p />,
+  <slot />,
+]
+`);
 
     act(() => {
       document.body.removeChild(element);

bricks/ai-portal/src/blank-state/index.tsx

@@ -50,6 +50,7 @@ function BlankStateComponent({ illustration, description }: BlankStateProps) {
     <>
       <img src={getIllustrationSrc(illustration)} width={184} height={138} />
       <p>{description}</p>
+      <slot />
     </>
   );
 }

bricks/ai-portal/src/blank-state/styles.shadow.css

@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 26px;
+  gap: 16px;
 }
 
 :host([hidden]) {
@@ -11,5 +11,5 @@
 
 p {
   color: rgba(0, 0, 0, 0.45);
-  margin: 0;
+  margin: 10px 0 0;
 }

bricks/ai-portal/src/bootstrap.ts

@@ -33,3 +33,4 @@ import "./running-flow/index.js";
 import "./notice-dropdown/index.js";
 import "./notice-list/index.js";
 import "./gantt-chart/index.js";
+import "./chat-panel/index.js";