style(markdown): 优化Markdown组件样式和高亮主题

- 新增className支持，允许自定义Markdown组件样式
- 引入GitHub风格的highlight.js高亮主题，提升代码块展示效果
- 使用cn函数合并类名，增强样式灵活性和可维护性

style(bubbles): 统一对话气泡组件宽度样式

- 为SystemBubble、ThinkingBubble和ToolBubble组件的Collapsible容器添加全宽样式w-full
- UserBubble中Markdown组件新增user-bubble类名，优化样式排版
- 统一对话气泡布局，提升整体UI一致性和用户体验

Author: hqwlkj

packages/vscode-ide-companion/src/webview/components/bubbles/SystemBubble.tsx

@@ -16,7 +16,7 @@ export default function SystemBubble({ content, meta, shouldConnect = false }: S
   const skillDescription = (meta?.skill as { description?: string } | undefined)?.description || content;
 
   return (
-    <Collapsible open={open} onOpenChange={setOpen} className="relative flex gap-2 mb-3">
+    <Collapsible open={open} onOpenChange={setOpen} className="relative w-full flex gap-2 mb-3">
       <BubbleDot connectToPrev={shouldConnect} className="mt-4" />
       <div className="absolute left-0.75 h-full w-px bg-muted-foreground top-6"></div>
       <div className="flex-1 min-w-0">

packages/vscode-ide-companion/src/webview/components/bubbles/ThinkingBubble.tsx

@@ -14,7 +14,7 @@ export default function ThinkingBubble({ content, shouldConnect = false }: Think
   const [open, setOpen] = useState(true);
 
   return (
-    <Collapsible open={open} onOpenChange={setOpen} className="relative flex gap-2 rounded-md mb-3">
+    <Collapsible open={open} onOpenChange={setOpen} className="relative flex w-full gap-2 rounded-md mb-3">
       <BubbleDot connectToPrev={shouldConnect} className="mt-4" />
       <div className="absolute left-0.75 h-full w-px bg-muted-foreground top-6"></div>
       <div className="flex-1 min-w-0 data-[state=open]:bg-muted">

packages/vscode-ide-companion/src/webview/components/bubbles/ToolBubble.tsx

@@ -58,7 +58,7 @@ export default function ToolBubble({ content, meta, shouldConnect = false }: Too
   }
 
   return (
-    <Collapsible open={open} onOpenChange={setOpen} className="relative flex gap-2 mb-3">
+    <Collapsible open={open} onOpenChange={setOpen} className="relative flex w-full gap-2 mb-3">
       <BubbleDot variant={isOk ? "success" : "error"} connectToPrev={shouldConnect} className="mt-4" />
       <div className="absolute left-0.75 h-full w-px bg-muted-foreground top-6"></div>
       <div className="flex-1 min-w-0">

packages/vscode-ide-companion/src/webview/components/bubbles/UserBubble.tsx

@@ -54,7 +54,7 @@ export default function UserBubble({ content, meta, onEdit }: UserBubbleProps) {
         </div>
       )}
       <div className="max-w-[85%] bg-primary/25 rounded-lg px-3 py-2">
-        <Markdown>{content}</Markdown>
+        <Markdown className="user-bubble">{content}</Markdown>
       </div>
       <div className="invisible group-hover:visible text-sm mt-1">
         <Tooltip>

packages/vscode-ide-companion/src/webview/components/markdown/index.tsx

@@ -6,9 +6,13 @@ import type { Options as MarkdownItOptions } from "markdown-it";
 import hljs from "highlight.js";
 // @ts-expect-error -- module does not provide types
 import taskLists from "markdown-it-task-lists";
+import { cn } from "@/webview/lib/utils";
 import "./index.css";
+import "highlight.js/styles/github-dark.css";
+import "highlight.js/styles/github.css";
 
 export interface MarkdownProps {
+  className?: string;
   children?: string;
   onFileClick?: (filePath: string) => void;
   /** When false, do not convert file paths into clickable links. Default: true */
@@ -90,7 +94,7 @@ const createMarkdownInstance = (): MarkdownIt => {
     breaks: true,
     linkify: true,
     typographer: true,
-    highlight: function (str, lang) {
+    highlight: function (str, lang, attrs) {
       if (lang && hljs.getLanguage(lang)) {
         try {
           return (
@@ -109,7 +113,7 @@ const createMarkdownInstance = (): MarkdownIt => {
   return md;
 };
 
-const Markdown: FC<MarkdownProps> = ({ children = "", onFileClick, enableFileLinks }) => {
+const Markdown: FC<MarkdownProps> = ({ className, children = "", onFileClick, enableFileLinks }) => {
   // Cache MarkdownIt instance
   const md = useMemo(() => createMarkdownInstance(), []);
 
@@ -386,7 +390,7 @@ const Markdown: FC<MarkdownProps> = ({ children = "", onFileClick, enableFileLin
 
   return (
     <div
-      className="markdown-content"
+      className={cn("markdown-content", className)}
       onClick={handleContainerClick}
       dangerouslySetInnerHTML={{ __html: renderedHtml }}
       style={{