gradio -> docker

.gitignore

@@ -0,0 +1,3 @@
+node_modules
+.next
+.gradio

.gradio/cached_examples/21/log.csv

@@ -1,4 +0,0 @@
-Chatbot,timestamp
-"[[""Hello there! How are you doing?"", ""Hello! I'm doing great, thanks for asking. How can I assist you today?""]]",2025-12-05 10:35:54.190200
-"[[""Can you write a Python program that adds two numbers?"", ""**Number Addition Program**\n==========================\n\n### Overview\n\nThis program takes two numbers as input and returns their sum.\n\n### Code\n\n```python\ndef add_numbers(num1: float, num2: float) -> float:\n    \""\""\""\n    Adds two numbers and returns the result.\n\n    Args:\n        num1 (float): The first number.\n        num2 (float): The second number.\n\n    Returns:\n        float: The sum of num1 and num2.\n    \""\""\""\n    return num1 + num2\n\ndef main():\n    # Example usage\n    num1 = float(input(\""Enter the first number: \""))\n    num2 = float(input(\""Enter the second number: \""))\n    result = add_numbers(num1, num2)\n    print(f\""The sum of {num1} and {num2} is {result}\"")\n\nif __name__ == \""__main__\"":\n    main()\n```\n\n### Explanation\n\n1. The `add_numbers` function takes two `float` arguments, `num1` and `num2`, and returns their sum.\n2. The `main` function demonstrates how to use the `add_numbers` function by taking user input for the two numbers, calling the function, and printing the result.\n3. The `if __name__ == \""__main__\"":` block ensures that the `main` function is only executed when the script is run directly, not when it's imported as a module.\n\n### Example Use Case\n\n```\nEnter the first number: 5\nEnter the second number: 7\nThe sum of 5.0 and 7.0 is 12.0\n```""]]",2025-12-05 10:35:56.849988
-"[[""Which one of these mountains is not located in Europe? Hoverla, Mont-Blanc, Gran Paradiso, Everest"", ""Everest is not located in Europe. It is the highest mountain in the world, located in the Himalayas on the border between Nepal and Tibet, China.""]]",2025-12-05 10:35:57.207845

Dockerfile

@@ -0,0 +1,40 @@
+FROM node:20-alpine AS base
+
+# Install dependencies only when needed
+FROM base AS deps
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+
+COPY package.json ./
+RUN npm install
+
+# Rebuild the source code only when needed
+FROM base AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+ENV NEXT_TELEMETRY_DISABLED=1
+RUN npm run build
+
+# Production image, copy all the files and run next
+FROM base AS runner
+WORKDIR /app
+
+ENV NODE_ENV=production
+ENV NEXT_TELEMETRY_DISABLED=1
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+COPY --from=builder /app/public ./public
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+USER nextjs
+
+EXPOSE 7860
+ENV PORT=7860
+ENV HOSTNAME="0.0.0.0"
+
+CMD ["node", "server.js"]

README.md

@@ -3,12 +3,38 @@ title: Qwen3 Claude Opus
 emoji: 🚀
 colorFrom: yellow
 colorTo: purple
-sdk: gradio
-sdk_version: 5.42.0
-app_file: app.py
+sdk: docker
+app_port: 7860
 pinned: false
-hf_oauth: true
-hf_oauth_scopes:
-- inference-api
 license: apache-2.0
----
+---
+
+# Qwen3 Claude Opus Chat
+
+A minimal, modern chat interface for the Qwen3-4B-Thinking-2507-Claude-4.5-Opus model with:
+
+- **Collapsible thinking blocks** - See the model's reasoning process
+- **Web search** - Toggle to enable real-time web search via MCP
+- **Streaming responses** - Real-time token streaming
+- **Clean UI** - Modern dark theme with smooth animations
+
+## Environment Variables
+
+Set these in HF Spaces Settings > Secrets:
+
+- `OPENAI_API_KEY` - API key for the inference server (required)
+- `BASE_URL` - OpenAI-compatible API base URL (default: `https://llama.gptbox.dev/v1`)
+- `MODEL_ID` - Model identifier (default: `qwen3-4b-thinking-2507-claude-4.5-opus-distill`)
+
+## Local Development
+
+```bash
+npm install
+npm run dev
+```
+
+## Docker Build
+
+```bash
+docker build -t qwen3-chat .
+docker run -p 7860:7860 -e OPENAI_API_KEY=your_key qwen3-chat

app.py

@@ -1,378 +0,0 @@
-import os
-import re
-import json
-import asyncio
-from typing import Generator
-
-import gradio as gr
-from openai import OpenAI
-from mcp import ClientSession, StdioServerParameters
-from mcp.client.stdio import stdio_client
-
-# =============================================================================
-# Configuration
-# =============================================================================
-MODEL_ID = os.environ.get("MODEL_ID", "qwen3-4b-thinking-2507-claude-4.5-opus-distill")
-BASE_URL = os.environ.get("BASE_URL", "https://llama.gptbox.dev/v1")
-API_KEY = os.environ.get("OPENAI_API_KEY")  # Set via HF Spaces Secrets
-
-if not API_KEY:
-    raise ValueError(
-        "OPENAI_API_KEY environment variable is required. Set it in HF Spaces Settings > Secrets."
-    )
-
-client = OpenAI(base_url=BASE_URL, api_key=API_KEY)
-
-# MCP SearXNG server config
-SEARXNG_SERVER_PARAMS = StdioServerParameters(
-    command="npx",
-    args=["-y", "@kevinwatt/mcp-server-searxng"],
-    env={
-        **os.environ,
-        "SEARXNG_INSTANCES": "https://searxng.gptbox.dev",
-        "SEARXNG_USER_AGENT": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36",
-        "NODE_TLS_REJECT_UNAUTHORIZED": "0",
-    },
-)
-
-# OpenAI-style tool definition for web_search
-WEB_SEARCH_TOOL = {
-    "type": "function",
-    "function": {
-        "name": "web_search",
-        "description": "Search the web using SearXNG metasearch engine. Use this to find current information.",
-        "parameters": {
-            "type": "object",
-            "properties": {
-                "query": {"type": "string", "description": "Search query"},
-                "page": {"type": "integer", "description": "Page number (default 1)"},
-                "language": {
-                    "type": "string",
-                    "description": "Language code e.g. 'en', 'all'",
-                },
-                "categories": {
-                    "type": "array",
-                    "items": {"type": "string"},
-                    "description": "Categories: general, news, science, images, videos, etc.",
-                },
-                "time_range": {
-                    "type": "string",
-                    "description": "day, week, month, year",
-                },
-                "safesearch": {
-                    "type": "integer",
-                    "description": "0=off, 1=moderate, 2=strict",
-                },
-            },
-            "required": ["query"],
-        },
-    },
-}
-
-
-# =============================================================================
-# MCP Tool Execution
-# =============================================================================
-async def execute_web_search(arguments: dict) -> str:
-    """Execute web_search tool via MCP SearXNG server."""
-    try:
-        async with stdio_client(SEARXNG_SERVER_PARAMS) as (read, write):
-            async with ClientSession(read, write) as session:
-                await session.initialize()
-                result = await session.call_tool("web_search", arguments)
-                # Extract text content from result
-                texts = []
-                for content in result.content:
-                    if hasattr(content, "text"):
-                        texts.append(content.text)
-                return "\n".join(texts) if texts else "No results found."
-    except Exception as e:
-        return f"Search error: {str(e)}"
-
-
-def run_web_search(arguments: dict) -> str:
-    """Sync wrapper for async MCP call."""
-    return asyncio.run(execute_web_search(arguments))
-
-
-# =============================================================================
-# Thinking Block Parser
-# =============================================================================
-def format_thinking(text: str) -> str:
-    """
-    Convert <think>...</think> blocks into collapsible HTML details.
-    """
-    pattern = r"<think>(.*?)</think>"
-
-    def replacer(match):
-        thinking_content = match.group(1).strip()
-        # Escape HTML in thinking content
-        thinking_content = (
-            thinking_content.replace("&", "&amp;")
-            .replace("<", "&lt;")
-            .replace(">", "&gt;")
-        )
-        thinking_content = thinking_content.replace("\n", "<br>")
-        return f'<details><summary>💭 Thinking...</summary><div style="padding:8px;background:#1a1a2e;border-radius:4px;margin-top:4px;font-size:0.9em;color:#aaa;">{thinking_content}</div></details>'
-
-    return re.sub(pattern, replacer, text, flags=re.DOTALL)
-
-
-# =============================================================================
-# Chat Function with Tool Calling
-# =============================================================================
-def chat_fn(
-    message: str,
-    history: list,
-    system_message: str,
-    max_tokens: int,
-    temperature: float,
-    top_p: float,
-    search_enabled: bool,
-) -> Generator[list, None, None]:
-    """Main chat function with streaming and optional tool calling."""
-
-    # Build messages
-    messages = [{"role": "system", "content": system_message}]
-    for msg in history:
-        messages.append(msg)
-    messages.append({"role": "user", "content": message})
-
-    # Prepare tools if search enabled
-    tools = [WEB_SEARCH_TOOL] if search_enabled else None
-
-    # Append user message to history for display
-    new_history = history + [{"role": "user", "content": message}]
-    yield new_history
-
-    max_tool_rounds = 5
-    for _ in range(max_tool_rounds):
-        # Call model
-        response = client.chat.completions.create(
-            model=MODEL_ID,
-            messages=messages,
-            max_tokens=max_tokens,
-            temperature=temperature,
-            top_p=top_p,
-            tools=tools,
-            stream=True,
-        )
-
-        # Accumulate streamed response
-        assistant_content = ""
-        tool_calls_acc = {}  # id -> {name, arguments}
-        current_tool_call_id = None
-
-        for chunk in response:
-            delta = chunk.choices[0].delta if chunk.choices else None
-            if not delta:
-                continue
-
-            # Handle content
-            if delta.content:
-                assistant_content += delta.content
-                display_content = format_thinking(assistant_content)
-                updated_history = new_history + [
-                    {"role": "assistant", "content": display_content}
-                ]
-                yield updated_history
-
-            # Handle tool calls
-            if delta.tool_calls:
-                for tc in delta.tool_calls:
-                    if tc.id:
-                        current_tool_call_id = tc.id
-                        tool_calls_acc[tc.id] = {
-                            "name": tc.function.name if tc.function else "",
-                            "arguments": "",
-                        }
-                    if tc.function:
-                        if tc.function.name and current_tool_call_id:
-                            tool_calls_acc[current_tool_call_id][
-                                "name"
-                            ] = tc.function.name
-                        if tc.function.arguments and current_tool_call_id:
-                            tool_calls_acc[current_tool_call_id][
-                                "arguments"
-                            ] += tc.function.arguments
-
-        # Check finish reason
-        finish_reason = chunk.choices[0].finish_reason if chunk.choices else None
-
-        # If tool calls were made, execute them
-        if tool_calls_acc and finish_reason == "tool_calls":
-            # Add assistant message with tool calls to messages
-            tool_calls_list = [
-                {
-                    "id": tid,
-                    "type": "function",
-                    "function": {"name": tc["name"], "arguments": tc["arguments"]},
-                }
-                for tid, tc in tool_calls_acc.items()
-            ]
-            messages.append(
-                {
-                    "role": "assistant",
-                    "content": assistant_content if assistant_content else None,
-                    "tool_calls": tool_calls_list,
-                }
-            )
-
-            # Execute each tool and add results
-            for tid, tc in tool_calls_acc.items():
-                if tc["name"] == "web_search":
-                    # Show searching status
-                    search_status = f"🔍 Searching: {tc['arguments']}..."
-                    yield new_history + [
-                        {"role": "assistant", "content": search_status}
-                    ]
-
-                    try:
-                        args = json.loads(tc["arguments"])
-                    except json.JSONDecodeError:
-                        args = {"query": tc["arguments"]}
-
-                    result = run_web_search(args)
-                    messages.append(
-                        {
-                            "role": "tool",
-                            "tool_call_id": tid,
-                            "content": result,
-                        }
-                    )
-            # Continue loop to get final response
-            continue
-        else:
-            # No tool calls or finished - we're done
-            final_content = format_thinking(assistant_content)
-            final_history = new_history + [
-                {"role": "assistant", "content": final_content}
-            ]
-            yield final_history
-            return
-
-    # Fallback if max rounds exceeded
-    yield new_history + [
-        {"role": "assistant", "content": "Max tool call rounds exceeded."}
-    ]
-
-
-# =============================================================================
-# Gradio UI
-# =============================================================================
-CSS = """
-.search-btn {
-    min-width: 40px !important;
-    width: 40px !important;
-    height: 40px !important;
-    padding: 8px !important;
-    border-radius: 50% !important;
-}
-.search-btn.active {
-    background: #2563eb !important;
-    color: white !important;
-}
-.chat-container {
-    height: 500px !important;
-}
-"""
-
-with gr.Blocks(css=CSS, title="Claude-Opus-Qwen3 Chat") as demo:
-    # State for search toggle
-    search_state = gr.State(value=False)
-
-    gr.Markdown("# 🚀 Claude-Opus-Qwen3 Chat")
-
-    with gr.Row():
-        with gr.Column(scale=4):
-            chatbot = gr.Chatbot(
-                label="Chat",
-                type="messages",
-                elem_classes=["chat-container"],
-                show_copy_button=True,
-                render_markdown=True,
-                sanitize_html=False,
-            )
-
-            with gr.Row():
-                search_btn = gr.Button(
-                    value="🌐",
-                    elem_classes=["search-btn"],
-                    variant="secondary",
-                    size="sm",
-                )
-                msg = gr.Textbox(
-                    placeholder="How can I help you today?",
-                    show_label=False,
-                    scale=10,
-                    container=False,
-                )
-                send_btn = gr.Button("Send", variant="primary", scale=1)
-                clear_btn = gr.Button("Clear", scale=1)
-
-        with gr.Column(scale=1):
-            with gr.Accordion("Settings", open=False):
-                system_msg = gr.Textbox(
-                    value="You are a helpful AI assistant. You can use <think>...</think> tags to show your reasoning process.",
-                    label="System Message",
-                    lines=3,
-                )
-                max_tokens = gr.Slider(
-                    minimum=256, maximum=8192, value=2048, step=64, label="Max Tokens"
-                )
-                temperature = gr.Slider(
-                    minimum=0.0, maximum=2.0, value=0.7, step=0.1, label="Temperature"
-                )
-                top_p = gr.Slider(
-                    minimum=0.0, maximum=1.0, value=0.95, step=0.05, label="Top-p"
-                )
-
-            search_status = gr.Markdown("🌐 Web Search: **OFF**")
-
-    # Toggle search
-    def toggle_search(current_state):
-        new_state = not current_state
-        status = "🌐 Web Search: **ON**" if new_state else "🌐 Web Search: **OFF**"
-        btn_variant = "primary" if new_state else "secondary"
-        return new_state, status, gr.update(variant=btn_variant)
-
-    search_btn.click(
-        toggle_search,
-        inputs=[search_state],
-        outputs=[search_state, search_status, search_btn],
-    )
-
-    # Submit handlers
-    def user_submit(message, history):
-        if not message.strip():
-            return history, ""
-        return history, ""
-
-    def bot_respond(
-        message, history, system_msg, max_tokens, temperature, top_p, search_enabled
-    ):
-        if not message.strip():
-            yield history
-            return
-        for updated_history in chat_fn(
-            message, history, system_msg, max_tokens, temperature, top_p, search_enabled
-        ):
-            yield updated_history
-
-    # Wire up events
-    msg.submit(
-        bot_respond,
-        inputs=[msg, chatbot, system_msg, max_tokens, temperature, top_p, search_state],
-        outputs=[chatbot],
-    ).then(lambda: "", outputs=[msg])
-
-    send_btn.click(
-        bot_respond,
-        inputs=[msg, chatbot, system_msg, max_tokens, temperature, top_p, search_state],
-        outputs=[chatbot],
-    ).then(lambda: "", outputs=[msg])
-
-    clear_btn.click(lambda: [], outputs=[chatbot])
-
-if __name__ == "__main__":
-    demo.launch()

next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

next.config.js

@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+    output: 'standalone',
+};
+
+module.exports = nextConfig;

package.json

@@ -0,0 +1,35 @@
+{
+    "name": "qwen3-claude-opus-chat",
+    "version": "1.0.0",
+    "private": true,
+    "scripts": {
+        "dev": "next dev",
+        "build": "next build",
+        "start": "next start -p 7860"
+    },
+    "dependencies": {
+        "@ai-sdk/openai-compatible": "^1.0.0",
+        "@modelcontextprotocol/sdk": "^1.0.0",
+        "@radix-ui/react-collapsible": "^1.1.0",
+        "@radix-ui/react-slot": "^1.1.0",
+        "ai": "^4.0.0",
+        "class-variance-authority": "^0.7.0",
+        "clsx": "^2.1.0",
+        "framer-motion": "^11.0.0",
+        "lucide-react": "^0.400.0",
+        "next": "^14.2.0",
+        "react": "^18.3.0",
+        "react-dom": "^18.3.0",
+        "react-markdown": "^9.0.0",
+        "tailwind-merge": "^2.3.0"
+    },
+    "devDependencies": {
+        "@types/node": "^20.0.0",
+        "@types/react": "^18.3.0",
+        "@types/react-dom": "^18.3.0",
+        "autoprefixer": "^10.4.0",
+        "postcss": "^8.4.0",
+        "tailwindcss": "^3.4.0",
+        "typescript": "^5.4.0"
+    }
+}

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {},
+    },
+};

requirements.txt

@@ -1,4 +0,0 @@
-transformers==4.51.2
-openai
-torch
-mcp

src/app/api/chat/route.ts

@@ -0,0 +1,277 @@
+import { NextRequest } from "next/server";
+
+const BASE_URL = process.env.BASE_URL || "https://llama.gptbox.dev/v1";
+const API_KEY = process.env.OPENAI_API_KEY || "";
+const MODEL_ID = process.env.MODEL_ID || "qwen3-4b-thinking-2507-claude-4.5-opus-distill";
+
+const SEARXNG_CONFIG = {
+    command: "npx",
+    args: ["-y", "@kevinwatt/mcp-server-searxng"],
+    env: {
+        SEARXNG_INSTANCES: "https://searxng.gptbox.dev",
+        SEARXNG_USER_AGENT: "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36",
+        NODE_TLS_REJECT_UNAUTHORIZED: "0",
+    },
+};
+
+const WEB_SEARCH_TOOL = {
+    type: "function" as const,
+    function: {
+        name: "web_search",
+        description: "Search the web for current information. Use this when you need up-to-date information.",
+        parameters: {
+            type: "object",
+            properties: {
+                query: { type: "string", description: "Search query" },
+            },
+            required: ["query"],
+        },
+    },
+};
+
+async function executeWebSearch(query: string): Promise<string> {
+    try {
+        const { Client } = await import("@modelcontextprotocol/sdk/client/index.js");
+        const { StdioClientTransport } = await import("@modelcontextprotocol/sdk/client/stdio.js");
+        const { spawn } = await import("child_process");
+
+        const serverProcess = spawn(SEARXNG_CONFIG.command, SEARXNG_CONFIG.args, {
+            env: { ...process.env, ...SEARXNG_CONFIG.env },
+            stdio: ["pipe", "pipe", "pipe"],
+        });
+
+        const transport = new StdioClientTransport({
+            reader: serverProcess.stdout,
+            writer: serverProcess.stdin,
+        });
+
+        const client = new Client({ name: "chat-client", version: "1.0.0" });
+        await client.connect(transport);
+
+        const result = await client.callTool({
+            name: "web_search",
+            arguments: { query },
+        });
+
+        await client.close();
+        serverProcess.kill();
+
+        if (result.content && Array.isArray(result.content)) {
+            return result.content
+                .map((c: { type: string; text?: string }) => (c.type === "text" ? c.text : ""))
+                .filter(Boolean)
+                .join("\n");
+        }
+        return "No results found.";
+    } catch (error) {
+        console.error("Web search error:", error);
+        return `Search error: ${error instanceof Error ? error.message : "Unknown error"}`;
+    }
+}
+
+function parseThinkingBlocks(text: string): { reasoning: string; content: string } {
+    const thinkMatch = text.match(/<think>([\s\S]*?)<\/think>/);
+    if (thinkMatch) {
+        const reasoning = thinkMatch[1].trim();
+        const content = text.replace(/<think>[\s\S]*?<\/think>/, "").trim();
+        return { reasoning, content };
+    }
+    return { reasoning: "", content: text };
+}
+
+export async function POST(req: NextRequest) {
+    const { messages, searchEnabled } = await req.json();
+
+    const encoder = new TextEncoder();
+    const stream = new ReadableStream({
+        async start(controller) {
+            const send = (data: object) => {
+                controller.enqueue(encoder.encode(`data: ${JSON.stringify(data)}\n\n`));
+            };
+
+            try {
+                const systemMessage = {
+                    role: "system",
+                    content: "You are a helpful AI assistant.",
+                };
+
+                const apiMessages = [systemMessage, ...messages];
+                const tools = searchEnabled ? [WEB_SEARCH_TOOL] : undefined;
+
+                let maxRounds = 5;
+                let currentMessages = [...apiMessages];
+
+                while (maxRounds > 0) {
+                    maxRounds--;
+
+                    const response = await fetch(`${BASE_URL}/chat/completions`, {
+                        method: "POST",
+                        headers: {
+                            "Content-Type": "application/json",
+                            Authorization: `Bearer ${API_KEY}`,
+                        },
+                        body: JSON.stringify({
+                            model: MODEL_ID,
+                            messages: currentMessages,
+                            tools,
+                            stream: true,
+                            max_tokens: 4096,
+                        }),
+                    });
+
+                    if (!response.ok) {
+                        throw new Error(`API error: ${response.status}`);
+                    }
+
+                    const reader = response.body?.getReader();
+                    if (!reader) throw new Error("No reader");
+
+                    const decoder = new TextDecoder();
+                    let buffer = "";
+                    let fullContent = "";
+                    let toolCalls: Array<{
+                        id: string;
+                        function: { name: string; arguments: string };
+                    }> = [];
+                    let currentToolCall: { id: string; function: { name: string; arguments: string } } | null = null;
+                    let sentReasoning = false;
+                    let reasoningBuffer = "";
+                    let inThinking = false;
+
+                    while (true) {
+                        const { done, value } = await reader.read();
+                        if (done) break;
+
+                        buffer += decoder.decode(value, { stream: true });
+                        const lines = buffer.split("\n");
+                        buffer = lines.pop() || "";
+
+                        for (const line of lines) {
+                            if (!line.startsWith("data: ")) continue;
+                            const data = line.slice(6).trim();
+                            if (data === "[DONE]") continue;
+
+                            try {
+                                const parsed = JSON.parse(data);
+                                const delta = parsed.choices?.[0]?.delta;
+
+                                if (delta?.content) {
+                                    fullContent += delta.content;
+
+                                    // Check for thinking blocks
+                                    if (fullContent.includes("<think>") && !fullContent.includes("</think>")) {
+                                        inThinking = true;
+                                        const thinkStart = fullContent.indexOf("<think>") + 7;
+                                        reasoningBuffer = fullContent.slice(thinkStart);
+                                        send({ type: "reasoning", content: delta.content });
+                                    } else if (inThinking && fullContent.includes("</think>")) {
+                                        inThinking = false;
+                                        sentReasoning = true;
+                                        const thinkEnd = fullContent.indexOf("</think>");
+                                        reasoningBuffer = fullContent.slice(fullContent.indexOf("<think>") + 7, thinkEnd);
+                                        const afterThink = fullContent.slice(thinkEnd + 8);
+                                        if (afterThink) {
+                                            send({ type: "content", content: afterThink });
+                                        }
+                                    } else if (inThinking) {
+                                        send({ type: "reasoning", content: delta.content });
+                                    } else if (sentReasoning || !fullContent.includes("<think>")) {
+                                        send({ type: "content", content: delta.content });
+                                    }
+                                }
+
+                                // Handle tool calls
+                                if (delta?.tool_calls) {
+                                    for (const tc of delta.tool_calls) {
+                                        if (tc.id) {
+                                            currentToolCall = {
+                                                id: tc.id,
+                                                function: { name: tc.function?.name || "", arguments: "" },
+                                            };
+                                            toolCalls.push(currentToolCall);
+                                        }
+                                        if (tc.function?.name && currentToolCall) {
+                                            currentToolCall.function.name = tc.function.name;
+                                        }
+                                        if (tc.function?.arguments && currentToolCall) {
+                                            currentToolCall.function.arguments += tc.function.arguments;
+                                        }
+                                    }
+                                }
+                            } catch {
+                                // Ignore parse errors
+                            }
+                        }
+                    }
+
+                    // Process tool calls if any
+                    if (toolCalls.length > 0) {
+                        currentMessages.push({
+                            role: "assistant",
+                            content: fullContent || null,
+                            tool_calls: toolCalls.map((tc) => ({
+                                id: tc.id,
+                                type: "function",
+                                function: tc.function,
+                            })),
+                        });
+
+                        for (const tc of toolCalls) {
+                            const args = JSON.parse(tc.function.arguments || "{}");
+                            send({
+                                type: "tool_call",
+                                name: tc.function.name,
+                                args,
+                                status: "running",
+                            });
+
+                            let result = "";
+                            if (tc.function.name === "web_search") {
+                                result = await executeWebSearch(args.query);
+                            }
+
+                            send({
+                                type: "tool_call",
+                                name: tc.function.name,
+                                args,
+                                status: "complete",
+                                result: result.slice(0, 2000),
+                            });
+
+                            currentMessages.push({
+                                role: "tool",
+                                tool_call_id: tc.id,
+                                content: result,
+                            });
+                        }
+
+                        // Continue the loop to get final response
+                        continue;
+                    }
+
+                    // No tool calls, we're done
+                    break;
+                }
+
+                send({ type: "done" });
+            } catch (error) {
+                console.error("Chat error:", error);
+                send({
+                    type: "error",
+                    message: error instanceof Error ? error.message : "Unknown error",
+                });
+            } finally {
+                controller.enqueue(encoder.encode("data: [DONE]\n\n"));
+                controller.close();
+            }
+        },
+    });
+
+    return new Response(stream, {
+        headers: {
+            "Content-Type": "text/event-stream",
+            "Cache-Control": "no-cache",
+            Connection: "keep-alive",
+        },
+    });
+}

src/app/globals.css

@@ -0,0 +1,283 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --background: 0 0% 100%;
+  --foreground: 220 13% 18%;
+  --card: 0 0% 100%;
+  --card-foreground: 220 13% 18%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 220 13% 18%;
+  --primary: 221 83% 53%;
+  --primary-foreground: 210 40% 98%;
+  --secondary: 220 14% 96%;
+  --secondary-foreground: 220 13% 18%;
+  --muted: 220 14% 96%;
+  --muted-foreground: 220 9% 46%;
+  --accent: 220 14% 96%;
+  --accent-foreground: 220 13% 18%;
+  --destructive: 0 84% 60%;
+  --destructive-foreground: 210 40% 98%;
+  --border: 220 13% 91%;
+  --input: 220 13% 91%;
+  --ring: 221 83% 53%;
+  --radius: 0.75rem;
+}
+
+.dark {
+  --background: 224 71% 4%;
+  --foreground: 213 31% 91%;
+  --card: 224 71% 4%;
+  --card-foreground: 213 31% 91%;
+  --popover: 224 71% 4%;
+  --popover-foreground: 213 31% 91%;
+  --primary: 217 91% 60%;
+  --primary-foreground: 222 47% 11%;
+  --secondary: 222 47% 11%;
+  --secondary-foreground: 213 31% 91%;
+  --muted: 223 47% 11%;
+  --muted-foreground: 215 20% 65%;
+  --accent: 216 34% 17%;
+  --accent-foreground: 213 31% 91%;
+  --destructive: 0 63% 31%;
+  --destructive-foreground: 210 40% 98%;
+  --border: 216 34% 17%;
+  --input: 216 34% 17%;
+  --ring: 224 64% 33%;
+}
+
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+html,
+body {
+  max-width: 100vw;
+  min-height: 100vh;
+  overflow-x: hidden;
+  font-feature-settings: "rlig" 1, "calt" 1;
+}
+
+body {
+  color: hsl(var(--foreground));
+  background: hsl(var(--background));
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Scrollbar styling */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: hsl(var(--muted-foreground) / 0.2);
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: hsl(var(--muted-foreground) / 0.4);
+}
+
+/* Selection */
+::selection {
+  background: hsl(var(--primary) / 0.2);
+  color: hsl(var(--foreground));
+}
+
+/* Focus styles */
+:focus-visible {
+  outline: 2px solid hsl(var(--ring));
+  outline-offset: 2px;
+}
+
+/* Animations */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes pulse-subtle {
+
+  0%,
+  100% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.7;
+  }
+}
+
+.animate-fade-in {
+  animation: fadeIn 0.3s ease-out;
+}
+
+.animate-slide-up {
+  animation: slideUp 0.4s ease-out;
+}
+
+.animate-pulse-subtle {
+  animation: pulse-subtle 2s ease-in-out infinite;
+}
+
+/* Typography */
+.text-balance {
+  text-wrap: balance;
+}
+
+/* Glass effect */
+.glass {
+  background: hsl(var(--background) / 0.8);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+}
+
+/* Gradient text */
+.gradient-text {
+  background: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(280 80% 60%) 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+/* Message bubble styles */
+.message-user {
+  background: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--primary) / 0.8) 100%);
+}
+
+.message-assistant {
+  background: hsl(var(--secondary));
+}
+
+/* Input glow effect */
+.input-glow:focus-within {
+  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.1), 0 0 20px hsl(var(--primary) / 0.1);
+}
+
+/* Markdown styling */
+.prose {
+  max-width: none;
+  line-height: 1.7;
+}
+
+.prose p {
+  margin-bottom: 1em;
+}
+
+.prose p:last-child {
+  margin-bottom: 0;
+}
+
+.prose pre {
+  background: hsl(var(--muted));
+  border: 1px solid hsl(var(--border));
+  border-radius: var(--radius);
+  padding: 1rem;
+  overflow-x: auto;
+  font-size: 0.875rem;
+  margin: 1rem 0;
+}
+
+.prose code {
+  background: hsl(var(--muted));
+  padding: 0.2rem 0.4rem;
+  border-radius: 0.375rem;
+  font-size: 0.875em;
+  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
+}
+
+.prose pre code {
+  background: transparent;
+  padding: 0;
+  border-radius: 0;
+}
+
+.prose ul,
+.prose ol {
+  padding-left: 1.5rem;
+  margin: 0.75rem 0;
+}
+
+.prose li {
+  margin: 0.25rem 0;
+}
+
+.prose blockquote {
+  border-left: 3px solid hsl(var(--primary));
+  padding-left: 1rem;
+  margin: 1rem 0;
+  color: hsl(var(--muted-foreground));
+  font-style: italic;
+}
+
+.prose h1,
+.prose h2,
+.prose h3,
+.prose h4 {
+  font-weight: 600;
+  margin-top: 1.5em;
+  margin-bottom: 0.5em;
+}
+
+.prose h1 {
+  font-size: 1.5rem;
+}
+
+.prose h2 {
+  font-size: 1.25rem;
+}
+
+.prose h3 {
+  font-size: 1.125rem;
+}
+
+.prose a {
+  color: hsl(var(--primary));
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.prose a:hover {
+  text-decoration-thickness: 2px;
+}
+
+.prose strong {
+  font-weight: 600;
+}
+
+.prose hr {
+  border: none;
+  border-top: 1px solid hsl(var(--border));
+  margin: 1.5rem 0;
+}

src/app/layout.tsx

@@ -0,0 +1,22 @@
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import "./globals.css";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+    title: "Qwen3 Claude Opus Chat",
+    description: "Chat with Qwen3-4B-Thinking-2507-Claude-4.5-Opus",
+};
+
+export default function RootLayout({
+    children,
+}: {
+    children: React.ReactNode;
+}) {
+    return (
+        <html lang="en" className="dark">
+            <body className={inter.className}>{children}</body>
+        </html>
+    );
+}

src/app/page.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import { Chat } from "@/components/chat";
+
+export default function Home() {
+    return (
+        <main className="flex min-h-screen flex-col">
+            <Chat />
+        </main>
+    );
+}

src/components/chat.tsx

@@ -0,0 +1,421 @@
+"use client";
+
+import { useState, useRef, useEffect } from "react";
+import { Globe, Send, Loader2, RotateCcw, Sparkles, MessageSquare } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { ReasoningBlock } from "@/components/reasoning-block";
+import { ToolInvocation } from "@/components/tool-invocation";
+import { Markdown } from "@/components/markdown";
+import { cn } from "@/lib/utils";
+
+interface Message {
+    id: string;
+    role: "user" | "assistant";
+    content: string;
+    reasoning?: string;
+    reasoningDuration?: number;
+    toolInvocations?: Array<{
+        toolName: string;
+        args: Record<string, unknown>;
+        result?: string;
+        status: "pending" | "running" | "complete" | "error";
+    }>;
+}
+
+export function Chat() {
+    const [messages, setMessages] = useState<Message[]>([]);
+    const [input, setInput] = useState("");
+    const [isLoading, setIsLoading] = useState(false);
+    const [searchEnabled, setSearchEnabled] = useState(false);
+    const [streamingMessage, setStreamingMessage] = useState<Message | null>(null);
+    const messagesEndRef = useRef<HTMLDivElement>(null);
+    const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+    const scrollToBottom = () => {
+        messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+    };
+
+    useEffect(() => {
+        scrollToBottom();
+    }, [messages, streamingMessage]);
+
+    // Auto-resize textarea
+    useEffect(() => {
+        const textarea = textareaRef.current;
+        if (textarea) {
+            textarea.style.height = "auto";
+            textarea.style.height = Math.min(textarea.scrollHeight, 200) + "px";
+        }
+    }, [input]);
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+        if (!input.trim() || isLoading) return;
+
+        const userMessage: Message = {
+            id: Date.now().toString(),
+            role: "user",
+            content: input.trim(),
+        };
+
+        setMessages((prev) => [...prev, userMessage]);
+        setInput("");
+        setIsLoading(true);
+
+        const assistantMessage: Message = {
+            id: (Date.now() + 1).toString(),
+            role: "assistant",
+            content: "",
+            reasoning: "",
+            toolInvocations: [],
+        };
+        setStreamingMessage(assistantMessage);
+
+        try {
+            const response = await fetch("/api/chat", {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({
+                    messages: [...messages, userMessage].map((m) => ({
+                        role: m.role,
+                        content: m.content,
+                    })),
+                    searchEnabled,
+                }),
+            });
+
+            if (!response.ok) throw new Error("Failed to get response");
+
+            const reader = response.body?.getReader();
+            if (!reader) throw new Error("No reader available");
+
+            const decoder = new TextDecoder();
+            let buffer = "";
+            let currentReasoning = "";
+            let currentContent = "";
+            let reasoningStart = 0;
+            let inReasoning = false;
+
+            while (true) {
+                const { done, value } = await reader.read();
+                if (done) break;
+
+                buffer += decoder.decode(value, { stream: true });
+                const lines = buffer.split("\n");
+                buffer = lines.pop() || "";
+
+                for (const line of lines) {
+                    if (!line.startsWith("data: ")) continue;
+                    const data = line.slice(6);
+                    if (data === "[DONE]") continue;
+
+                    try {
+                        const parsed = JSON.parse(data);
+
+                        if (parsed.type === "reasoning") {
+                            if (!inReasoning) {
+                                inReasoning = true;
+                                reasoningStart = Date.now();
+                            }
+                            currentReasoning += parsed.content;
+                            setStreamingMessage((prev) =>
+                                prev ? { ...prev, reasoning: currentReasoning } : prev
+                            );
+                        } else if (parsed.type === "content") {
+                            if (inReasoning) {
+                                inReasoning = false;
+                                const duration = (Date.now() - reasoningStart) / 1000;
+                                setStreamingMessage((prev) =>
+                                    prev ? { ...prev, reasoningDuration: duration } : prev
+                                );
+                            }
+                            currentContent += parsed.content;
+                            setStreamingMessage((prev) =>
+                                prev ? { ...prev, content: currentContent } : prev
+                            );
+                        } else if (parsed.type === "tool_call") {
+                            setStreamingMessage((prev) => {
+                                if (!prev) return prev;
+                                const existing = prev.toolInvocations || [];
+                                const existingIndex = existing.findIndex(
+                                    (t) => t.toolName === parsed.name
+                                );
+                                if (existingIndex >= 0) {
+                                    const updated = [...existing];
+                                    updated[existingIndex] = {
+                                        ...updated[existingIndex],
+                                        status: parsed.status,
+                                        result: parsed.result,
+                                    };
+                                    return { ...prev, toolInvocations: updated };
+                                }
+                                return {
+                                    ...prev,
+                                    toolInvocations: [
+                                        ...existing,
+                                        {
+                                            toolName: parsed.name,
+                                            args: parsed.args,
+                                            status: parsed.status,
+                                            result: parsed.result,
+                                        },
+                                    ],
+                                };
+                            });
+                        }
+                    } catch {
+                        // Ignore parse errors
+                    }
+                }
+            }
+
+            // Finalize message
+            setStreamingMessage((prev) => {
+                if (prev) {
+                    setMessages((msgs) => [...msgs, prev]);
+                }
+                return null;
+            });
+        } catch (error) {
+            console.error("Chat error:", error);
+            setStreamingMessage(null);
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const handleKeyDown = (e: React.KeyboardEvent) => {
+        if (e.key === "Enter" && !e.shiftKey) {
+            e.preventDefault();
+            handleSubmit(e);
+        }
+    };
+
+    const clearChat = () => {
+        setMessages([]);
+        setStreamingMessage(null);
+    };
+
+    const hasMessages = messages.length > 0 || streamingMessage;
+
+    return (
+        <div className="flex flex-col h-screen bg-background">
+            {/* Header */}
+            <header className="sticky top-0 z-50 glass border-b border-border/50">
+                <div className="max-w-3xl mx-auto px-4 h-14 flex items-center justify-between">
+                    <div className="flex items-center gap-3">
+                        <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center">
+                            <Sparkles className="w-4 h-4 text-white" />
+                        </div>
+                        <div>
+                            <h1 className="text-sm font-semibold">Qwen3 Claude Opus</h1>
+                            <p className="text-xs text-muted-foreground">Reasoning Model</p>
+                        </div>
+                    </div>
+                    {hasMessages && (
+                        <Button
+                            variant="ghost"
+                            size="sm"
+                            onClick={clearChat}
+                            className="text-muted-foreground hover:text-foreground gap-2"
+                        >
+                            <RotateCcw className="h-4 w-4" />
+                            <span className="hidden sm:inline">New Chat</span>
+                        </Button>
+                    )}
+                </div>
+            </header>
+
+            {/* Messages Area */}
+            <div className="flex-1 overflow-y-auto">
+                <div className="max-w-3xl mx-auto px-4 py-6">
+                    {/* Empty State */}
+                    {!hasMessages && (
+                        <div className="flex flex-col items-center justify-center min-h-[60vh] text-center animate-fade-in">
+                            <div className="w-16 h-16 rounded-2xl bg-gradient-to-br from-blue-500/20 to-purple-600/20 flex items-center justify-center mb-6">
+                                <MessageSquare className="w-8 h-8 text-blue-500" />
+                            </div>
+                            <h2 className="text-2xl font-semibold mb-2 text-balance">
+                                How can I help you today?
+                            </h2>
+                            <p className="text-muted-foreground max-w-md text-balance">
+                                I'm a reasoning model that thinks through problems step by step.
+                                Toggle web search for real-time information.
+                            </p>
+
+                            {/* Quick Actions */}
+                            <div className="flex flex-wrap gap-2 mt-8 justify-center">
+                                {[
+                                    "Explain quantum computing",
+                                    "Write a Python function",
+                                    "What's the latest news?",
+                                ].map((prompt) => (
+                                    <button
+                                        key={prompt}
+                                        onClick={() => setInput(prompt)}
+                                        className="px-4 py-2 text-sm rounded-full border border-border hover:bg-accent hover:border-accent transition-colors"
+                                    >
+                                        {prompt}
+                                    </button>
+                                ))}
+                            </div>
+                        </div>
+                    )}
+
+                    {/* Messages */}
+                    <div className="space-y-6">
+                        {messages.map((message) => (
+                            <div
+                                key={message.id}
+                                className={cn(
+                                    "animate-slide-up",
+                                    message.role === "user" ? "flex justify-end" : ""
+                                )}
+                            >
+                                {message.role === "user" ? (
+                                    <div className="message-user text-white px-4 py-3 rounded-2xl rounded-br-md max-w-[85%] shadow-lg">
+                                        <p className="text-sm leading-relaxed whitespace-pre-wrap">{message.content}</p>
+                                    </div>
+                                ) : (
+                                    <div className="space-y-3 max-w-full">
+                                        {message.reasoning && (
+                                            <ReasoningBlock
+                                                content={message.reasoning}
+                                                duration={message.reasoningDuration}
+                                            />
+                                        )}
+                                        {message.toolInvocations?.map((tool, idx) => (
+                                            <ToolInvocation
+                                                key={idx}
+                                                toolName={tool.toolName}
+                                                args={tool.args}
+                                                result={tool.result}
+                                                status={tool.status}
+                                            />
+                                        ))}
+                                        {message.content && (
+                                            <div className="prose text-foreground">
+                                                <Markdown>{message.content}</Markdown>
+                                            </div>
+                                        )}
+                                    </div>
+                                )}
+                            </div>
+                        ))}
+
+                        {/* Streaming message */}
+                        {streamingMessage && (
+                            <div className="space-y-3 animate-fade-in">
+                                {streamingMessage.reasoning && (
+                                    <ReasoningBlock
+                                        content={streamingMessage.reasoning}
+                                        isStreaming={!streamingMessage.reasoningDuration}
+                                        duration={streamingMessage.reasoningDuration}
+                                    />
+                                )}
+                                {streamingMessage.toolInvocations?.map((tool, idx) => (
+                                    <ToolInvocation
+                                        key={idx}
+                                        toolName={tool.toolName}
+                                        args={tool.args}
+                                        result={tool.result}
+                                        status={tool.status}
+                                    />
+                                ))}
+                                {streamingMessage.content && (
+                                    <div className="prose text-foreground">
+                                        <Markdown>{streamingMessage.content}</Markdown>
+                                    </div>
+                                )}
+                                {!streamingMessage.content && !streamingMessage.reasoning && (
+                                    <div className="flex items-center gap-3 text-muted-foreground py-2">
+                                        <div className="flex gap-1">
+                                            <span className="w-2 h-2 bg-blue-500 rounded-full animate-bounce" style={{ animationDelay: "0ms" }} />
+                                            <span className="w-2 h-2 bg-blue-500 rounded-full animate-bounce" style={{ animationDelay: "150ms" }} />
+                                            <span className="w-2 h-2 bg-blue-500 rounded-full animate-bounce" style={{ animationDelay: "300ms" }} />
+                                        </div>
+                                        <span className="text-sm">Thinking...</span>
+                                    </div>
+                                )}
+                            </div>
+                        )}
+                    </div>
+
+                    <div ref={messagesEndRef} className="h-4" />
+                </div>
+            </div>
+
+            {/* Input Area */}
+            <div className="sticky bottom-0 glass border-t border-border/50">
+                <div className="max-w-3xl mx-auto px-4 py-4">
+                    <form onSubmit={handleSubmit} className="relative">
+                        <div className={cn(
+                            "flex items-end gap-2 p-2 rounded-2xl border border-border bg-background/50 transition-all duration-200",
+                            "input-glow focus-within:border-primary/50"
+                        )}>
+                            {/* Web Search Toggle */}
+                            <button
+                                type="button"
+                                onClick={() => setSearchEnabled(!searchEnabled)}
+                                className={cn(
+                                    "shrink-0 w-10 h-10 rounded-xl flex items-center justify-center transition-all duration-200",
+                                    searchEnabled
+                                        ? "bg-blue-500 text-white shadow-lg shadow-blue-500/25"
+                                        : "bg-muted text-muted-foreground hover:bg-accent hover:text-foreground"
+                                )}
+                                title={searchEnabled ? "Web search enabled" : "Enable web search"}
+                            >
+                                <Globe className="w-5 h-5" />
+                            </button>
+
+                            {/* Textarea */}
+                            <textarea
+                                ref={textareaRef}
+                                value={input}
+                                onChange={(e) => setInput(e.target.value)}
+                                onKeyDown={handleKeyDown}
+                                placeholder="Message Qwen3 Claude Opus..."
+                                rows={1}
+                                disabled={isLoading}
+                                className={cn(
+                                    "flex-1 bg-transparent border-0 resize-none text-sm leading-6",
+                                    "placeholder:text-muted-foreground focus:outline-none focus:ring-0",
+                                    "min-h-[40px] max-h-[200px] py-2 px-1"
+                                )}
+                            />
+
+                            {/* Send Button */}
+                            <button
+                                type="submit"
+                                disabled={isLoading || !input.trim()}
+                                className={cn(
+                                    "shrink-0 w-10 h-10 rounded-xl flex items-center justify-center transition-all duration-200",
+                                    input.trim() && !isLoading
+                                        ? "bg-primary text-primary-foreground shadow-lg shadow-primary/25 hover:opacity-90"
+                                        : "bg-muted text-muted-foreground cursor-not-allowed"
+                                )}
+                            >
+                                {isLoading ? (
+                                    <Loader2 className="w-5 h-5 animate-spin" />
+                                ) : (
+                                    <Send className="w-5 h-5" />
+                                )}
+                            </button>
+                        </div>
+
+                        {/* Status Bar */}
+                        <div className="flex items-center justify-center gap-4 mt-3 text-xs text-muted-foreground">
+                            {searchEnabled && (
+                                <span className="flex items-center gap-1.5">
+                                    <span className="w-1.5 h-1.5 bg-green-500 rounded-full animate-pulse" />
+                                    Web search enabled
+                                </span>
+                            )}
+                            <span>Press Enter to send, Shift+Enter for new line</span>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+    );
+}

src/components/markdown.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import ReactMarkdown from "react-markdown";
+import { cn } from "@/lib/utils";
+
+interface MarkdownProps {
+    children: string;
+    className?: string;
+}
+
+export function Markdown({ children, className }: MarkdownProps) {
+    return (
+        <ReactMarkdown
+            className={cn("prose max-w-none", className)}
+            components={{
+                pre: ({ children }) => (
+                    <pre className="bg-muted/50 border border-border rounded-xl p-4 overflow-x-auto my-4 text-sm">
+                        {children}
+                    </pre>
+                ),
+                code: ({ children, className: codeClassName }) => {
+                    const isInline = !codeClassName;
+                    if (isInline) {
+                        return (
+                            <code className="bg-muted/70 px-1.5 py-0.5 rounded-md text-sm font-mono">
+                                {children}
+                            </code>
+                        );
+                    }
+                    return <code className={codeClassName}>{children}</code>;
+                },
+                p: ({ children }) => <p className="mb-4 last:mb-0 leading-7">{children}</p>,
+                ul: ({ children }) => <ul className="list-disc pl-6 mb-4 space-y-1">{children}</ul>,
+                ol: ({ children }) => <ol className="list-decimal pl-6 mb-4 space-y-1">{children}</ol>,
+                li: ({ children }) => <li className="leading-7">{children}</li>,
+                h1: ({ children }) => <h1 className="text-xl font-semibold mb-4 mt-6 first:mt-0">{children}</h1>,
+                h2: ({ children }) => <h2 className="text-lg font-semibold mb-3 mt-5 first:mt-0">{children}</h2>,
+                h3: ({ children }) => <h3 className="text-base font-semibold mb-2 mt-4 first:mt-0">{children}</h3>,
+                blockquote: ({ children }) => (
+                    <blockquote className="border-l-3 border-primary/50 pl-4 italic my-4 text-muted-foreground">
+                        {children}
+                    </blockquote>
+                ),
+                a: ({ children, href }) => (
+                    <a
+                        href={href}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="text-primary hover:underline underline-offset-2"
+                    >
+                        {children}
+                    </a>
+                ),
+                strong: ({ children }) => <strong className="font-semibold">{children}</strong>,
+                hr: () => <hr className="my-6 border-border" />,
+            }}
+        >
+            {children}
+        </ReactMarkdown>
+    );
+}

src/components/reasoning-block.tsx

@@ -0,0 +1,94 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { ChevronDown, Brain } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface ReasoningBlockProps {
+    content: string;
+    isStreaming?: boolean;
+    duration?: number;
+}
+
+export function ReasoningBlock({
+    content,
+    isStreaming = false,
+    duration,
+}: ReasoningBlockProps) {
+    const [isExpanded, setIsExpanded] = useState(isStreaming);
+
+    useEffect(() => {
+        if (!isStreaming && isExpanded) {
+            const timer = setTimeout(() => setIsExpanded(false), 800);
+            return () => clearTimeout(timer);
+        }
+    }, [isStreaming, isExpanded]);
+
+    const formatDuration = (seconds?: number) => {
+        if (!seconds) return "a few seconds";
+        if (seconds < 1) return "less than a second";
+        if (seconds === 1) return "1 second";
+        return `${Math.round(seconds)} seconds`;
+    };
+
+    return (
+        <div className="mb-4">
+            <button
+                onClick={() => setIsExpanded(!isExpanded)}
+                className={cn(
+                    "flex items-center gap-2.5 px-3 py-2 rounded-lg text-sm transition-all duration-200",
+                    "hover:bg-accent/50 group",
+                    isStreaming
+                        ? "text-blue-500"
+                        : "text-muted-foreground hover:text-foreground"
+                )}
+            >
+                <div className={cn(
+                    "w-6 h-6 rounded-md flex items-center justify-center transition-colors",
+                    isStreaming
+                        ? "bg-blue-500/10"
+                        : "bg-muted group-hover:bg-accent"
+                )}>
+                    <Brain className={cn(
+                        "w-3.5 h-3.5",
+                        isStreaming && "animate-pulse"
+                    )} />
+                </div>
+
+                {isStreaming ? (
+                    <span className="font-medium">Thinking...</span>
+                ) : (
+                    <span className="font-medium">Thought for {formatDuration(duration)}</span>
+                )}
+
+                <ChevronDown
+                    className={cn(
+                        "w-4 h-4 ml-auto transition-transform duration-200",
+                        isExpanded && "rotate-180"
+                    )}
+                />
+            </button>
+
+            <AnimatePresence initial={false}>
+                {isExpanded && (
+                    <motion.div
+                        initial={{ height: 0, opacity: 0 }}
+                        animate={{ height: "auto", opacity: 1 }}
+                        exit={{ height: 0, opacity: 0 }}
+                        transition={{ duration: 0.2, ease: "easeInOut" }}
+                        className="overflow-hidden"
+                    >
+                        <div className={cn(
+                            "mt-2 ml-3 pl-4 py-3 border-l-2 text-sm leading-relaxed",
+                            "text-muted-foreground whitespace-pre-wrap",
+                            isStreaming ? "border-blue-500/50" : "border-border"
+                        )}>
+                            {content || (isStreaming ? "" : "Processing...")}
+                        </div>
+                    </motion.div>
+                )}
+            </AnimatePresence>
+        </div>
+    );
+}

src/components/tool-invocation.tsx

@@ -0,0 +1,127 @@
+"use client";
+
+import { useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { ChevronDown, Globe, Loader2, CheckCircle2, XCircle, Search } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface ToolInvocationProps {
+    toolName: string;
+    args: Record<string, unknown>;
+    result?: string;
+    status: "pending" | "running" | "complete" | "error";
+}
+
+export function ToolInvocation({
+    toolName,
+    args,
+    result,
+    status,
+}: ToolInvocationProps) {
+    const [isExpanded, setIsExpanded] = useState(status === "running");
+
+    const getStatusIndicator = () => {
+        switch (status) {
+            case "pending":
+            case "running":
+                return (
+                    <div className="relative">
+                        <div className="w-5 h-5 rounded-full border-2 border-blue-500/30 border-t-blue-500 animate-spin" />
+                    </div>
+                );
+            case "complete":
+                return (
+                    <div className="w-5 h-5 rounded-full bg-green-500/10 flex items-center justify-center">
+                        <CheckCircle2 className="w-3.5 h-3.5 text-green-500" />
+                    </div>
+                );
+            case "error":
+                return (
+                    <div className="w-5 h-5 rounded-full bg-red-500/10 flex items-center justify-center">
+                        <XCircle className="w-3.5 h-3.5 text-red-500" />
+                    </div>
+                );
+        }
+    };
+
+    const getDisplayInfo = () => {
+        if (toolName === "web_search") {
+            const query = args.query as string;
+            return {
+                icon: <Globe className="w-4 h-4" />,
+                title: "Web Search",
+                subtitle: query,
+            };
+        }
+        return {
+            icon: <Search className="w-4 h-4" />,
+            title: toolName,
+            subtitle: JSON.stringify(args),
+        };
+    };
+
+    const info = getDisplayInfo();
+
+    return (
+        <div className={cn(
+            "mb-3 rounded-xl border overflow-hidden transition-all duration-200",
+            status === "running"
+                ? "border-blue-500/30 bg-blue-500/5"
+                : status === "error"
+                    ? "border-red-500/30 bg-red-500/5"
+                    : "border-border bg-muted/30"
+        )}>
+            <button
+                onClick={() => setIsExpanded(!isExpanded)}
+                className="w-full flex items-center gap-3 px-4 py-3 text-left hover:bg-accent/30 transition-colors"
+            >
+                {getStatusIndicator()}
+
+                <div className={cn(
+                    "w-8 h-8 rounded-lg flex items-center justify-center",
+                    status === "running" ? "bg-blue-500/10 text-blue-500" : "bg-muted text-muted-foreground"
+                )}>
+                    {info.icon}
+                </div>
+
+                <div className="flex-1 min-w-0">
+                    <p className="text-sm font-medium">{info.title}</p>
+                    <p className="text-xs text-muted-foreground truncate">{info.subtitle}</p>
+                </div>
+
+                <ChevronDown
+                    className={cn(
+                        "w-4 h-4 text-muted-foreground transition-transform duration-200 shrink-0",
+                        isExpanded && "rotate-180"
+                    )}
+                />
+            </button>
+
+            <AnimatePresence initial={false}>
+                {isExpanded && (
+                    <motion.div
+                        initial={{ height: 0 }}
+                        animate={{ height: "auto" }}
+                        exit={{ height: 0 }}
+                        transition={{ duration: 0.2, ease: "easeInOut" }}
+                        className="overflow-hidden"
+                    >
+                        <div className="px-4 pb-4 pt-2 border-t border-border/50">
+                            {result && (
+                                <div className="text-sm text-muted-foreground max-h-48 overflow-y-auto whitespace-pre-wrap rounded-lg bg-background/50 p-3">
+                                    {result}
+                                </div>
+                            )}
+                            {!result && status === "running" && (
+                                <div className="flex items-center gap-2 text-sm text-blue-500">
+                                    <Loader2 className="w-4 h-4 animate-spin" />
+                                    <span>Fetching results...</span>
+                                </div>
+                            )}
+                        </div>
+                    </motion.div>
+                )}
+            </AnimatePresence>
+        </div>
+    );
+}

src/components/ui/button.tsx

@@ -0,0 +1,49 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+    "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+    {
+        variants: {
+            variant: {
+                default: "bg-foreground text-background shadow hover:bg-foreground/90",
+                ghost: "hover:bg-accent hover:text-accent-foreground",
+                outline: "border border-border bg-transparent hover:bg-accent",
+            },
+            size: {
+                default: "h-9 px-4 py-2",
+                sm: "h-8 rounded-md px-3 text-xs",
+                lg: "h-10 rounded-md px-8",
+                icon: "h-9 w-9",
+            },
+        },
+        defaultVariants: {
+            variant: "default",
+            size: "default",
+        },
+    }
+);
+
+export interface ButtonProps
+    extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+    ({ className, variant, size, asChild = false, ...props }, ref) => {
+        const Comp = asChild ? Slot : "button";
+        return (
+            <Comp
+                className={cn(buttonVariants({ variant, size, className }))}
+                ref={ref}
+                {...props}
+            />
+        );
+    }
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };

src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+    return twMerge(clsx(inputs));
+}

tailwind.config.ts

@@ -0,0 +1,32 @@
+import type { Config } from "tailwindcss";
+
+const config: Config = {
+    darkMode: "class",
+    content: ["./src/**/*.{js,ts,jsx,tsx,mdx}"],
+    theme: {
+        extend: {
+            colors: {
+                background: "hsl(var(--background))",
+                foreground: "hsl(var(--foreground))",
+                muted: {
+                    DEFAULT: "hsl(var(--muted))",
+                    foreground: "hsl(var(--muted-foreground))",
+                },
+                accent: {
+                    DEFAULT: "hsl(var(--accent))",
+                    foreground: "hsl(var(--accent-foreground))",
+                },
+                border: "hsl(var(--border))",
+                ring: "hsl(var(--ring))",
+            },
+            borderRadius: {
+                lg: "var(--radius)",
+                md: "calc(var(--radius) - 2px)",
+                sm: "calc(var(--radius) - 4px)",
+            },
+        },
+    },
+    plugins: [],
+};
+
+export default config;

tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [{ "name": "next" }],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}