Integrate the new Z.AI icon and chatbot preset

Author: robertpiosik

packages/ui/src/assets/icons/z-ai.svg

@@ -3,13 +3,16 @@
   flex-direction: column;
   align-items: flex-start;
   gap: var(--padding-4px);
-  padding: var(--padding-6px) var(--padding-10px) var(--padding-10px)
-    var(--padding-10px);
-  background-color: var(--vscode-inputOption-activeBackground);
+  padding: var(--padding-6px) var(--padding-8px) var(--padding-10px)
+    var(--padding-8px);
+  background: linear-gradient(
+    90deg,
+    var(--vscode-inputOption-activeBackground),
+    var(--vscode-sideBar-background)
+  );
   color: var(--vscode-inputOption-activeForeground);
-  --border-radius: var(--border-radius-5px);
+  --border-radius: var(--border-radius-8px);
   border-top-left-radius: var(--border-radius);
-  border-top-right-radius: var(--border-radius);
 
   > span {
     font-weight: 500;

packages/ui/src/components/editor/BrowserExtensionMessage/BrowserExtensionMessage.module.scss

@@ -18,6 +18,7 @@ import Perplexity from '../../../assets/icons/perplexity.svg'
 import Reddit from '../../../assets/icons/reddit.svg'
 import X from '../../../assets/icons/x.svg'
 import CodeWebChat from '../../../assets/icons/code-web-chat.svg'
+import ZAI from '../../../assets/icons/z-ai.svg'
 
 export namespace Icon {
   export type Variant =
@@ -41,6 +42,7 @@ export namespace Icon {
     | 'REDDIT'
     | 'X'
     | 'CODE_WEB_CHAT'
+    | 'Z_AI'
 
   export type Props = {
     variant: Variant
@@ -111,9 +113,10 @@ export const Icon: React.FC<Icon.Props> = ({ variant }) => {
     case 'CODE_WEB_CHAT':
       icon = <CodeWebChat />
       break
+    case 'Z_AI':
+      icon = <ZAI />
+      break
     default:
-      // Handle cases where variant might not match any known icon
-      // This could be an empty fragment, a default icon, or throw an error
       icon = <></>
       break
   }

packages/ui/src/components/editor/Icon/Icon.tsx

@@ -8,7 +8,7 @@ import { useState } from 'react'
 import { CHATBOTS } from '@shared/constants/chatbots'
 import { TextButton } from '../TextButton'
 
-export const chatbot_to_icon = {
+export const chatbot_to_icon: Record<keyof typeof CHATBOTS, Icon.Variant> = {
   'AI Studio': 'AI_STUDIO',
   Gemini: 'GEMINI',
   'Open WebUI': 'OPEN_WEBUI',
@@ -22,8 +22,9 @@ export const chatbot_to_icon = {
   Yuanbao: 'YUANBAO',
   Kimi: 'KIMI',
   Doubao: 'DOUBAO',
-  Perplexity: 'PERPLEXITY'
-} as Record<string, Icon.Variant>
+  Perplexity: 'PERPLEXITY',
+  'Z.AI': 'Z_AI'
+}
 
 export namespace Presets {
   export type Preset = {

packages/ui/src/components/editor/Presets/Presets.tsx

@@ -2,7 +2,7 @@
   "name": "gemini-coder",
   "displayName": "Code Web Chat (CWC)",
   "description": "Free AI coding for the rest of us",
-  "version": "1.202.0",
+  "version": "1.203.0",
   "scripts": {
     "build": "npx vsce package --no-dependencies",
     "vscode:prepublish": "rimraf out && npm run compile",

packages/vscode/package.json

@@ -168,7 +168,7 @@
 }
 
 .browser-extension-message {
-  padding: 0 var(--padding-12px);
+  padding: 0 var(--padding-16px);
   margin-bottom: -4px;
   position: relative;
 }