fix: add diagnostic logging for empty message content

Added logging to capture the original UI message structure when empty content
is detected after conversion. This helps debug the root cause while the
filter provides a safety net for Bedrock API compatibility.

.eslintrc.json

@@ -0,0 +1,6 @@
+{
+  "extends": [
+    "next/core-web-vitals",
+    "next/typescript"
+  ]
+}

.github/workflows/claude-code.yml

@@ -0,0 +1,118 @@
+name: Claude Code
+
+on:
+  issue_comment:
+    types: [created]
+  pull_request_review_comment:
+    types: [created]
+  issues:
+    types: [opened, assigned]
+  pull_request_review:
+    types: [submitted]
+  pull_request_target:
+    types: [opened, synchronize, reopened]
+
+jobs:
+  claude:
+    if: |
+      (github.event_name == 'issue_comment' && contains(github.event.comment.body, '@claude')) ||
+      (github.event_name == 'pull_request_review_comment' && contains(github.event.comment.body, '@claude')) ||
+      (github.event_name == 'pull_request_review' && contains(github.event.review.body, '@claude')) ||
+      (github.event_name == 'issues' && contains(github.event.issue.body, '@claude'))
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      pull-requests: write
+      issues: write
+      id-token: write
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Configure AWS Credentials
+        uses: aws-actions/configure-aws-credentials@v4
+        with:
+          role-to-assume: ${{ secrets.AWS_ROLE_TO_ASSUME }}
+          aws-region: us-east-1
+
+      - name: Run Claude Code
+        uses: anthropics/claude-code-action@v1
+        with:
+          use_bedrock: "true"
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+
+  pr-review:
+    if: github.event_name == 'pull_request_target'
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      pull-requests: write
+      id-token: write
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Configure AWS Credentials
+        uses: aws-actions/configure-aws-credentials@v4
+        with:
+          role-to-assume: ${{ secrets.AWS_ROLE_TO_ASSUME }}
+          aws-region: us-east-1
+
+      - name: Run Claude Code PR Review
+        uses: anthropics/claude-code-action@v1
+        with:
+          use_bedrock: "true"
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          allowed_non_write_users: "*"
+          prompt: |
+            REPO: ${{ github.repository }}
+            PR NUMBER: ${{ github.event.pull_request.number }}
+
+            This is a personal project - an AI-powered draw.io diagram generator built with:
+            - Next.js 15 with React 19
+            - Vercel AI SDK (streamText, useChat, tool calling)
+            - Multiple AI providers: Bedrock, Anthropic, OpenAI, Google, Azure, OpenRouter, Ollama
+
+            STEP 1: Check existing comments to avoid duplicates.
+            Run: `gh api repos/${{ github.repository }}/pulls/${{ github.event.pull_request.number }}/comments`
+
+            Build a list of files and line numbers that already have comments. For each existing comment:
+            - If the issue is FIXED in current code, resolve the thread using:
+              `gh api graphql -f query='mutation { resolveReviewThread(input: {threadId: "THREAD_ID"}) { thread { isResolved } } }'`
+            - If the issue still exists, remember this file:line - DO NOT create a new comment for it
+
+            STEP 2: Review the diff for issues, but SKIP any file:line that already has a comment.
+
+            Review this PR for these issues (report ALL that apply):
+            1. Bugs that would cause runtime errors or broken functionality
+            2. Security issues (exposed secrets, API key leaks)
+            3. AI SDK misuse - specifically check for:
+               - Client-side: Should use useChat/useCompletion/useObject hooks, NOT raw fetch()
+               - Server-side: Should use streamText/generateText/streamObject/generateObject
+               - Message handling: Access message.parts array, not legacy content property
+               - Tool definitions: Must use Zod schemas for inputSchema
+               - Status handling: Check status (submitted/streaming/ready/error) before actions
+               - Stream cleanup: Call stop() when aborting streams
+            4. Unrelated changes that should be in separate PRs (scope creep)
+            5. Suspicious .gitignore additions or accidentally committed files
+            6. UI/UX inconsistencies (e.g., alignment issues)
+
+            When reviewing AI SDK usage, fetch https://ai-sdk.dev/docs/ to verify correct patterns.
+            Key doc pages: /docs/ai-sdk-ui/chatbot, /docs/ai-sdk-core/generating-text, /docs/ai-sdk-core/tools-and-tool-calling
+
+            DO NOT comment on:
+            - Minor performance optimizations
+            - Code style preferences (unless clearly wrong)
+            - Type annotations that don't affect functionality
+
+            IMPORTANT:
+            - NEVER create a comment on a file:line that already has a comment - this causes duplicates
+            - For each NEW issue, use `mcp__github_inline_comment__create_inline_comment` to comment on the specific line
+            - ALWAYS include a suggested fix using GitHub's suggestion syntax: ```suggestion\n<fixed code>\n```
+            - Only say "LGTM" if there are truly ZERO new issues to report
+          claude_args: |
+            --allowedTools "mcp__github_inline_comment__create_inline_comment,Bash(gh pr diff:*),Bash(gh pr view:*),Bash(gh api:*),WebFetch(domain:ai-sdk.dev)"

README.md

@@ -68,7 +68,7 @@ Diagrams are represented as XML that can be rendered in draw.io. The AI processe
 ## Multi-Provider Support
 
 -   AWS Bedrock (default)
--   OpenAI
+-   OpenAI / OpenAI-compatible APIs (via `OPENAI_BASE_URL`)
 -   Anthropic
 -   Google AI
 -   Azure OpenAI

app/api/chat/route.ts

@@ -2,7 +2,7 @@ import { streamText, convertToModelMessages } from 'ai';
 import { getAIModel } from '@/lib/ai-providers';
 import { z } from "zod";
 
-export const maxDuration = 60;
+export const maxDuration = 300;
 
 export async function POST(req: Request) {
   try {
@@ -90,7 +90,30 @@ ${lastMessageText}
 
     // Convert UIMessages to ModelMessages and add system message
     const modelMessages = convertToModelMessages(messages);
-    let enhancedMessages = [...modelMessages];
+
+    // Log messages with empty content for debugging (helps identify root cause)
+    const emptyMessages = modelMessages.filter((msg: any) =>
+      !msg.content || !Array.isArray(msg.content) || msg.content.length === 0
+    );
+    if (emptyMessages.length > 0) {
+      console.warn('[Chat API] Messages with empty content detected:',
+        JSON.stringify(emptyMessages.map((m: any) => ({ role: m.role, contentLength: m.content?.length })))
+      );
+      console.warn('[Chat API] Original UI messages structure:',
+        JSON.stringify(messages.map((m: any) => ({
+          id: m.id,
+          role: m.role,
+          partsCount: m.parts?.length,
+          partTypes: m.parts?.map((p: any) => p.type)
+        })))
+      );
+    }
+
+    // Filter out messages with empty content arrays (Bedrock API rejects these)
+    // This is a safety measure - ideally convertToModelMessages should handle all cases
+    let enhancedMessages = modelMessages.filter((msg: any) =>
+      msg.content && Array.isArray(msg.content) && msg.content.length > 0
+    );
 
     // Update the last message with formatted content if it's a user message
     if (enhancedMessages.length >= 1) {
@@ -120,13 +143,14 @@ ${lastMessageText}
     console.log("Enhanced messages:", enhancedMessages);
 
     // Get AI model from environment configuration
-    const { model, providerOptions } = getAIModel();
+    const { model, providerOptions, headers } = getAIModel();
 
     const result = streamText({
       model,
       system: systemMessage,
       messages: enhancedMessages,
       ...(providerOptions && { providerOptions }),
+      ...(headers && { headers }),
       tools: {
         // Client-side tool that will be executed on the client
         display_diagram: {

app/page.tsx

@@ -40,20 +40,19 @@ export default function Home() {
         };
     }, []);
 
-    if (isMobile) {
-        return (
-            <div className="flex items-center justify-center h-screen bg-gray-100">
-                <div className="text-center p-8">
-                    <h1 className="text-2xl font-semibold text-gray-800">
-                        Please open this application on a desktop or laptop
-                    </h1>
-                </div>
-            </div>
-        );
-    }
-
     return (
-        <div className="flex h-screen bg-gray-100">
+        <div className="flex h-screen bg-gray-100 relative">
+            {/* Mobile warning overlay - keeps components mounted */}
+            {isMobile && (
+                <div className="absolute inset-0 z-50 flex items-center justify-center bg-gray-100">
+                    <div className="text-center p-8">
+                        <h1 className="text-2xl font-semibold text-gray-800">
+                            Please open this application on a desktop or laptop
+                        </h1>
+                    </div>
+                </div>
+            )}
+
             <div className={`${isChatVisible ? 'w-2/3' : 'w-full'} p-1 h-full relative transition-all duration-300 ease-in-out`}>
                 <DrawIoEmbed
                     ref={drawioRef}

components/chat-message-display.tsx

@@ -1,15 +1,23 @@
 "use client";
 
-import type React from "react";
 import { useRef, useEffect, useState, useCallback } from "react";
 import Image from "next/image";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import ExamplePanel from "./chat-example-panel";
 import { UIMessage } from "ai";
 import { convertToLegalXml, replaceNodes } from "@/lib/utils";
+import { Copy, Check, X } from "lucide-react";
 
 import { useDiagram } from "@/contexts/diagram-context";
 
+const getMessageTextContent = (message: UIMessage): string => {
+    if (!message.parts) return "";
+    return message.parts
+        .filter((part: any) => part.type === "text")
+        .map((part: any) => part.text)
+        .join("\n");
+};
+
 interface ChatMessageDisplayProps {
     messages: UIMessage[];
     error?: Error | null;
@@ -30,6 +38,21 @@ export function ChatMessageDisplay({
     const [expandedTools, setExpandedTools] = useState<Record<string, boolean>>(
         {}
     );
+    const [copiedMessageId, setCopiedMessageId] = useState<string | null>(null);
+    const [copyFailedMessageId, setCopyFailedMessageId] = useState<string | null>(null);
+
+    const copyMessageToClipboard = async (messageId: string, text: string) => {
+        try {
+            await navigator.clipboard.writeText(text);
+            setCopiedMessageId(messageId);
+            setTimeout(() => setCopiedMessageId(null), 2000);
+        } catch (err) {
+            console.error("Failed to copy message:", err);
+            setCopyFailedMessageId(messageId);
+            setTimeout(() => setCopyFailedMessageId(null), 2000);
+        }
+    };
+
     const handleDisplayChart = useCallback(
         (xml: string) => {
             const currentXml = xml || "";
@@ -137,16 +160,16 @@ export function ChatMessageDisplay({
                                 {output || (toolName === "display_diagram"
                                     ? "Diagram generated"
                                     : toolName === "edit_diagram"
-                                    ? "Diagram edited"
-                                    : "Tool executed")}
+                                        ? "Diagram edited"
+                                        : "Tool executed")}
                             </div>
                         ) : state === "output-error" ? (
                             <div className="text-red-600">
                                 {output || (toolName === "display_diagram"
                                     ? "Error generating diagram"
                                     : toolName === "edit_diagram"
-                                    ? "Error editing diagram"
-                                    : "Tool error")}
+                                        ? "Error editing diagram"
+                                        : "Tool error")}
                             </div>
                         ) : null}
                     </div>
@@ -160,51 +183,66 @@ export function ChatMessageDisplay({
             {messages.length === 0 ? (
                 <ExamplePanel setInput={setInput} setFiles={setFiles} />
             ) : (
-                messages.map((message) => (
-                    <div
-                        key={message.id}
-                        className={`mb-4 ${
-                            message.role === "user" ? "text-right" : "text-left"
-                        }`}
-                    >
+                messages.map((message) => {
+                    const userMessageText = message.role === "user" ? getMessageTextContent(message) : "";
+                    return (
                         <div
-                            className={`inline-block px-4 py-2 whitespace-pre-wrap text-sm rounded-lg max-w-[85%] break-words ${
-                                message.role === "user"
-                                    ? "bg-primary text-primary-foreground"
-                                    : "bg-muted text-muted-foreground"
-                            }`}
+                            key={message.id}
+                            className={`mb-4 flex ${message.role === "user" ? "justify-end" : "justify-start"}`}
                         >
-                            {message.parts?.map((part: any, index: number) => {
-                                switch (part.type) {
-                                    case "text":
-                                        return (
-                                            <div key={index}>{part.text}</div>
-                                        );
-                                    case "file":
-                                        return (
-                                            <div key={index} className="mt-2">
-                                                <Image
-                                                    src={part.url}
-                                                    width={200}
-                                                    height={200}
-                                                    alt={`Uploaded diagram or image for AI analysis`}
-                                                    className="rounded-md border"
-                                                    style={{
-                                                        objectFit: "contain",
-                                                    }}
-                                                />
-                                            </div>
-                                        );
-                                    default:
-                                        if (part.type?.startsWith("tool-")) {
-                                            return renderToolPart(part);
-                                        }
-                                        return null;
-                                }
-                            })}
+                            {message.role === "user" && userMessageText && (
+                                <button
+                                    onClick={() => copyMessageToClipboard(message.id, userMessageText)}
+                                    className="p-1 text-gray-400 hover:text-gray-600 transition-colors self-center mr-1"
+                                    title={copiedMessageId === message.id ? "Copied!" : copyFailedMessageId === message.id ? "Failed to copy" : "Copy message"}
+                                >
+                                    {copiedMessageId === message.id ? (
+                                        <Check className="h-3.5 w-3.5 text-green-500" />
+                                    ) : copyFailedMessageId === message.id ? (
+                                        <X className="h-3.5 w-3.5 text-red-500" />
+                                    ) : (
+                                        <Copy className="h-3.5 w-3.5" />
+                                    )}
+                                </button>
+                            )}
+                            <div
+                                className={`px-4 py-2 whitespace-pre-wrap text-sm rounded-lg max-w-[85%] break-words ${message.role === "user"
+                                        ? "bg-primary text-primary-foreground"
+                                        : "bg-muted text-muted-foreground"
+                                    }`}
+                            >
+                                {message.parts?.map((part: any, index: number) => {
+                                    switch (part.type) {
+                                        case "text":
+                                            return (
+                                                <div key={index}>{part.text}</div>
+                                            );
+                                        case "file":
+                                            return (
+                                                <div key={index} className="mt-2">
+                                                    <Image
+                                                        src={part.url}
+                                                        width={200}
+                                                        height={200}
+                                                        alt={`Uploaded diagram or image for AI analysis`}
+                                                        className="rounded-md border"
+                                                        style={{
+                                                            objectFit: "contain",
+                                                        }}
+                                                    />
+                                                </div>
+                                            );
+                                        default:
+                                            if (part.type?.startsWith("tool-")) {
+                                                return renderToolPart(part);
+                                            }
+                                            return null;
+                                    }
+                                })}
+                            </div>
                         </div>
-                    </div>
-                ))
+                    );
+                })
             )}
             {error && (
                 <div className="text-red-500 text-sm mt-2">

env.example

@@ -14,6 +14,7 @@ AI_MODEL=global.anthropic.claude-sonnet-4-5-20250929-v1:0
 
 # OpenAI Configuration
 # OPENAI_API_KEY=sk-...
+# OPENAI_BASE_URL=https://api.openai.com/v1  # Optional: Custom OpenAI-compatible endpoint
 # OPENAI_ORGANIZATION=org-...  # Optional
 # OPENAI_PROJECT=proj_...      # Optional
 

lib/ai-providers.ts

@@ -1,5 +1,5 @@
 import { bedrock } from '@ai-sdk/amazon-bedrock';
-import { openai } from '@ai-sdk/openai';
+import { openai, createOpenAI } from '@ai-sdk/openai';
 import { anthropic } from '@ai-sdk/anthropic';
 import { google } from '@ai-sdk/google';
 import { azure } from '@ai-sdk/azure';
@@ -18,15 +18,19 @@ export type ProviderName =
 interface ModelConfig {
   model: any;
   providerOptions?: any;
+  headers?: Record<string, string>;
 }
 
-// Anthropic beta headers for fine-grained tool streaming
-const ANTHROPIC_BETA_OPTIONS = {
-  anthropic: {
-    additionalModelRequestFields: {
-      anthropic_beta: ['fine-grained-tool-streaming-2025-05-14']
-    }
-  }
+// Bedrock provider options for Anthropic beta features
+const BEDROCK_ANTHROPIC_BETA = {
+  bedrock: {
+    anthropicBeta: ['fine-grained-tool-streaming-2025-05-14'],
+  },
+};
+
+// Direct Anthropic API headers for beta features
+const ANTHROPIC_BETA_HEADERS = {
+  'anthropic-beta': 'fine-grained-tool-streaming-2025-05-14',
 };
 
 /**
@@ -61,6 +65,7 @@ function validateProviderCredentials(provider: ProviderName): void {
  *
  * Provider-specific env vars:
  * - OPENAI_API_KEY: OpenAI API key
+ * - OPENAI_BASE_URL: Custom OpenAI-compatible endpoint (optional)
  * - ANTHROPIC_API_KEY: Anthropic API key
  * - GOOGLE_GENERATIVE_AI_API_KEY: Google API key
  * - AZURE_RESOURCE_NAME, AZURE_API_KEY: Azure OpenAI credentials
@@ -86,24 +91,33 @@ export function getAIModel(): ModelConfig {
 
   let model: any;
   let providerOptions: any = undefined;
+  let headers: Record<string, string> | undefined = undefined;
 
   switch (provider) {
     case 'bedrock':
       model = bedrock(modelId);
-      // Add Anthropic beta headers if using Claude models via Bedrock
+      // Add Anthropic beta options if using Claude models via Bedrock
       if (modelId.includes('anthropic.claude')) {
-        providerOptions = ANTHROPIC_BETA_OPTIONS;
+        providerOptions = BEDROCK_ANTHROPIC_BETA;
       }
       break;
 
     case 'openai':
-      model = openai(modelId);
+      if (process.env.OPENAI_BASE_URL) {
+        const customOpenAI = createOpenAI({
+          apiKey: process.env.OPENAI_API_KEY,
+          baseURL: process.env.OPENAI_BASE_URL,
+        });
+        model = customOpenAI.chat(modelId);
+      } else {
+        model = openai(modelId);
+      }
       break;
 
     case 'anthropic':
       model = anthropic(modelId);
       // Add beta headers for fine-grained tool streaming
-      providerOptions = ANTHROPIC_BETA_OPTIONS;
+      headers = ANTHROPIC_BETA_HEADERS;
       break;
 
     case 'google':
@@ -131,10 +145,10 @@ export function getAIModel(): ModelConfig {
       );
   }
 
-  // Log if provider options are being applied
-  if (providerOptions) {
-    console.log('[AI Provider] Applying provider-specific options');
+  // Log if provider options or headers are being applied
+  if (providerOptions || headers) {
+    console.log('[AI Provider] Applying provider-specific options/headers');
   }
 
-  return { model, providerOptions };
+  return { model, providerOptions, headers };
 }

package.json

@@ -9,7 +9,7 @@
         "lint": "next lint"
     },
     "dependencies": {
-        "@ai-sdk/amazon-bedrock": "^3.0.52",
+        "@ai-sdk/amazon-bedrock": "^3.0.62",
         "@ai-sdk/anthropic": "^2.0.44",
         "@ai-sdk/azure": "^2.0.69",
         "@ai-sdk/google": "^2.0.0",
@@ -46,6 +46,8 @@
         "@types/pako": "^2.0.3",
         "@types/react": "^19",
         "@types/react-dom": "^19",
+        "eslint": "9.39.1",
+        "eslint-config-next": "16.0.5",
         "tailwindcss": "^4",
         "typescript": "^5"
     }