feat(ai): Improve styling of the chat widget

* General improvements of margins and paddings * Give code a nicer border and more space * Replace aggressive buttons for code parts with more subtle icons * Format tool call result more nicely Contributed on behalf of STMicroelectronics
eclipsesource · Oct 10, 2024 · c7fb4f5 · c7fb4f5
1 parent 2be612f
commit c7fb4f5
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 19 deletions.
diff --git a/packages/ai-chat-ui/src/browser/chat-response-renderer/code-part-renderer.tsx b/packages/ai-chat-ui/src/browser/chat-response-renderer/code-part-renderer.tsx
@@ -128,7 +128,7 @@ const CopyToClipboardButton = (props: { code: string, clipboardService: Clipboar
     const copyCodeToClipboard = React.useCallback(() => {
         clipboardService.writeText(code);
     }, [code, clipboardService]);
-    return <button className='theia-button main' onClick={copyCodeToClipboard}>Copy</button>;
+    return <div className='button codicon codicon-copy' title='Copy' role='button' onClick={copyCodeToClipboard}></div>;
 };
 
 const InsertCodeAtCursorButton = (props: { code: string, editorManager: EditorManager }) => {
@@ -150,7 +150,7 @@ const InsertCodeAtCursorButton = (props: { code: string, editorManager: EditorMa
             }]);
         }
     }, [code, editorManager]);
-    return <button className='theia-button main' onClick={insertCode}>Insert at Cursor</button>;
+    return <div className='button codicon codicon-insert' title='Insert at Cursor' role='button' onClick={insertCode}></div>;
 };
 
 /**
@@ -174,9 +174,9 @@ export const CodeWrapper = (props: {
             autoSizing: true,
             scrollBeyondLastLine: false,
             scrollBeyondLastColumn: 0,
-            renderFinalNewline: 'on',
+            renderFinalNewline: 'off',
             maxHeight: -1,
-            scrollbar: { vertical: 'hidden', horizontal: 'hidden' },
+            scrollbar: { vertical: 'hidden' },
             codeLens: false,
             inlayHints: { enabled: 'off' },
             hover: { enabled: false }
@@ -203,6 +203,5 @@ export const CodeWrapper = (props: {
 
     editorRef.current?.resizeToFit();
 
-    return <div ref={ref}></div>;
+    return <div className='theia-CodeWrapper' ref={ref}></div>;
 };
-
diff --git a/packages/ai-chat-ui/src/browser/chat-response-renderer/toolcall-part-renderer.tsx b/packages/ai-chat-ui/src/browser/chat-response-renderer/toolcall-part-renderer.tsx
@@ -34,14 +34,25 @@ export class ToolCallPartRenderer implements ChatResponsePartRenderer<ToolCallCh
             {response.finished ?
                 <details>
                     <summary>Ran {response.name}</summary>
-                    <p>{response.result}</p>
+                    <pre>{this.tryPrettyPrintJson(response)}</pre>
                 </details>
                 : <span><Spinner /> Running [{response.name}]</span>
             }
         </h4>;
 
     }
 
+    private tryPrettyPrintJson(response: ToolCallChatResponseContent): string | undefined {
+        let responseContent = response.result;
+        try {
+            if (response.result) {
+                responseContent = JSON.stringify(JSON.parse(response.result), undefined, 2);
+            }
+        } catch (e) {
+            // fall through
+        }
+        return responseContent;
+    }
 }
 
 const Spinner = () => (

diff --git a/packages/ai-chat-ui/src/browser/style/index.css b/packages/ai-chat-ui/src/browser/style/index.css
@@ -16,8 +16,7 @@
   cursor: default;
   display: flex;
   flex-direction: column;
-  gap: 8px;
-  padding: 16px 20px;
+  padding: 16px 20px 6px 20px;
   user-select: text;
   -webkit-user-select: text;
   border-bottom: 1px solid var(--theia-sideBarSectionHeader-border);
@@ -110,16 +109,26 @@ div:last-child > .theia-ChatNode {
   background-color: var(--theia-toolbar-hoverBackground);
 }
 
-.theia-ChatNode .rendered-markdown p {
-  margin: 0 0 16px;
+.theia-ChatNode {
+  line-height: 1.3rem;
+}
+
+.theia-ChatNode ul,
+.theia-ChatNode ol {
+  padding-inline-start: 1rem;
 }
 
-.theia-ChatNode:last-child .rendered-markdown > :last-child {
+.theia-ChatNode li > p {
+  margin-top: 0;
   margin-bottom: 0;
 }
 
-.theia-ChatNode .rendered-markdown {
-  line-height: 1.3rem;
+.theia-ChatNode .theia-CodeWrapper {
+  padding: 0.5em;
+  background-color: var(--theia-editor-background);
+  border-radius: 6px;
+  border: var(--theia-border-width) solid var(--theia-checkbox-border);
+  font-size: var(--theia-code-font-size);
 }
 
 .chat-input-widget {
@@ -219,7 +228,7 @@ div:last-child > .theia-ChatNode {
 .theia-CodePartRenderer-root {
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: 2px;
   border: 1px solid var(--theia-input-border);
   border-radius: 4px;
 }
@@ -232,11 +241,20 @@ div:last-child > .theia-ChatNode {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding-bottom: 4px;
+  padding-left: 2px;
+  padding-right: 2px;
 }
 
-.theia-CodePartRenderer-right button {
-  margin-left: 4px;
+.theia-CodePartRenderer-right .button {
+  margin-left: 2px;
+  width: 18px;
+  height: 18px;
+  padding: 2px;
+  border-radius: 5px;
+  cursor: pointer;
+}
+.theia-CodePartRenderer-right .button:hover {
+  background-color: var(--theia-toolbar-hoverBackground);
 }
 
 .theia-CodePartRenderer-separator {
@@ -249,7 +267,8 @@ div:last-child > .theia-ChatNode {
   font-weight: normal;
   color: var(--theia-descriptionForeground);
   line-height: 20px;
-  margin-bottom: 6px;
+  margin-top: 13px;
+  margin-bottom: 13px;
   cursor: pointer;
 }
 
@@ -258,6 +277,16 @@ div:last-child > .theia-ChatNode {
   color: var(--theia-button-background);
 }
 
+.theia-toolCall details pre {
+  cursor: text;
+  line-height: 1rem;
+  margin-top: 0;
+  margin-bottom: 0;
+  padding: 6px;
+  background-color: var(--theia-editor-background);
+  overflow: auto;
+}
+
 .theia-ResponseNode-ProgressMessage {
   font-weight: normal;
   color: var(--theia-descriptionForeground);