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

fix(): refine node size

Author: weareoutman

bricks/ai-portal/src/cruise-canvas/CmdbInstanceDetail/CmdbInstanceDetail.tsx

@@ -91,7 +91,7 @@ export function CmdbInstanceDetail({
       >
         <AsyncWrappedDescriptions
           themeVariant="elevo"
-          column={1}
+          column={list.length > 6 ? 2 : 1}
           dataSource={detail}
           list={list}
         />

bricks/ai-portal/src/cruise-canvas/EnhancedMarkdown/EnhancedMarkdown.tsx

@@ -21,7 +21,10 @@ export function EnhancedMarkdown(props: MarkdownComponentProps) {
         if (el === ref.current) {
           break;
         }
-        if (el instanceof HTMLTableElement && el.scrollWidth > el.clientWidth) {
+        if (
+          (el instanceof HTMLTableElement || el instanceof HTMLPreElement) &&
+          el.scrollWidth > el.clientWidth
+        ) {
           found = true;
           break;
         }

bricks/ai-portal/src/cruise-canvas/NodeJob/NodeJob.tsx

@@ -59,6 +59,7 @@ export function NodeJob({ job, state, active }: NodeJobProps): JSX.Element {
   const [toolMarkdownContent, cmdbInstanceDetails, sizeLarge] = useMemo(() => {
     const contents: string[] = [];
     const instanceDetails: CmdbInstanceDetailData[] = [];
+    let large = false;
     job.messages?.forEach((message) => {
       if (message.role === "tool") {
         for (const part of message.parts) {
@@ -69,6 +70,14 @@ export function NodeJob({ job, state, active }: NodeJobProps): JSX.Element {
                 break;
               case "cmdb_instance_detail":
                 instanceDetails.push(part.data as CmdbInstanceDetailData);
+                if (!large) {
+                  large =
+                    Object.keys(
+                      part.data?.outputSchema?.type === "object"
+                        ? part.data.outputSchema.properties
+                        : part.data.detail
+                    ).length > 6;
+                }
                 break;
             }
           }
@@ -78,7 +87,7 @@ export function NodeJob({ job, state, active }: NodeJobProps): JSX.Element {
 
     const markdownContent = contents.join("");
 
-    const large = RegExpLargeTableInMarkdown.test(markdownContent);
+    large = large || RegExpLargeTableInMarkdown.test(markdownContent);
 
     return [markdownContent, instanceDetails, large] as const;
   }, [job.messages]);
@@ -90,7 +99,7 @@ export function NodeJob({ job, state, active }: NodeJobProps): JSX.Element {
         [styles["ask-user"]]: generalAskUser,
         [styles["fit-content"]]: hasGraph,
         [styles.active]: active,
-        [styles.large]: sizeLarge,
+        [styles.large]: sizeLarge || toolName === "llm_answer",
       })}
     >
       <div className={styles.background} />
@@ -180,7 +189,10 @@ export function NodeJob({ job, state, active }: NodeJobProps): JSX.Element {
         ) : null}
         {!generalAskUser && job.toolCall && <ToolCallStatus job={job} />}
         {toolMarkdownContent && (
-          <div className={classNames(styles.message, sharedStyles.markdown)}>
+          <div
+            className={classNames(styles.message, sharedStyles.markdown)}
+            style={{ padding: "0 8px" }}
+          >
             <EnhancedMarkdown content={toolMarkdownContent} />
           </div>
         )}

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

@@ -91,7 +91,7 @@
   pre[class*="language-"] {
     padding: 1em;
     margin: 0.5em 0;
-    overflow: auto;
+    overflow-x: auto;
     border-radius: 9px;
   }
 
@@ -270,10 +270,7 @@
 
 .markdown {
   table {
-    display: block;
     width: 100%;
-    width: max-content;
-    max-width: 100%;
     overflow-x: auto;
     border-collapse: collapse;
   }