Add markdown rendering with syntax highlighting and copy buttons

- Implement markdown parser using marked with Shiki syntax highlighting
- Add CodeBlockInline component for tool call outputs with syntax highlighting
- Add Markdown component for assistant message text with code blocks
- Add ThemeProvider for light/dark mode support
- Add copy buttons to all code blocks (markdown and tool calls)
- Support 20+ languages: TypeScript, JavaScript, Python, Bash, JSON, HTML, CSS, C++, Java, C, C#, Rust, Go, PHP, Ruby, Swift, Kotlin, and more
- Auto-detect language from file extensions in tool call outputs
- Apply consistent styling for code blocks across the application
- Fix whitespace handling in markdown-rendered text
- Add language labels to all code blocks

src/components/message-part.tsx

@@ -1,12 +1,15 @@
 import { Show, Match, Switch } from "solid-js"
 import ToolCall from "./tool-call"
 import { isItemExpanded, toggleItemExpanded } from "../stores/tool-call-state"
+import { Markdown } from "./markdown"
+import { useTheme } from "../lib/theme"
 
 interface MessagePartProps {
   part: any
 }
 
 export default function MessagePart(props: MessagePartProps) {
+  const { isDark } = useTheme()
   const partType = () => props.part?.type || ""
   const reasoningId = () => `reasoning-${props.part?.id || ""}`
   const isReasoningExpanded = () => isItemExpanded(reasoningId())
@@ -20,7 +23,9 @@ export default function MessagePart(props: MessagePartProps) {
     <Switch>
       <Match when={partType() === "text"}>
         <Show when={!props.part.synthetic && props.part.text}>
-          <div class="message-text">{props.part.text}</div>
+          <div class="message-text">
+            <Markdown content={props.part.text} isDark={isDark()} />
+          </div>
         </Show>
       </Match>
 
@@ -40,7 +45,9 @@ export default function MessagePart(props: MessagePartProps) {
               <span class="reasoning-label">Reasoning</span>
             </div>
             <Show when={isReasoningExpanded()}>
-              <div class="message-text mt-2">{props.part.text || ""}</div>
+              <div class="message-text mt-2">
+                <Markdown content={props.part.text || ""} isDark={isDark()} />
+              </div>
             </Show>
           </div>
         </div>