fix: remove deprecated instrumentationHook (enabled by default in Next.js 15)

feat: add optional Langfuse observability integration
- Add session tracking with unique sessionId per conversation - Add user tracking via IP address (x-forwarded-for header) - Make telemetry conditional - only enabled if LANGFUSE_PUBLIC_KEY is set - Add environment variable validation in instrumentation.ts - Add sessionId validation (type check + 200 char limit) - Update env.example with Langfuse configuration docs - Remove unused langfuse-vercel and @vercel/otel packages
2026-01-03 06:42:27 +08:00 · 2025-12-04 00:15:56 +09:00 · 2025-12-04 00:13:42 +09:00 · 2025-12-03 23:41:20 +09:00 · 2025-12-03 21:58:48 +09:00 · 2025-12-03 21:49:34 +09:00
40 changed files with 8662 additions and 567 deletions
--- a/.dockerignore
+++ b/.dockerignore
@@ -0,0 +1,60 @@
+# Dependencies
+node_modules
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Build output
+.next
+out
+dist
+build
+
+# Testing
+coverage
+.nyc_output
+
+# Environment variables
+.env
+.env*.local
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# Git
+.git
+.gitignore
+.gitattributes
+
+# IDE
+.vscode
+.idea
+*.swp
+*.swo
+*~
+
+# Operating System
+.DS_Store
+Thumbs.db
+
+# Documentation
+README.md
+*.md
+!env.example
+
+# CI/CD
+.github
+.gitlab-ci.yml
+.travis.yml
+
+# Docker
+Dockerfile
+.dockerignore
+docker-compose*.yml
+
+# Other
+*.log
+.cache
+.turbo
+
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -0,0 +1,6 @@
+{
+  "extends": [
+    "next/core-web-vitals",
+    "next/typescript"
+  ]
+}
--- a/.github/FUNDING.yml
+++ b/.github/FUNDING.yml
@@ -0,0 +1,15 @@
+# These are supported funding model platforms
+
+github: dayuanjiang
+patreon: # Replace with a single Patreon username
+open_collective: # Replace with a single Open Collective username
+ko_fi: # Replace with a single Ko-fi username
+tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
+community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
+liberapay: # Replace with a single Liberapay username
+issuehunt: # Replace with a single IssueHunt username
+lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
+polar: # Replace with a single Polar username
+buy_me_a_coffee: # Replace with a single Buy Me a Coffee username
+thanks_dev: # Replace with a single thanks.dev username
+custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']
--- a/.github/workflows/docker-build.yml
+++ b/.github/workflows/docker-build.yml
@@ -0,0 +1,66 @@
+name: Docker Build and Push
+
+on:
+  push:
+    branches:
+      - main
+      - master
+      - dev
+    tags:
+      - 'v*'
+  pull_request:
+    branches:
+      - main
+      - master
+
+env:
+  REGISTRY: ghcr.io
+  IMAGE_NAME: ${{ github.repository }}
+
+jobs:
+  build-and-push:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+      
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Log in to GitHub Container Registry
+        if: github.event_name != 'pull_request'
+        uses: docker/login-action@v3
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Extract metadata (tags, labels)
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+          tags: |
+            type=ref,event=branch
+            type=ref,event=pr
+            type=semver,pattern={{version}}
+            type=semver,pattern={{major}}.{{minor}}
+            type=semver,pattern={{major}}
+            type=sha,prefix=sha-
+            type=raw,value=latest,enable={{is_default_branch}}
+
+      - name: Build and push Docker image
+        uses: docker/build-push-action@v5
+        with:
+          context: .
+          push: ${{ github.event_name != 'pull_request' }}
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
+          platforms: linux/amd64,linux/arm64
+
--- a/55
+++ b/55
@@ -0,0 +1,55 @@
+# Multi-stage Dockerfile for Next.js
+
+# Stage 1: Install dependencies
+FROM node:20-alpine AS deps
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+
+# Copy package files
+COPY package.json package-lock.json* ./
+
+# Install dependencies
+RUN npm ci
+
+# Stage 2: Build application
+FROM node:20-alpine AS builder
+WORKDIR /app
+
+# Copy node_modules from deps stage
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+# Disable Next.js telemetry during build
+ENV NEXT_TELEMETRY_DISABLED=1
+
+# Build Next.js application (standalone mode)
+RUN npm run build
+
+# Stage 3: Production runtime
+FROM node:20-alpine AS runner
+WORKDIR /app
+
+ENV NODE_ENV=production
+ENV NEXT_TELEMETRY_DISABLED=1
+
+# Create non-root user for security
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+# Copy necessary files
+COPY --from=builder /app/public ./public
+
+# Copy standalone build output
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+USER nextjs
+
+EXPOSE 3000
+
+ENV PORT=3000
+ENV HOSTNAME="0.0.0.0"
+
+# Start the application
+CMD ["node", "server.js"]
+
--- a/README.md
+++ b/README.md
@@ -1,49 +1,118 @@
 # Next AI Draw.io

-A next.js web application that integrates AI capabilities with draw.io diagrams. This app allows you to create, modify, and enhance diagrams through natural language commands and AI-assisted visualization.
+<div align="center">
+
+**AI-Powered Diagram Creation Tool - Chat, Draw, Visualize**
+
+English | [中文](./README_CN.md) | [日本語](./README_JA.md)
+
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![Next.js](https://img.shields.io/badge/Next.js-15.x-black)](https://nextjs.org/)
+[![TypeScript](https://img.shields.io/badge/TypeScript-5.x-blue)](https://www.typescriptlang.org/)
+[![Sponsor](https://img.shields.io/badge/Sponsor-❤-ea4aaa)](https://github.com/sponsors/DayuanJiang)
+
+[🚀 Live Demo](https://next-ai-drawio.jiang.jp/)
+
+</div>
+
+A Next.js web application that integrates AI capabilities with draw.io diagrams. Create, modify, and enhance diagrams through natural language commands and AI-assisted visualization.

 https://github.com/user-attachments/assets/b2eef5f3-b335-4e71-a755-dc2e80931979

-Demo site: [https://next-ai-draw-io.vercel.app/](https://next-ai-draw-io.vercel.app/)
-
 ## Features

 -   **LLM-Powered Diagram Creation**: Leverage Large Language Models to create and manipulate draw.io diagrams directly through natural language commands
 -   **Image-Based Diagram Replication**: Upload existing diagrams or images and have the AI replicate and enhance them automatically
 -   **Diagram History**: Comprehensive version control that tracks all changes, allowing you to view and restore previous versions of your diagrams before the AI editing.
 -   **Interactive Chat Interface**: Communicate with AI to refine your diagrams in real-time
-   **Smart Editing**: Modify existing diagrams using simple text prompts
-   **Targeted XML Editing**: AI can now make precise edits to specific parts of diagrams without regenerating the entire XML, making updates faster and more efficient
+-   **AWS Architecture Diagram Support**: Specialized support for generating AWS architecture diagrams
+-   **Animated Connectors**: Create dynamic and animated connectors between diagram elements for better visualization
+
+## **Examples**
+
+Here are some example prompts and their generated diagrams:
+
+<div align="center">
+<table width="100%">
+  <tr>
+    <td colspan="2" valign="top" align="center">
+      <strong>Animated transformer connectors</strong><br />
+      <p><strong>Prompt:</strong> Give me a **animated connector** diagram of transformer's architecture.</p>
+      <img src="./public/animated_connectors.svg" alt="Transformer Architecture with Animated Connectors" width="480" />
+    </td>
+  </tr>
+  <tr>
+    <td width="50%" valign="top">
+      <strong>GCP architecture diagram</strong><br />
+      <p><strong>Prompt:</strong> Generate a GCP architecture diagram with **GCP icons**. In this diagram, users connect to a frontend hosted on an instance.</p>
+      <img src="./public/gcp_demo.svg" alt="GCP Architecture Diagram" width="480" />
+    </td>
+    <td width="50%" valign="top">
+      <strong>AWS architecture diagram</strong><br />
+      <p><strong>Prompt:</strong> Generate a AWS architecture diagram with **AWS icons**. In this diagram, users connect to a frontend hosted on an instance.</p>
+      <img src="./public/aws_demo.svg" alt="AWS Architecture Diagram" width="480" />
+    </td>
+  </tr>
+  <tr>
+    <td width="50%" valign="top">
+      <strong>Azure architecture diagram</strong><br />
+      <p><strong>Prompt:</strong> Generate a Azure architecture diagram with **Azure icons**. In this diagram, users connect to a frontend hosted on an instance.</p>
+      <img src="./public/azure_demo.svg" alt="Azure Architecture Diagram" width="480" />
+    </td>
+    <td width="50%" valign="top">
+      <strong>Cat sketch prompt</strong><br />
+      <p><strong>Prompt:</strong> Draw a cute cat for me.</p>
+      <img src="./public/cat_demo.svg" alt="Cat Drawing" width="240" />
+    </td>
+  </tr>
+</table>
+</div>

 ## How It Works

 The application uses the following technologies:

 -   **Next.js**: For the frontend framework and routing
-   **@ai-sdk/react**: For the chat interface and AI interactions
+-   **Vercel AI SDK** (`ai` + `@ai-sdk/*`): For streaming AI responses and multi-provider support
 -   **react-drawio**: For diagram representation and manipulation

 Diagrams are represented as XML that can be rendered in draw.io. The AI processes your commands and generates or modifies this XML accordingly.

 ## Multi-Provider Support

-This application supports multiple AI providers, making it easy to deploy with your preferred service. Choose from:
-
-### Supported Providers
-
-| Provider         | Status       | Best For                                    |
-| ---------------- | ------------ | ------------------------------------------- |
-| **AWS Bedrock**  | ✅ Default   | Claude models via AWS infrastructure        |
-| **OpenAI**       | ✅ Supported | GPT-4, GPT-5, and reasoning models          |
-| **Anthropic**    | ✅ Supported | Direct access to Claude models              |
-| **Google AI**    | ✅ Supported | Gemini models with multi-modal capabilities |
-| **Azure OpenAI** | ✅ Supported | Enterprise OpenAI deployments               |
-| **Ollama**       | ✅ Supported | Local/self-hosted open source models        |
+-   AWS Bedrock (default)
+-   OpenAI / OpenAI-compatible APIs (via `OPENAI_BASE_URL`)
+-   Anthropic
+-   Google AI
+-   Azure OpenAI
+-   Ollama
+-   OpenRouter
+-   DeepSeek

 Note that `claude-sonnet-4-5` has trained on draw.io diagrams with AWS logos, so if you want to create AWS architecture diagrams, this is the best choice.

 ## Getting Started

+### Run with Docker (Recommended)
+
+If you just want to run it locally, the best way is to use Docker.
+
+First, install Docker if you haven't already: [Get Docker](https://docs.docker.com/get-docker/)
+
+Then run:
+
+```bash
+docker run -d -p 3000:3000 \
+  -e AI_PROVIDER=openai \
+  -e AI_MODEL=gpt-4o \
+  -e OPENAI_API_KEY=your_api_key \
+  ghcr.io/dayuanjiang/next-ai-draw-io:latest
+```
+
+Open [http://localhost:3000](http://localhost:3000) in your browser.
+
+Replace the environment variables with your preferred AI provider configuration. See [Multi-Provider Support](#multi-provider-support) for available options.
+
 ### Installation

 1. Clone the repository:
@@ -71,7 +140,7 @@ cp env.example .env.local

 Edit `.env.local` and configure your chosen provider:

-   Set `AI_PROVIDER` to your chosen provider (bedrock, openai, anthropic, google, azure, ollama)
+-   Set `AI_PROVIDER` to your chosen provider (bedrock, openai, anthropic, google, azure, ollama, openrouter, deepseek)
 -   Set `AI_MODEL` to the specific model you want to use
 -   Add the required API keys for your provider

@@ -99,14 +168,19 @@ Be sure to **set the environment variables** in the Vercel dashboard as you did
 ## Project Structure

 ```
-app/                  # Next.js application routes and pages
-  extract_xml.ts      # Utilities for XML processing
+app/                  # Next.js App Router
+  api/chat/           # Chat API endpoint with AI tools
+  page.tsx            # Main page with DrawIO embed
 components/           # React components
-  chat-input.tsx      # User input component for AI interaction
-  chatPanel.tsx       # Chat interface with diagram control
+  chat-panel.tsx      # Chat interface with diagram control
+  chat-input.tsx      # User input component with file upload
+  history-dialog.tsx  # Diagram version history viewer
  ui/                 # UI components (buttons, cards, etc.)
+contexts/             # React context providers
+  diagram-context.tsx # Global diagram state management
 lib/                  # Utility functions and helpers
-  utils.ts            # General utilities including XML conversion
+  ai-providers.ts     # Multi-provider AI configuration
+  utils.ts            # XML processing and conversion utilities
 public/               # Static assets including example images
 ```

@@ -115,15 +189,19 @@ public/               # Static assets including example images
 -   [x] Allow the LLM to modify the XML instead of generating it from scratch everytime.
 -   [x] Improve the smoothness of shape streaming updates.
 -   [x] Add multiple AI provider support (OpenAI, Anthropic, Google, Azure, Ollama)
-
-## License
-
-This project is licensed under the MIT License.
+-   [x] Solve the bug that generation will fail for session that longer than 60s.
+-   [ ] Add API config on the UI.

 ## Support & Contact

+If you find this project useful, please consider [sponsoring](https://github.com/sponsors/DayuanJiang) to help me host the live demo site!
+
 For support or inquiries, please open an issue on the GitHub repository or contact the maintainer at:

 -   Email: me[at]jiang.jp

+## Star History
+
+[![Star History Chart](https://api.star-history.com/svg?repos=DayuanJiang/next-ai-draw-io&type=date&legend=top-left)](https://www.star-history.com/#DayuanJiang/next-ai-draw-io&type=date&legend=top-left)
+
 ---
--- a/README_CN.md
+++ b/README_CN.md
@@ -0,0 +1,207 @@
+# Next AI Draw.io
+
+<div align="center">
+
+**AI驱动的图表创建工具 - 对话、绘制、可视化**
+
+[English](./README.md) | 中文 | [日本語](./README_JA.md)
+
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![Next.js](https://img.shields.io/badge/Next.js-15.x-black)](https://nextjs.org/)
+[![TypeScript](https://img.shields.io/badge/TypeScript-5.x-blue)](https://www.typescriptlang.org/)
+[![Sponsor](https://img.shields.io/badge/Sponsor-❤-ea4aaa)](https://github.com/sponsors/DayuanJiang)
+
+[🚀 在线演示](https://next-ai-drawio.jiang.jp/)
+
+</div>
+
+一个集成了AI功能的Next.js网页应用，与draw.io图表无缝结合。通过自然语言命令和AI辅助可视化来创建、修改和增强图表。
+
+https://github.com/user-attachments/assets/b2eef5f3-b335-4e71-a755-dc2e80931979
+
+## 功能特性
+
+-   **LLM驱动的图表创建**：利用大语言模型通过自然语言命令直接创建和操作draw.io图表
+-   **基于图像的图表复制**：上传现有图表或图像，让AI自动复制和增强
+-   **图表历史记录**：全面的版本控制，跟踪所有更改，允许您查看和恢复AI编辑前的图表版本
+-   **交互式聊天界面**：与AI实时对话来完善您的图表
+-   **AWS架构图支持**：专门支持生成AWS架构图
+-   **动画连接器**：在图表元素之间创建动态动画连接器，实现更好的可视化效果
+
+## **示例**
+
+以下是一些示例提示词及其生成的图表：
+
+<div align="center">
+<table width="100%">
+  <tr>
+    <td colspan="2" valign="top" align="center">
+      <strong>动画Transformer连接器</strong><br />
+      <p><strong>提示词：</strong> 给我一个带有**动画连接器**的Transformer架构图。</p>
+      <img src="./public/animated_connectors.svg" alt="带动画连接器的Transformer架构" width="480" />
+    </td>
+  </tr>
+  <tr>
+    <td width="50%" valign="top">
+      <strong>GCP架构图</strong><br />
+      <p><strong>提示词：</strong> 使用**GCP图标**生成一个GCP架构图。在这个图中，用户连接到托管在实例上的前端。</p>
+      <img src="./public/gcp_demo.svg" alt="GCP架构图" width="480" />
+    </td>
+    <td width="50%" valign="top">
+      <strong>AWS架构图</strong><br />
+      <p><strong>提示词：</strong> 使用**AWS图标**生成一个AWS架构图。在这个图中，用户连接到托管在实例上的前端。</p>
+      <img src="./public/aws_demo.svg" alt="AWS架构图" width="480" />
+    </td>
+  </tr>
+  <tr>
+    <td width="50%" valign="top">
+      <strong>Azure架构图</strong><br />
+      <p><strong>提示词：</strong> 使用**Azure图标**生成一个Azure架构图。在这个图中，用户连接到托管在实例上的前端。</p>
+      <img src="./public/azure_demo.svg" alt="Azure架构图" width="480" />
+    </td>
+    <td width="50%" valign="top">
+      <strong>猫咪素描</strong><br />
+      <p><strong>提示词：</strong> 给我画一只可爱的猫。</p>
+      <img src="./public/cat_demo.svg" alt="猫咪绘图" width="240" />
+    </td>
+  </tr>
+</table>
+</div>
+
+## 工作原理
+
+本应用使用以下技术：
+
+-   **Next.js**：用于前端框架和路由
+-   **Vercel AI SDK**（`ai` + `@ai-sdk/*`）：用于流式AI响应和多提供商支持
+-   **react-drawio**：用于图表表示和操作
+
+图表以XML格式表示，可在draw.io中渲染。AI处理您的命令并相应地生成或修改此XML。
+
+## 多提供商支持
+
+-   AWS Bedrock（默认）
+-   OpenAI / OpenAI兼容API（通过 `OPENAI_BASE_URL`）
+-   Anthropic
+-   Google AI
+-   Azure OpenAI
+-   Ollama
+-   OpenRouter
+-   DeepSeek
+
+注意：`claude-sonnet-4-5` 已在带有AWS标志的draw.io图表上进行训练，因此如果您想创建AWS架构图，这是最佳选择。
+
+## 快速开始
+
+### 使用Docker运行（推荐）
+
+如果您只想在本地运行，最好的方式是使用Docker。
+
+首先，如果您还没有安装Docker，请先安装：[获取Docker](https://docs.docker.com/get-docker/)
+
+然后运行：
+
+```bash
+docker run -d -p 3000:3000 \
+  -e AI_PROVIDER=openai \
+  -e AI_MODEL=gpt-4o \
+  -e OPENAI_API_KEY=your_api_key \
+  ghcr.io/dayuanjiang/next-ai-draw-io:latest
+```
+
+在浏览器中打开 [http://localhost:3000](http://localhost:3000)。
+
+请根据您首选的AI提供商配置替换环境变量。可用选项请参阅[多提供商支持](#多提供商支持)。
+
+### 安装
+
+1. 克隆仓库：
+
+```bash
+git clone https://github.com/DayuanJiang/next-ai-draw-io
+cd next-ai-draw-io
+```
+
+2. 安装依赖：
+
+```bash
+npm install
+# 或
+yarn install
+```
+
+3. 配置您的AI提供商：
+
+在根目录创建 `.env.local` 文件：
+
+```bash
+cp env.example .env.local
+```
+
+编辑 `.env.local` 并配置您选择的提供商：
+
+-   将 `AI_PROVIDER` 设置为您选择的提供商（bedrock, openai, anthropic, google, azure, ollama, openrouter, deepseek）
+-   将 `AI_MODEL` 设置为您要使用的特定模型
+-   添加您的提供商所需的API密钥
+
+请参阅上面的[多提供商支持](#多提供商支持)部分了解特定提供商的配置示例。
+
+4. 运行开发服务器：
+
+```bash
+npm run dev
+```
+
+5. 在浏览器中打开 [http://localhost:3000](http://localhost:3000) 查看应用。
+
+## 部署
+
+部署Next.js应用最简单的方式是使用Next.js创建者提供的[Vercel平台](https://vercel.com/new)。
+
+查看[Next.js部署文档](https://nextjs.org/docs/app/building-your-application/deploying)了解更多详情。
+
+或者您可以通过此按钮部署：
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FDayuanJiang%2Fnext-ai-draw-io)
+
+请确保在Vercel控制台中**设置环境变量**，就像您在本地 `.env.local` 文件中所做的那样。
+
+## 项目结构
+
+```
+app/                  # Next.js App Router
+  api/chat/           # 带AI工具的聊天API端点
+  page.tsx            # 带DrawIO嵌入的主页面
+components/           # React组件
+  chat-panel.tsx      # 带图表控制的聊天界面
+  chat-input.tsx      # 带文件上传的用户输入组件
+  history-dialog.tsx  # 图表版本历史查看器
+  ui/                 # UI组件（按钮、卡片等）
+contexts/             # React上下文提供者
+  diagram-context.tsx # 全局图表状态管理
+lib/                  # 工具函数和辅助程序
+  ai-providers.ts     # 多提供商AI配置
+  utils.ts            # XML处理和转换工具
+public/               # 静态资源包括示例图片
+```
+
+## 待办事项
+
+-   [x] 允许LLM修改XML而不是每次从头生成
+-   [x] 提高形状流式更新的流畅度
+-   [x] 添加多AI提供商支持（OpenAI, Anthropic, Google, Azure, Ollama）
+-   [x] 解决超过60秒的会话生成失败的bug
+-   [ ] 在UI上添加API配置
+
+## 支持与联系
+
+如果您觉得这个项目有用，请考虑[赞助](https://github.com/sponsors/DayuanJiang)来帮助我托管在线演示站点！
+
+如需支持或咨询，请在GitHub仓库上提交issue或联系维护者：
+
+-   邮箱：me[at]jiang.jp
+
+## Star历史
+
+[![Star History Chart](https://api.star-history.com/svg?repos=DayuanJiang/next-ai-draw-io&type=date&legend=top-left)](https://www.star-history.com/#DayuanJiang/next-ai-draw-io&type=date&legend=top-left)
+
+---
--- a/README_JA.md
+++ b/README_JA.md
@@ -0,0 +1,207 @@
+# Next AI Draw.io
+
+<div align="center">
+
+**AI搭載のダイアグラム作成ツール - チャット、描画、可視化**
+
+[English](./README.md) | [中文](./README_CN.md) | 日本語
+
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![Next.js](https://img.shields.io/badge/Next.js-15.x-black)](https://nextjs.org/)
+[![TypeScript](https://img.shields.io/badge/TypeScript-5.x-blue)](https://www.typescriptlang.org/)
+[![Sponsor](https://img.shields.io/badge/Sponsor-❤-ea4aaa)](https://github.com/sponsors/DayuanJiang)
+
+[🚀 ライブデモ](https://next-ai-drawio.jiang.jp/)
+
+</div>
+
+AI機能とdraw.ioダイアグラムを統合したNext.jsウェブアプリケーションです。自然言語コマンドとAI支援の可視化により、ダイアグラムを作成、修正、強化できます。
+
+https://github.com/user-attachments/assets/b2eef5f3-b335-4e71-a755-dc2e80931979
+
+## 機能
+
+-   **LLM搭載のダイアグラム作成**：大規模言語モデルを活用して、自然言語コマンドで直接draw.ioダイアグラムを作成・操作
+-   **画像ベースのダイアグラム複製**：既存のダイアグラムや画像をアップロードし、AIが自動的に複製・強化
+-   **ダイアグラム履歴**：すべての変更を追跡する包括的なバージョン管理。AI編集前のダイアグラムの以前のバージョンを表示・復元可能
+-   **インタラクティブなチャットインターフェース**：AIとリアルタイムでコミュニケーションしてダイアグラムを改善
+-   **AWSアーキテクチャダイアグラムサポート**：AWSアーキテクチャダイアグラムの生成を専門的にサポート
+-   **アニメーションコネクタ**：より良い可視化のためにダイアグラム要素間に動的でアニメーション化されたコネクタを作成
+
+## **例**
+
+以下はいくつかのプロンプト例と生成されたダイアグラムです：
+
+<div align="center">
+<table width="100%">
+  <tr>
+    <td colspan="2" valign="top" align="center">
+      <strong>アニメーションTransformerコネクタ</strong><br />
+      <p><strong>プロンプト：</strong> **アニメーションコネクタ**付きのTransformerアーキテクチャ図を作成してください。</p>
+      <img src="./public/animated_connectors.svg" alt="アニメーションコネクタ付きTransformerアーキテクチャ" width="480" />
+    </td>
+  </tr>
+  <tr>
+    <td width="50%" valign="top">
+      <strong>GCPアーキテクチャ図</strong><br />
+      <p><strong>プロンプト：</strong> **GCPアイコン**を使用してGCPアーキテクチャ図を生成してください。この図では、ユーザーがインスタンス上でホストされているフロントエンドに接続します。</p>
+      <img src="./public/gcp_demo.svg" alt="GCPアーキテクチャ図" width="480" />
+    </td>
+    <td width="50%" valign="top">
+      <strong>AWSアーキテクチャ図</strong><br />
+      <p><strong>プロンプト：</strong> **AWSアイコン**を使用してAWSアーキテクチャ図を生成してください。この図では、ユーザーがインスタンス上でホストされているフロントエンドに接続します。</p>
+      <img src="./public/aws_demo.svg" alt="AWSアーキテクチャ図" width="480" />
+    </td>
+  </tr>
+  <tr>
+    <td width="50%" valign="top">
+      <strong>Azureアーキテクチャ図</strong><br />
+      <p><strong>プロンプト：</strong> **Azureアイコン**を使用してAzureアーキテクチャ図を生成してください。この図では、ユーザーがインスタンス上でホストされているフロントエンドに接続します。</p>
+      <img src="./public/azure_demo.svg" alt="Azureアーキテクチャ図" width="480" />
+    </td>
+    <td width="50%" valign="top">
+      <strong>猫のスケッチ</strong><br />
+      <p><strong>プロンプト：</strong> かわいい猫を描いてください。</p>
+      <img src="./public/cat_demo.svg" alt="猫の絵" width="240" />
+    </td>
+  </tr>
+</table>
+</div>
+
+## 仕組み
+
+本アプリケーションは以下の技術を使用しています：
+
+-   **Next.js**：フロントエンドフレームワークとルーティング
+-   **Vercel AI SDK**（`ai` + `@ai-sdk/*`）：ストリーミングAIレスポンスとマルチプロバイダーサポート
+-   **react-drawio**：ダイアグラムの表現と操作
+
+ダイアグラムはdraw.ioでレンダリングできるXMLとして表現されます。AIがコマンドを処理し、それに応じてこのXMLを生成または変更します。
+
+## マルチプロバイダーサポート
+
+-   AWS Bedrock（デフォルト）
+-   OpenAI / OpenAI互換API（`OPENAI_BASE_URL`経由）
+-   Anthropic
+-   Google AI
+-   Azure OpenAI
+-   Ollama
+-   OpenRouter
+-   DeepSeek
+
+注：`claude-sonnet-4-5`はAWSロゴ付きのdraw.ioダイアグラムで学習されているため、AWSアーキテクチャダイアグラムを作成したい場合は最適な選択です。
+
+## はじめに
+
+### Dockerで実行（推奨）
+
+ローカルで実行したいだけなら、Dockerを使用するのが最も簡単です。
+
+まず、Dockerをインストールしていない場合はインストールしてください：[Dockerを入手](https://docs.docker.com/get-docker/)
+
+次に実行：
+
+```bash
+docker run -d -p 3000:3000 \
+  -e AI_PROVIDER=openai \
+  -e AI_MODEL=gpt-4o \
+  -e OPENAI_API_KEY=your_api_key \
+  ghcr.io/dayuanjiang/next-ai-draw-io:latest
+```
+
+ブラウザで [http://localhost:3000](http://localhost:3000) を開いてください。
+
+環境変数はお好みのAIプロバイダー設定に置き換えてください。利用可能なオプションについては[マルチプロバイダーサポート](#マルチプロバイダーサポート)を参照してください。
+
+### インストール
+
+1. リポジトリをクローン：
+
+```bash
+git clone https://github.com/DayuanJiang/next-ai-draw-io
+cd next-ai-draw-io
+```
+
+2. 依存関係をインストール：
+
+```bash
+npm install
+# または
+yarn install
+```
+
+3. AIプロバイダーを設定：
+
+ルートディレクトリに`.env.local`ファイルを作成：
+
+```bash
+cp env.example .env.local
+```
+
+`.env.local`を編集して選択したプロバイダーを設定：
+
+-   `AI_PROVIDER`を選択したプロバイダーに設定（bedrock, openai, anthropic, google, azure, ollama, openrouter, deepseek）
+-   `AI_MODEL`を使用する特定のモデルに設定
+-   プロバイダーに必要なAPIキーを追加
+
+プロバイダー固有の設定例については、上記の[マルチプロバイダーサポート](#マルチプロバイダーサポート)セクションを参照してください。
+
+4. 開発サーバーを起動：
+
+```bash
+npm run dev
+```
+
+5. ブラウザで[http://localhost:3000](http://localhost:3000)を開いてアプリケーションを確認。
+
+## デプロイ
+
+Next.jsアプリをデプロイする最も簡単な方法は、Next.jsの作成者による[Vercelプラットフォーム](https://vercel.com/new)を使用することです。
+
+詳細は[Next.jsデプロイメントドキュメント](https://nextjs.org/docs/app/building-your-application/deploying)をご覧ください。
+
+または、このボタンでデプロイできます：
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FDayuanJiang%2Fnext-ai-draw-io)
+
+ローカルの`.env.local`ファイルと同様に、Vercelダッシュボードで**環境変数を設定**してください。
+
+## プロジェクト構造
+
+```
+app/                  # Next.js App Router
+  api/chat/           # AIツール付きチャットAPIエンドポイント
+  page.tsx            # DrawIO埋め込み付きメインページ
+components/           # Reactコンポーネント
+  chat-panel.tsx      # ダイアグラム制御付きチャットインターフェース
+  chat-input.tsx      # ファイルアップロード付きユーザー入力コンポーネント
+  history-dialog.tsx  # ダイアグラムバージョン履歴ビューア
+  ui/                 # UIコンポーネント（ボタン、カードなど）
+contexts/             # Reactコンテキストプロバイダー
+  diagram-context.tsx # グローバルダイアグラム状態管理
+lib/                  # ユーティリティ関数とヘルパー
+  ai-providers.ts     # マルチプロバイダーAI設定
+  utils.ts            # XML処理と変換ユーティリティ
+public/               # サンプル画像を含む静的アセット
+```
+
+## TODO
+
+-   [x] LLMが毎回ゼロから生成する代わりにXMLを修正できるようにする
+-   [x] シェイプストリーミング更新の滑らかさを改善
+-   [x] 複数のAIプロバイダーサポートを追加（OpenAI, Anthropic, Google, Azure, Ollama）
+-   [x] 60秒以上のセッションで生成が失敗するバグを解決
+-   [ ] UIにAPI設定を追加
+
+## サポート＆お問い合わせ
+
+このプロジェクトが役に立ったら、ライブデモサイトのホスティングを支援するために[スポンサー](https://github.com/sponsors/DayuanJiang)をご検討ください！
+
+サポートやお問い合わせについては、GitHubリポジトリでissueを開くか、メンテナーにご連絡ください：
+
+-   メール：me[at]jiang.jp
+
+## スター履歴
+
+[![Star History Chart](https://api.star-history.com/svg?repos=DayuanJiang/next-ai-draw-io&type=date&legend=top-left)](https://www.star-history.com/#DayuanJiang/next-ai-draw-io&type=date&legend=top-left)
+
+---
--- a/app/about/cn/page.tsx
+++ b/app/about/cn/page.tsx
@@ -0,0 +1,205 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { FaGithub } from "react-icons/fa";
+import Image from "next/image";
+
+export const metadata: Metadata = {
+    title: "关于 - Next AI Draw.io",
+    description: "AI驱动的图表创建工具 - 对话、绘制、可视化。使用自然语言创建AWS、GCP和Azure架构图。",
+    keywords: ["AI图表", "draw.io", "AWS架构", "GCP图表", "Azure图表", "LLM"],
+};
+
+export default function AboutCN() {
+    return (
+        <div className="min-h-screen bg-gray-50">
+            {/* Navigation */}
+            <header className="bg-white border-b border-gray-200">
+                <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
+                    <div className="flex items-center justify-between">
+                        <Link href="/" className="text-xl font-bold text-gray-900 hover:text-gray-700">
+                            Next AI Draw.io
+                        </Link>
+                        <nav className="flex items-center gap-6 text-sm">
+                            <Link href="/" className="text-gray-600 hover:text-gray-900 transition-colors">
+                                编辑器
+                            </Link>
+                            <Link href="/about/cn" className="text-blue-600 font-semibold">
+                                关于
+                            </Link>
+                            <a
+                                href="https://github.com/DayuanJiang/next-ai-draw-io"
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className="text-gray-600 hover:text-gray-900 transition-colors"
+                                aria-label="在GitHub上查看"
+                            >
+                                <FaGithub className="w-5 h-5" />
+                            </a>
+                        </nav>
+                    </div>
+                </div>
+            </header>
+
+            {/* Main Content */}
+            <main className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+                <article className="prose prose-lg max-w-none">
+                    {/* Title */}
+                    <div className="text-center mb-8">
+                        <h1 className="text-4xl font-bold text-gray-900 mb-2">Next AI Draw.io</h1>
+                        <p className="text-xl text-gray-600 font-medium">
+                            AI驱动的图表创建工具 - 对话、绘制、可视化
+                        </p>
+                        <div className="flex justify-center gap-4 mt-4 text-sm">
+                            <Link href="/about" className="text-gray-600 hover:text-blue-600">English</Link>
+                            <span className="text-gray-400">|</span>
+                            <Link href="/about/cn" className="text-blue-600 font-semibold">中文</Link>
+                            <span className="text-gray-400">|</span>
+                            <Link href="/about/ja" className="text-gray-600 hover:text-blue-600">日本語</Link>
+                        </div>
+                    </div>
+
+                    <div className="bg-amber-50 border border-amber-200 rounded-lg p-4 mb-6">
+                        <p className="text-amber-800">
+                            本应用设计运行于 Claude Opus 4.5 以获得最佳性能。但由于流量超出预期，运行顶级模型的成本变得难以承受。为避免服务中断并控制成本，我已将后端切换至 Claude Haiku 4.5。
+                        </p>
+                    </div>
+
+                    <p className="text-gray-700">
+                        一个集成了AI功能的Next.js网页应用，与draw.io图表无缝结合。通过自然语言命令和AI辅助可视化来创建、修改和增强图表。
+                    </p>
+
+                    {/* Features */}
+                    <h2 className="text-2xl font-semibold text-gray-900 mt-10 mb-4">功能特性</h2>
+                    <ul className="list-disc pl-6 text-gray-700 space-y-2">
+                        <li><strong>LLM驱动的图表创建</strong>：利用大语言模型通过自然语言命令直接创建和操作draw.io图表</li>
+                        <li><strong>基于图像的图表复制</strong>：上传现有图表或图像，让AI自动复制和增强</li>
+                        <li><strong>图表历史记录</strong>：全面的版本控制，跟踪所有更改，允许您查看和恢复AI编辑前的图表版本</li>
+                        <li><strong>交互式聊天界面</strong>：与AI实时对话来完善您的图表</li>
+                        <li><strong>AWS架构图支持</strong>：专门支持生成AWS架构图</li>
+                        <li><strong>动画连接器</strong>：在图表元素之间创建动态动画连接器，实现更好的可视化效果</li>
+                    </ul>
+
+                    {/* Examples */}
+                    <h2 className="text-2xl font-semibold text-gray-900 mt-10 mb-4">示例</h2>
+                    <p className="text-gray-700 mb-6">以下是一些示例提示词及其生成的图表：</p>
+
+                    <div className="space-y-8">
+                        {/* Animated Transformer */}
+                        <div className="text-center">
+                            <h3 className="text-lg font-semibold text-gray-900 mb-2">动画Transformer连接器</h3>
+                            <p className="text-gray-600 mb-4">
+                                <strong>提示词：</strong> 给我一个带有<strong>动画连接器</strong>的Transformer架构图。
+                            </p>
+                            <Image src="/animated_connectors.svg" alt="带动画连接器的Transformer架构" width={480} height={360} className="mx-auto" />
+                        </div>
+
+                        {/* Cloud Architecture Grid */}
+                        <div className="grid md:grid-cols-2 gap-6">
+                            <div className="text-center">
+                                <h3 className="text-lg font-semibold text-gray-900 mb-2">GCP架构图</h3>
+                                <p className="text-gray-600 text-sm mb-4">
+                                    <strong>提示词：</strong> 使用<strong>GCP图标</strong>生成一个GCP架构图。用户连接到托管在实例上的前端。
+                                </p>
+                                <Image src="/gcp_demo.svg" alt="GCP架构图" width={400} height={300} className="mx-auto" />
+                            </div>
+                            <div className="text-center">
+                                <h3 className="text-lg font-semibold text-gray-900 mb-2">AWS架构图</h3>
+                                <p className="text-gray-600 text-sm mb-4">
+                                    <strong>提示词：</strong> 使用<strong>AWS图标</strong>生成一个AWS架构图。用户连接到托管在实例上的前端。
+                                </p>
+                                <Image src="/aws_demo.svg" alt="AWS架构图" width={400} height={300} className="mx-auto" />
+                            </div>
+                            <div className="text-center">
+                                <h3 className="text-lg font-semibold text-gray-900 mb-2">Azure架构图</h3>
+                                <p className="text-gray-600 text-sm mb-4">
+                                    <strong>提示词：</strong> 使用<strong>Azure图标</strong>生成一个Azure架构图。用户连接到托管在实例上的前端。
+                                </p>
+                                <Image src="/azure_demo.svg" alt="Azure架构图" width={400} height={300} className="mx-auto" />
+                            </div>
+                            <div className="text-center">
+                                <h3 className="text-lg font-semibold text-gray-900 mb-2">猫咪素描</h3>
+                                <p className="text-gray-600 text-sm mb-4">
+                                    <strong>提示词：</strong> 给我画一只可爱的猫。
+                                </p>
+                                <Image src="/cat_demo.svg" alt="猫咪绘图" width={240} height={240} className="mx-auto" />
+                            </div>
+                        </div>
+                    </div>
+
+                    {/* How It Works */}
+                    <h2 className="text-2xl font-semibold text-gray-900 mt-10 mb-4">工作原理</h2>
+                    <p className="text-gray-700 mb-4">本应用使用以下技术：</p>
+                    <ul className="list-disc pl-6 text-gray-700 space-y-2">
+                        <li><strong>Next.js</strong>：用于前端框架和路由</li>
+                        <li><strong>Vercel AI SDK</strong>（<code>ai</code> + <code>@ai-sdk/*</code>）：用于流式AI响应和多提供商支持</li>
+                        <li><strong>react-drawio</strong>：用于图表表示和操作</li>
+                    </ul>
+                    <p className="text-gray-700 mt-4">
+                        图表以XML格式表示，可在draw.io中渲染。AI处理您的命令并相应地生成或修改此XML。
+                    </p>
+
+                    {/* Multi-Provider Support */}
+                    <h2 className="text-2xl font-semibold text-gray-900 mt-10 mb-4">多提供商支持</h2>
+                    <ul className="list-disc pl-6 text-gray-700 space-y-1">
+                        <li>AWS Bedrock（默认）</li>
+                        <li>OpenAI / OpenAI兼容API（通过 <code>OPENAI_BASE_URL</code>）</li>
+                        <li>Anthropic</li>
+                        <li>Google AI</li>
+                        <li>Azure OpenAI</li>
+                        <li>Ollama</li>
+                        <li>OpenRouter</li>
+                        <li>DeepSeek</li>
+                    </ul>
+                    <p className="text-gray-700 mt-4">
+                        注意：<code>claude-sonnet-4-5</code> 已在带有AWS标志的draw.io图表上进行训练，因此如果您想创建AWS架构图，这是最佳选择。
+                    </p>
+
+                    {/* Support */}
+                    <div className="flex items-center gap-4 mt-10 mb-4">
+                        <h2 className="text-2xl font-semibold text-gray-900">支持与联系</h2>
+                        <iframe
+                            src="https://github.com/sponsors/DayuanJiang/button"
+                            title="Sponsor DayuanJiang"
+                            height="32"
+                            width="114"
+                            style={{ border: 0, borderRadius: 6 }}
+                        />
+                    </div>
+                    <p className="text-gray-700">
+                        如果您觉得这个项目有用，请考虑{" "}
+                        <a href="https://github.com/sponsors/DayuanJiang" target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">
+                            赞助
+                        </a>{" "}
+                        来帮助托管在线演示站点！
+                    </p>
+                    <p className="text-gray-700 mt-2">
+                        如需支持或咨询，请在{" "}
+                        <a href="https://github.com/DayuanJiang/next-ai-draw-io" target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">
+                            GitHub仓库
+                        </a>{" "}
+                        上提交issue或联系：me[at]jiang.jp
+                    </p>
+
+                    {/* CTA */}
+                    <div className="mt-12 text-center">
+                        <Link
+                            href="/"
+                            className="inline-block bg-blue-600 text-white px-8 py-3 rounded-lg font-semibold hover:bg-blue-700 transition-colors"
+                        >
+                            打开编辑器
+                        </Link>
+                    </div>
+                </article>
+            </main>
+
+            {/* Footer */}
+            <footer className="bg-white border-t border-gray-200 mt-16">
+                <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+                    <p className="text-center text-gray-600 text-sm">
+                        Next AI Draw.io - 开源AI驱动的图表生成器
+                    </p>
+                </div>
+            </footer>
+        </div>
+    );
+}
--- a/app/about/ja/page.tsx
+++ b/app/about/ja/page.tsx
@@ -0,0 +1,205 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { FaGithub } from "react-icons/fa";
+import Image from "next/image";
+
+export const metadata: Metadata = {
+    title: "概要 - Next AI Draw.io",
+    description: "AI搭載のダイアグラム作成ツール - チャット、描画、可視化。自然言語でAWS、GCP、Azureアーキテクチャ図を作成。",
+    keywords: ["AIダイアグラム", "draw.io", "AWSアーキテクチャ", "GCPダイアグラム", "Azureダイアグラム", "LLM"],
+};
+
+export default function AboutJA() {
+    return (
+        <div className="min-h-screen bg-gray-50">
+            {/* Navigation */}
+            <header className="bg-white border-b border-gray-200">
+                <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
+                    <div className="flex items-center justify-between">
+                        <Link href="/" className="text-xl font-bold text-gray-900 hover:text-gray-700">
+                            Next AI Draw.io
+                        </Link>
+                        <nav className="flex items-center gap-6 text-sm">
+                            <Link href="/" className="text-gray-600 hover:text-gray-900 transition-colors">
+                                エディタ
+                            </Link>
+                            <Link href="/about/ja" className="text-blue-600 font-semibold">
+                                概要
+                            </Link>
+                            <a
+                                href="https://github.com/DayuanJiang/next-ai-draw-io"
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className="text-gray-600 hover:text-gray-900 transition-colors"
+                                aria-label="GitHubで見る"
+                            >
+                                <FaGithub className="w-5 h-5" />
+                            </a>
+                        </nav>
+                    </div>
+                </div>
+            </header>
+
+            {/* Main Content */}
+            <main className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+                <article className="prose prose-lg max-w-none">
+                    {/* Title */}
+                    <div className="text-center mb-8">
+                        <h1 className="text-4xl font-bold text-gray-900 mb-2">Next AI Draw.io</h1>
+                        <p className="text-xl text-gray-600 font-medium">
+                            AI搭載のダイアグラム作成ツール - チャット、描画、可視化
+                        </p>
+                        <div className="flex justify-center gap-4 mt-4 text-sm">
+                            <Link href="/about" className="text-gray-600 hover:text-blue-600">English</Link>
+                            <span className="text-gray-400">|</span>
+                            <Link href="/about/cn" className="text-gray-600 hover:text-blue-600">中文</Link>
+                            <span className="text-gray-400">|</span>
+                            <Link href="/about/ja" className="text-blue-600 font-semibold">日本語</Link>
+                        </div>
+                    </div>
+
+                    <div className="bg-amber-50 border border-amber-200 rounded-lg p-4 mb-6">
+                        <p className="text-amber-800">
+                            本アプリは最高のパフォーマンスを発揮するため、Claude Opus 4.5 で動作するよう設計されています。しかし、予想以上のトラフィックにより、最上位モデルの運用コストが負担となっています。サービスの中断を避け、コストを管理するため、バックエンドを Claude Haiku 4.5 に切り替えました。
+                        </p>
+                    </div>
+
+                    <p className="text-gray-700">
+                        AI機能とdraw.ioダイアグラムを統合したNext.jsウェブアプリケーションです。自然言語コマンドとAI支援の可視化により、ダイアグラムを作成、修正、強化できます。
+                    </p>
+
+                    {/* Features */}
+                    <h2 className="text-2xl font-semibold text-gray-900 mt-10 mb-4">機能</h2>
+                    <ul className="list-disc pl-6 text-gray-700 space-y-2">
+                        <li><strong>LLM搭載のダイアグラム作成</strong>：大規模言語モデルを活用して、自然言語コマンドで直接draw.ioダイアグラムを作成・操作</li>
+                        <li><strong>画像ベースのダイアグラム複製</strong>：既存のダイアグラムや画像をアップロードし、AIが自動的に複製・強化</li>
+                        <li><strong>ダイアグラム履歴</strong>：すべての変更を追跡する包括的なバージョン管理。AI編集前のダイアグラムの以前のバージョンを表示・復元可能</li>
+                        <li><strong>インタラクティブなチャットインターフェース</strong>：AIとリアルタイムでコミュニケーションしてダイアグラムを改善</li>
+                        <li><strong>AWSアーキテクチャダイアグラムサポート</strong>：AWSアーキテクチャダイアグラムの生成を専門的にサポート</li>
+                        <li><strong>アニメーションコネクタ</strong>：より良い可視化のためにダイアグラム要素間に動的でアニメーション化されたコネクタを作成</li>
+                    </ul>
+
+                    {/* Examples */}
+                    <h2 className="text-2xl font-semibold text-gray-900 mt-10 mb-4">例</h2>
+                    <p className="text-gray-700 mb-6">以下はいくつかのプロンプト例と生成されたダイアグラムです：</p>
+
+                    <div className="space-y-8">
+                        {/* Animated Transformer */}
+                        <div className="text-center">
+                            <h3 className="text-lg font-semibold text-gray-900 mb-2">アニメーションTransformerコネクタ</h3>
+                            <p className="text-gray-600 mb-4">
+                                <strong>プロンプト：</strong> <strong>アニメーションコネクタ</strong>付きのTransformerアーキテクチャ図を作成してください。
+                            </p>
+                            <Image src="/animated_connectors.svg" alt="アニメーションコネクタ付きTransformerアーキテクチャ" width={480} height={360} className="mx-auto" />
+                        </div>
+
+                        {/* Cloud Architecture Grid */}
+                        <div className="grid md:grid-cols-2 gap-6">
+                            <div className="text-center">
+                                <h3 className="text-lg font-semibold text-gray-900 mb-2">GCPアーキテクチャ図</h3>
+                                <p className="text-gray-600 text-sm mb-4">
+                                    <strong>プロンプト：</strong> <strong>GCPアイコン</strong>を使用してGCPアーキテクチャ図を生成してください。ユーザーがインスタンス上でホストされているフロントエンドに接続します。
+                                </p>
+                                <Image src="/gcp_demo.svg" alt="GCPアーキテクチャ図" width={400} height={300} className="mx-auto" />
+                            </div>
+                            <div className="text-center">
+                                <h3 className="text-lg font-semibold text-gray-900 mb-2">AWSアーキテクチャ図</h3>
+                                <p className="text-gray-600 text-sm mb-4">
+                                    <strong>プロンプト：</strong> <strong>AWSアイコン</strong>を使用してAWSアーキテクチャ図を生成してください。ユーザーがインスタンス上でホストされているフロントエンドに接続します。
+                                </p>
+                                <Image src="/aws_demo.svg" alt="AWSアーキテクチャ図" width={400} height={300} className="mx-auto" />
+                            </div>
+                            <div className="text-center">
+                                <h3 className="text-lg font-semibold text-gray-900 mb-2">Azureアーキテクチャ図</h3>
+                                <p className="text-gray-600 text-sm mb-4">
+                                    <strong>プロンプト：</strong> <strong>Azureアイコン</strong>を使用してAzureアーキテクチャ図を生成してください。ユーザーがインスタンス上でホストされているフロントエンドに接続します。
+                                </p>
+                                <Image src="/azure_demo.svg" alt="Azureアーキテクチャ図" width={400} height={300} className="mx-auto" />
+                            </div>
+                            <div className="text-center">
+                                <h3 className="text-lg font-semibold text-gray-900 mb-2">猫のスケッチ</h3>
+                                <p className="text-gray-600 text-sm mb-4">
+                                    <strong>プロンプト：</strong> かわいい猫を描いてください。
+                                </p>
+                                <Image src="/cat_demo.svg" alt="猫の絵" width={240} height={240} className="mx-auto" />
+                            </div>
+                        </div>
+                    </div>
+
+                    {/* How It Works */}
+                    <h2 className="text-2xl font-semibold text-gray-900 mt-10 mb-4">仕組み</h2>
+                    <p className="text-gray-700 mb-4">本アプリケーションは以下の技術を使用しています：</p>
+                    <ul className="list-disc pl-6 text-gray-700 space-y-2">
+                        <li><strong>Next.js</strong>：フロントエンドフレームワークとルーティング</li>
+                        <li><strong>Vercel AI SDK</strong>（<code>ai</code> + <code>@ai-sdk/*</code>）：ストリーミングAIレスポンスとマルチプロバイダーサポート</li>
+                        <li><strong>react-drawio</strong>：ダイアグラムの表現と操作</li>
+                    </ul>
+                    <p className="text-gray-700 mt-4">
+                        ダイアグラムはdraw.ioでレンダリングできるXMLとして表現されます。AIがコマンドを処理し、それに応じてこのXMLを生成または変更します。
+                    </p>
+
+                    {/* Multi-Provider Support */}
+                    <h2 className="text-2xl font-semibold text-gray-900 mt-10 mb-4">マルチプロバイダーサポート</h2>
+                    <ul className="list-disc pl-6 text-gray-700 space-y-1">
+                        <li>AWS Bedrock（デフォルト）</li>
+                        <li>OpenAI / OpenAI互換API（<code>OPENAI_BASE_URL</code>経由）</li>
+                        <li>Anthropic</li>
+                        <li>Google AI</li>
+                        <li>Azure OpenAI</li>
+                        <li>Ollama</li>
+                        <li>OpenRouter</li>
+                        <li>DeepSeek</li>
+                    </ul>
+                    <p className="text-gray-700 mt-4">
+                        注：<code>claude-sonnet-4-5</code>はAWSロゴ付きのdraw.ioダイアグラムで学習されているため、AWSアーキテクチャダイアグラムを作成したい場合は最適な選択です。
+                    </p>
+
+                    {/* Support */}
+                    <div className="flex items-center gap-4 mt-10 mb-4">
+                        <h2 className="text-2xl font-semibold text-gray-900">サポート＆お問い合わせ</h2>
+                        <iframe
+                            src="https://github.com/sponsors/DayuanJiang/button"
+                            title="Sponsor DayuanJiang"
+                            height="32"
+                            width="114"
+                            style={{ border: 0, borderRadius: 6 }}
+                        />
+                    </div>
+                    <p className="text-gray-700">
+                        このプロジェクトが役に立ったら、ライブデモサイトのホスティングを支援するために{" "}
+                        <a href="https://github.com/sponsors/DayuanJiang" target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">
+                            スポンサー
+                        </a>{" "}
+                        をご検討ください！
+                    </p>
+                    <p className="text-gray-700 mt-2">
+                        サポートやお問い合わせについては、{" "}
+                        <a href="https://github.com/DayuanJiang/next-ai-draw-io" target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">
+                            GitHubリポジトリ
+                        </a>{" "}
+                        でissueを開くか、ご連絡ください：me[at]jiang.jp
+                    </p>
+
+                    {/* CTA */}
+                    <div className="mt-12 text-center">
+                        <Link
+                            href="/"
+                            className="inline-block bg-blue-600 text-white px-8 py-3 rounded-lg font-semibold hover:bg-blue-700 transition-colors"
+                        >
+                            エディタを開く
+                        </Link>
+                    </div>
+                </article>
+            </main>
+
+            {/* Footer */}
+            <footer className="bg-white border-t border-gray-200 mt-16">
+                <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+                    <p className="text-center text-gray-600 text-sm">
+                        Next AI Draw.io - オープンソースAI搭載ダイアグラムジェネレーター
+                    </p>
+                </div>
+            </footer>
+        </div>
+    );
+}
--- a/app/about/page.tsx
+++ b/app/about/page.tsx
@@ -0,0 +1,206 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { FaGithub } from "react-icons/fa";
+import Image from "next/image";
+
+export const metadata: Metadata = {
+    title: "About - Next AI Draw.io",
+    description: "AI-Powered Diagram Creation Tool - Chat, Draw, Visualize. Create AWS, GCP, and Azure architecture diagrams with natural language.",
+    keywords: ["AI diagram", "draw.io", "AWS architecture", "GCP diagram", "Azure diagram", "LLM"],
+};
+
+export default function About() {
+    return (
+        <div className="min-h-screen bg-gray-50">
+            {/* Navigation */}
+            <header className="bg-white border-b border-gray-200">
+                <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
+                    <div className="flex items-center justify-between">
+                        <Link href="/" className="text-xl font-bold text-gray-900 hover:text-gray-700">
+                            Next AI Draw.io
+                        </Link>
+                        <nav className="flex items-center gap-6 text-sm">
+                            <Link href="/" className="text-gray-600 hover:text-gray-900 transition-colors">
+                                Editor
+                            </Link>
+                            <Link href="/about" className="text-blue-600 font-semibold">
+                                About
+                            </Link>
+                            <a
+                                href="https://github.com/DayuanJiang/next-ai-draw-io"
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className="text-gray-600 hover:text-gray-900 transition-colors"
+                                aria-label="View on GitHub"
+                            >
+                                <FaGithub className="w-5 h-5" />
+                            </a>
+                        </nav>
+                    </div>
+                </div>
+            </header>
+
+            {/* Main Content */}
+            <main className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+                <article className="prose prose-lg max-w-none">
+                    {/* Title */}
+                    <div className="text-center mb-8">
+                        <h1 className="text-4xl font-bold text-gray-900 mb-2">Next AI Draw.io</h1>
+                        <p className="text-xl text-gray-600 font-medium">
+                            AI-Powered Diagram Creation Tool - Chat, Draw, Visualize
+                        </p>
+                        <div className="flex justify-center gap-4 mt-4 text-sm">
+                            <Link href="/about" className="text-blue-600 font-semibold">English</Link>
+                            <span className="text-gray-400">|</span>
+                            <Link href="/about/cn" className="text-gray-600 hover:text-blue-600">中文</Link>
+                            <span className="text-gray-400">|</span>
+                            <Link href="/about/ja" className="text-gray-600 hover:text-blue-600">日本語</Link>
+                        </div>
+                    </div>
+
+                    <div className="bg-amber-50 border border-amber-200 rounded-lg p-4 mb-6">
+                        <p className="text-amber-800">
+                            This app is designed to run on Claude Opus 4.5 for best performance. However, due to higher-than-expected traffic, running the top-tier model has become cost-prohibitive. To avoid service interruptions and manage costs, I have switched the backend to Claude Haiku 4.5.
+                        </p>
+                    </div>
+
+                    <p className="text-gray-700">
+                        A Next.js web application that integrates AI capabilities with draw.io diagrams.
+                        Create, modify, and enhance diagrams through natural language commands and AI-assisted visualization.
+                    </p>
+
+                    {/* Features */}
+                    <h2 className="text-2xl font-semibold text-gray-900 mt-10 mb-4">Features</h2>
+                    <ul className="list-disc pl-6 text-gray-700 space-y-2">
+                        <li><strong>LLM-Powered Diagram Creation</strong>: Leverage Large Language Models to create and manipulate draw.io diagrams directly through natural language commands</li>
+                        <li><strong>Image-Based Diagram Replication</strong>: Upload existing diagrams or images and have the AI replicate and enhance them automatically</li>
+                        <li><strong>Diagram History</strong>: Comprehensive version control that tracks all changes, allowing you to view and restore previous versions of your diagrams before the AI editing</li>
+                        <li><strong>Interactive Chat Interface</strong>: Communicate with AI to refine your diagrams in real-time</li>
+                        <li><strong>AWS Architecture Diagram Support</strong>: Specialized support for generating AWS architecture diagrams</li>
+                        <li><strong>Animated Connectors</strong>: Create dynamic and animated connectors between diagram elements for better visualization</li>
+                    </ul>
+
+                    {/* Examples */}
+                    <h2 className="text-2xl font-semibold text-gray-900 mt-10 mb-4">Examples</h2>
+                    <p className="text-gray-700 mb-6">Here are some example prompts and their generated diagrams:</p>
+
+                    <div className="space-y-8">
+                        {/* Animated Transformer */}
+                        <div className="text-center">
+                            <h3 className="text-lg font-semibold text-gray-900 mb-2">Animated Transformer Connectors</h3>
+                            <p className="text-gray-600 mb-4">
+                                <strong>Prompt:</strong> Give me an <strong>animated connector</strong> diagram of transformer&apos;s architecture.
+                            </p>
+                            <Image src="/animated_connectors.svg" alt="Transformer Architecture with Animated Connectors" width={480} height={360} className="mx-auto" />
+                        </div>
+
+                        {/* Cloud Architecture Grid */}
+                        <div className="grid md:grid-cols-2 gap-6">
+                            <div className="text-center">
+                                <h3 className="text-lg font-semibold text-gray-900 mb-2">GCP Architecture Diagram</h3>
+                                <p className="text-gray-600 text-sm mb-4">
+                                    <strong>Prompt:</strong> Generate a GCP architecture diagram with <strong>GCP icons</strong>. Users connect to a frontend hosted on an instance.
+                                </p>
+                                <Image src="/gcp_demo.svg" alt="GCP Architecture Diagram" width={400} height={300} className="mx-auto" />
+                            </div>
+                            <div className="text-center">
+                                <h3 className="text-lg font-semibold text-gray-900 mb-2">AWS Architecture Diagram</h3>
+                                <p className="text-gray-600 text-sm mb-4">
+                                    <strong>Prompt:</strong> Generate an AWS architecture diagram with <strong>AWS icons</strong>. Users connect to a frontend hosted on an instance.
+                                </p>
+                                <Image src="/aws_demo.svg" alt="AWS Architecture Diagram" width={400} height={300} className="mx-auto" />
+                            </div>
+                            <div className="text-center">
+                                <h3 className="text-lg font-semibold text-gray-900 mb-2">Azure Architecture Diagram</h3>
+                                <p className="text-gray-600 text-sm mb-4">
+                                    <strong>Prompt:</strong> Generate an Azure architecture diagram with <strong>Azure icons</strong>. Users connect to a frontend hosted on an instance.
+                                </p>
+                                <Image src="/azure_demo.svg" alt="Azure Architecture Diagram" width={400} height={300} className="mx-auto" />
+                            </div>
+                            <div className="text-center">
+                                <h3 className="text-lg font-semibold text-gray-900 mb-2">Cat Sketch</h3>
+                                <p className="text-gray-600 text-sm mb-4">
+                                    <strong>Prompt:</strong> Draw a cute cat for me.
+                                </p>
+                                <Image src="/cat_demo.svg" alt="Cat Drawing" width={240} height={240} className="mx-auto" />
+                            </div>
+                        </div>
+                    </div>
+
+                    {/* How It Works */}
+                    <h2 className="text-2xl font-semibold text-gray-900 mt-10 mb-4">How It Works</h2>
+                    <p className="text-gray-700 mb-4">The application uses the following technologies:</p>
+                    <ul className="list-disc pl-6 text-gray-700 space-y-2">
+                        <li><strong>Next.js</strong>: For the frontend framework and routing</li>
+                        <li><strong>Vercel AI SDK</strong> (<code>ai</code> + <code>@ai-sdk/*</code>): For streaming AI responses and multi-provider support</li>
+                        <li><strong>react-drawio</strong>: For diagram representation and manipulation</li>
+                    </ul>
+                    <p className="text-gray-700 mt-4">
+                        Diagrams are represented as XML that can be rendered in draw.io. The AI processes your commands and generates or modifies this XML accordingly.
+                    </p>
+
+                    {/* Multi-Provider Support */}
+                    <h2 className="text-2xl font-semibold text-gray-900 mt-10 mb-4">Multi-Provider Support</h2>
+                    <ul className="list-disc pl-6 text-gray-700 space-y-1">
+                        <li>AWS Bedrock (default)</li>
+                        <li>OpenAI / OpenAI-compatible APIs (via <code>OPENAI_BASE_URL</code>)</li>
+                        <li>Anthropic</li>
+                        <li>Google AI</li>
+                        <li>Azure OpenAI</li>
+                        <li>Ollama</li>
+                        <li>OpenRouter</li>
+                        <li>DeepSeek</li>
+                    </ul>
+                    <p className="text-gray-700 mt-4">
+                        Note that <code>claude-sonnet-4-5</code> has trained on draw.io diagrams with AWS logos, so if you want to create AWS architecture diagrams, this is the best choice.
+                    </p>
+
+                    {/* Support */}
+                    <div className="flex items-center gap-4 mt-10 mb-4">
+                        <h2 className="text-2xl font-semibold text-gray-900">Support &amp; Contact</h2>
+                        <iframe
+                            src="https://github.com/sponsors/DayuanJiang/button"
+                            title="Sponsor DayuanJiang"
+                            height="32"
+                            width="114"
+                            style={{ border: 0, borderRadius: 6 }}
+                        />
+                    </div>
+                    <p className="text-gray-700">
+                        If you find this project useful, please consider{" "}
+                        <a href="https://github.com/sponsors/DayuanJiang" target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">
+                            sponsoring
+                        </a>{" "}
+                        to help host the live demo site!
+                    </p>
+                    <p className="text-gray-700 mt-2">
+                        For support or inquiries, please open an issue on the{" "}
+                        <a href="https://github.com/DayuanJiang/next-ai-draw-io" target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">
+                            GitHub repository
+                        </a>{" "}
+                        or contact: me[at]jiang.jp
+                    </p>
+
+                    {/* CTA */}
+                    <div className="mt-12 text-center">
+                        <Link
+                            href="/"
+                            className="inline-block bg-blue-600 text-white px-8 py-3 rounded-lg font-semibold hover:bg-blue-700 transition-colors"
+                        >
+                            Open Editor
+                        </Link>
+                    </div>
+                </article>
+            </main>
+
+            {/* Footer */}
+            <footer className="bg-white border-t border-gray-200 mt-16">
+                <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+                    <p className="text-center text-gray-600 text-sm">
+                        Next AI Draw.io - Open Source AI-Powered Diagram Generator
+                    </p>
+                </div>
+            </footer>
+        </div>
+    );
+}
--- a/app/api/chat/route.ts
+++ b/app/api/chat/route.ts
@@ -1,18 +1,68 @@
-import { streamText, convertToModelMessages } from 'ai';
+import { streamText, convertToModelMessages, createUIMessageStream, createUIMessageStreamResponse } from 'ai';
 import { getAIModel } from '@/lib/ai-providers';
+import { findCachedResponse } from '@/lib/cached-responses';
 import { z } from "zod";

-export const maxDuration = 60;
+export const maxDuration = 300;
+
+// Helper function to check if diagram is minimal/empty
+function isMinimalDiagram(xml: string): boolean {
+  const stripped = xml.replace(/\s/g, '');
+  return !stripped.includes('id="2"');
+}
+
+// Helper function to create cached stream response
+function createCachedStreamResponse(xml: string): Response {
+  const toolCallId = `cached-${Date.now()}`;
+
+  const stream = createUIMessageStream({
+    execute: async ({ writer }) => {
+      writer.write({ type: 'start' });
+      writer.write({ type: 'tool-input-start', toolCallId, toolName: 'display_diagram' });
+      writer.write({ type: 'tool-input-delta', toolCallId, inputTextDelta: xml });
+      writer.write({ type: 'tool-input-available', toolCallId, toolName: 'display_diagram', input: { xml } });
+      writer.write({ type: 'finish' });
+    },
+  });
+
+  return createUIMessageStreamResponse({ stream });
+}

 export async function POST(req: Request) {
  try {
-    const { messages, xml } = await req.json();
+    const { messages, xml, sessionId } = await req.json();
+
+    // Get user IP for Langfuse tracking
+    const forwardedFor = req.headers.get('x-forwarded-for');
+    const userId = forwardedFor?.split(',')[0]?.trim() || 'anonymous';
+
+    // Validate sessionId for Langfuse (must be string, max 200 chars)
+    const validSessionId = sessionId && typeof sessionId === 'string' && sessionId.length <= 200
+      ? sessionId
+      : undefined;
+
+    // === CACHE CHECK START ===
+    const isFirstMessage = messages.length === 1;
+    const isEmptyDiagram = !xml || xml.trim() === '' || isMinimalDiagram(xml);
+
+    if (isFirstMessage && isEmptyDiagram) {
+      const lastMessage = messages[0];
+      const textPart = lastMessage.parts?.find((p: any) => p.type === 'text');
+      const filePart = lastMessage.parts?.find((p: any) => p.type === 'file');
+
+      const cached = findCachedResponse(textPart?.text || '', !!filePart);
+
+      if (cached) {
+        console.log('[Cache] Returning cached response for:', textPart?.text);
+        return createCachedStreamResponse(cached.xml);
+      }
+    }
+    // === CACHE CHECK END ===

    const systemMessage = `
 You are an expert diagram creation assistant specializing in draw.io XML generation.
-Your primary function is crafting clear, well-organized visual diagrams through precise XML specifications.
+Your primary function is chat with user and crafting clear, well-organized visual diagrams through precise XML specifications.
 You can see the image that user uploaded.
-Note that when you need to generate diagram about aws architecture, use **AWS 2025 icons**.

 You utilize the following tools:
 ---Tool1---
@@ -53,6 +103,9 @@ Layout constraints:
 - Avoid spreading elements too far apart horizontally - users should see the complete diagram without a page break line

 Note that:
+- Use proper tool calls to generate or edit diagrams;
+  - never return raw XML in text responses,
+  - never use display_diagram to generate messages that you want to send user directly. e.g. to generate a "hello" text box when you want to greet user.
 - Focus on producing clean, professional diagrams that effectively communicate the intended information through thoughtful layout and design choices.
 - When artistic drawings are requested, creatively compose them using standard diagram shapes and connectors while maintaining visual clarity.
 - Return XML only via tool calls, never in text responses.
@@ -68,6 +121,44 @@ When using edit_diagram tool:
  * You may retry edit_diagram up to 3 times with adjusted search patterns
  * After 3 failed attempts, you MUST fall back to using display_diagram to regenerate the entire diagram
  * The error message will indicate how many retries remain
+
+## Draw.io XML Structure Reference
+
+Basic structure:
+\`\`\`xml
+<mxGraphModel>
+  <root>
+    <mxCell id="0"/>
+    <mxCell id="1" parent="0"/>
+    <!-- All other cells go here as siblings -->
+  </root>
+</mxGraphModel>
+\`\`\`
+
+CRITICAL RULES:
+1. Always include the two root cells: <mxCell id="0"/> and <mxCell id="1" parent="0"/>
+2. ALL mxCell elements must be DIRECT children of <root> - NEVER nest mxCell inside another mxCell
+3. Use unique sequential IDs for all cells (start from "2" for user content)
+4. Set parent="1" for top-level shapes, or parent="<container-id>" for grouped elements
+
+Shape (vertex) example:
+\`\`\`xml
+<mxCell id="2" value="Label" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+  <mxGeometry x="100" y="100" width="120" height="60" as="geometry"/>
+</mxCell>
+\`\`\`
+
+Connector (edge) example:
+\`\`\`xml
+<mxCell id="3" style="endArrow=classic;html=1;" edge="1" parent="1" source="2" target="4">
+  <mxGeometry relative="1" as="geometry"/>
+</mxCell>
+\`\`\`
+
+Common styles:
+- Shapes: rounded=1 (rounded corners), fillColor=#hex, strokeColor=#hex
+- Edges: endArrow=classic/block/open/none, startArrow=none/classic, curved=1, edgeStyle=orthogonalEdgeStyle
+- Text: fontSize=14, fontStyle=1 (bold), align=center/left/right
 `;

    const lastMessage = messages[messages.length - 1];
@@ -90,7 +181,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) {
@@ -117,31 +231,97 @@ ${lastMessageText}
      }
    }

-    console.log("Enhanced messages:", enhancedMessages);
+    // Add cache point to the last assistant message in conversation history
+    // This caches the entire conversation prefix for subsequent requests
+    // Strategy: system (cached) + history with last assistant (cached) + new user message
+    if (enhancedMessages.length >= 2) {
+      // Find the last assistant message (should be second-to-last, before current user message)
+      for (let i = enhancedMessages.length - 2; i >= 0; i--) {
+        if (enhancedMessages[i].role === 'assistant') {
+          enhancedMessages[i] = {
+            ...enhancedMessages[i],
+            providerOptions: {
+              bedrock: { cachePoint: { type: 'default' } },
+            },
+          };
+          break; // Only cache the last assistant message
+        }
+      }
+    }

    // Get AI model from environment configuration
-    const { model, providerOptions } = getAIModel();
+    const { model, providerOptions, headers } = getAIModel();
+
+    // System message with cache point for Bedrock (requires 1024+ tokens)
+    const systemMessageWithCache = {
+      role: 'system' as const,
+      content: systemMessage,
+      providerOptions: {
+        bedrock: { cachePoint: { type: 'default' } },
+      },
+    };

    const result = streamText({
      model,
-      system: systemMessage,
-      messages: enhancedMessages,
+      messages: [systemMessageWithCache, ...enhancedMessages],
      ...(providerOptions && { providerOptions }),
+      ...(headers && { headers }),
+      // Only enable telemetry if Langfuse is configured
+      ...(process.env.LANGFUSE_PUBLIC_KEY && {
+        experimental_telemetry: {
+          isEnabled: true,
+          metadata: {
+            sessionId: validSessionId,
+            userId: userId,
+          },
+        },
+      }),
+      onFinish: ({ usage, providerMetadata }) => {
+        console.log('[Cache] Usage:', JSON.stringify({
+          inputTokens: usage?.inputTokens,
+          outputTokens: usage?.outputTokens,
+          cachedInputTokens: usage?.cachedInputTokens,
+        }, null, 2));
+        console.log('[Cache] Provider metadata:', JSON.stringify(providerMetadata, null, 2));
+      },
      tools: {
        // Client-side tool that will be executed on the client
        display_diagram: {
-          description: `Display a diagram on draw.io. You only need to pass the nodes inside the <root> tag (including the <root> tag itself) in the XML string.
-          For example:
-          <root>
-            <mxCell id="0"/>
-            <mxCell id="1" parent="0"/>
-            <mxGeometry x="20" y="20" width="100" height="100" as="geometry"/>
-            <mxCell id="2" value="Hello, World!" style="shape=rectangle" parent="1">
-              <mxGeometry x="20" y="20" width="100" height="100" as="geometry"/>
-            </mxCell>
-          </root>
-          - Note that when you need to generate diagram about aws architecture, use **AWS 2025 icons**.
-          `,
+          description: `Display a diagram on draw.io. Pass the XML content inside <root> tags.
+
+VALIDATION RULES (XML will be rejected if violated):
+1. All mxCell elements must be DIRECT children of <root> - never nested
+2. Every mxCell needs a unique id
+3. Every mxCell (except id="0") needs a valid parent attribute
+4. Edge source/target must reference existing cell IDs
+5. Escape special chars in values: &lt; &gt; &amp; &quot;
+6. Always start with: <mxCell id="0"/><mxCell id="1" parent="0"/>
+
+Example with swimlanes and edges (note: all mxCells are siblings):
+<root>
+  <mxCell id="0"/>
+  <mxCell id="1" parent="0"/>
+  <mxCell id="lane1" value="Frontend" style="swimlane;" vertex="1" parent="1">
+    <mxGeometry x="40" y="40" width="200" height="200" as="geometry"/>
+  </mxCell>
+  <mxCell id="step1" value="Step 1" style="rounded=1;" vertex="1" parent="lane1">
+    <mxGeometry x="20" y="60" width="160" height="40" as="geometry"/>
+  </mxCell>
+  <mxCell id="lane2" value="Backend" style="swimlane;" vertex="1" parent="1">
+    <mxGeometry x="280" y="40" width="200" height="200" as="geometry"/>
+  </mxCell>
+  <mxCell id="step2" value="Step 2" style="rounded=1;" vertex="1" parent="lane2">
+    <mxGeometry x="20" y="60" width="160" height="40" as="geometry"/>
+  </mxCell>
+  <mxCell id="edge1" style="edgeStyle=orthogonalEdgeStyle;endArrow=classic;" edge="1" parent="1" source="step1" target="step2">
+    <mxGeometry relative="1" as="geometry"/>
+  </mxCell>
+</root>
+
+Notes:
+- For AWS diagrams, use **AWS 2025 icons**.
+- For animated connectors, add "flowAnimation=1" to edge style.
+`,
          inputSchema: z.object({
            xml: z.string().describe("XML string to be displayed on draw.io")
          })
@@ -170,15 +350,20 @@ IMPORTANT: Keep edits concise:
        return 'unknown error';
      }

-      if (typeof error === 'string') {
-        return error;
+      const errorString = typeof error === 'string'
+        ? error
+        : error instanceof Error
+          ? error.message
+          : JSON.stringify(error);
+
+      // Check for image not supported error (e.g., DeepSeek models)
+      if (errorString.includes('image_url') ||
+          errorString.includes('unknown variant') ||
+          (errorString.includes('image') && errorString.includes('not supported'))) {
+        return 'This model does not support image inputs. Please remove the image and try again, or switch to a vision-capable model.';
      }

-      if (error instanceof Error) {
-        return error.message;
-      }
-
-      return JSON.stringify(error);
+      return errorString;
    }

    return result.toUIMessageStreamResponse({
--- a/app/api/chat/xml_guide.md
+++ b/app/api/chat/xml_guide.md
@@ -211,6 +211,7 @@ Draw.io files contain two special cells that are always present:
 4.  Define parent relationships correctly
 5.  Use `mxGeometry` elements to position shapes
 6.  For connectors, specify `source` and `target` attributes
+7.  **CRITICAL: All mxCell elements must be DIRECT children of `<root>`. NEVER nest mxCell inside another mxCell.**

 ## Common Patterns

@@ -234,12 +235,33 @@ To group elements, create a parent cell and set other cells' `parent` attribute

 ### Swimlanes

-Swimlanes use the `swimlane` shape style:
+Swimlanes use the `swimlane` shape style. **IMPORTANT: All mxCell elements (swimlanes, steps, and edges) must be siblings under `<root>`. Edges are NOT nested inside swimlanes or steps.**

 ```xml
-<mxCell id="20" value="Swimlane 1" style="swimlane;fontStyle=0;childLayout=stackLayout;horizontal=1;startSize=30;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=1;marginBottom=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
-  <mxGeometry x="200" y="200" width="140" height="120" as="geometry" />
-</mxCell>
+<root>
+  <mxCell id="0"/>
+  <mxCell id="1" parent="0"/>
+  <!-- Swimlane 1 -->
+  <mxCell id="lane1" value="Frontend" style="swimlane;startSize=30;" vertex="1" parent="1">
+    <mxGeometry x="40" y="40" width="200" height="300" as="geometry"/>
+  </mxCell>
+  <!-- Swimlane 2 -->
+  <mxCell id="lane2" value="Backend" style="swimlane;startSize=30;" vertex="1" parent="1">
+    <mxGeometry x="280" y="40" width="200" height="300" as="geometry"/>
+  </mxCell>
+  <!-- Step inside lane1 (parent="lane1") -->
+  <mxCell id="step1" value="Send Request" style="rounded=1;" vertex="1" parent="lane1">
+    <mxGeometry x="20" y="60" width="160" height="40" as="geometry"/>
+  </mxCell>
+  <!-- Step inside lane2 (parent="lane2") -->
+  <mxCell id="step2" value="Process" style="rounded=1;" vertex="1" parent="lane2">
+    <mxGeometry x="20" y="60" width="160" height="40" as="geometry"/>
+  </mxCell>
+  <!-- Edge connecting step1 to step2 (sibling element, NOT nested inside steps) -->
+  <mxCell id="edge1" style="edgeStyle=orthogonalEdgeStyle;endArrow=classic;" edge="1" parent="1" source="step1" target="step2">
+    <mxGeometry relative="1" as="geometry"/>
+  </mxCell>
+</root>
 ```

 ### Tables
--- a/app/globals.css
+++ b/app/globals.css
@@ -7,8 +7,8 @@
@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
+  --font-sans: var(--font-sans);
+  --font-mono: var(--font-mono);
  --color-sidebar-ring: var(--sidebar-ring);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
@@ -45,72 +45,102 @@
 }

 :root {
-  --radius: 0.625rem;
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
+  --radius: 0.75rem;
+
+  /* Clean Light Modern Palette */
+  --background: oklch(0.985 0.002 240);
+  --foreground: oklch(0.23 0.02 260);
+
  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
+  --card-foreground: oklch(0.23 0.02 260);
+
  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
-  --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
+  --popover-foreground: oklch(0.23 0.02 260);
+
+  /* Dark primary - slightly lighter */
+  --primary: oklch(0.35 0.01 260);
+  --primary-foreground: oklch(0.99 0 0);
+
+  /* Warm gray secondary */
+  --secondary: oklch(0.96 0.005 260);
+  --secondary-foreground: oklch(0.35 0.02 260);
+
+  /* Light muted tones */
+  --muted: oklch(0.965 0.005 260);
+  --muted-foreground: oklch(0.50 0.02 260);
+
+  /* Soft lavender accent */
+  --accent: oklch(0.94 0.03 280);
+  --accent-foreground: oklch(0.35 0.08 270);
+
+  /* Coral destructive */
+  --destructive: oklch(0.60 0.20 25);
+
+  /* Subtle borders */
+  --border: oklch(0.92 0.01 260);
+  --input: oklch(0.94 0.01 260);
+  --ring: oklch(0.25 0.01 260);
+
+  /* Chart colors - harmonious palette */
+  --chart-1: oklch(0.55 0.18 265);
+  --chart-2: oklch(0.65 0.15 170);
+  --chart-3: oklch(0.70 0.18 45);
+  --chart-4: oklch(0.60 0.20 330);
+  --chart-5: oklch(0.50 0.15 200);
+
+  /* Sidebar */
+  --sidebar: oklch(0.99 0.002 260);
+  --sidebar-foreground: oklch(0.23 0.02 260);
+  --sidebar-primary: oklch(0.55 0.18 265);
+  --sidebar-primary-foreground: oklch(0.99 0 0);
+  --sidebar-accent: oklch(0.96 0.02 270);
+  --sidebar-accent-foreground: oklch(0.35 0.05 265);
+  --sidebar-border: oklch(0.93 0.01 260);
+  --sidebar-ring: oklch(0.55 0.18 265);
 }

 .dark {
-  --background: oklch(0.145 0 0);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.205 0 0);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.205 0 0);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.922 0 0);
-  --primary-foreground: oklch(0.205 0 0);
-  --secondary: oklch(0.269 0 0);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.269 0 0);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.556 0 0);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.205 0 0);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.556 0 0);
+  --background: oklch(0.15 0.015 260);
+  --foreground: oklch(0.95 0.01 260);
+
+  --card: oklch(0.20 0.015 260);
+  --card-foreground: oklch(0.95 0.01 260);
+
+  --popover: oklch(0.20 0.015 260);
+  --popover-foreground: oklch(0.95 0.01 260);
+
+  --primary: oklch(0.70 0.16 265);
+  --primary-foreground: oklch(0.15 0.02 260);
+
+  --secondary: oklch(0.25 0.015 260);
+  --secondary-foreground: oklch(0.90 0.01 260);
+
+  --muted: oklch(0.25 0.015 260);
+  --muted-foreground: oklch(0.65 0.02 260);
+
+  --accent: oklch(0.30 0.04 280);
+  --accent-foreground: oklch(0.90 0.03 270);
+
+  --destructive: oklch(0.65 0.22 25);
+
+  --border: oklch(0.28 0.015 260);
+  --input: oklch(0.25 0.015 260);
+  --ring: oklch(0.70 0.16 265);
+
+  --chart-1: oklch(0.70 0.16 265);
+  --chart-2: oklch(0.70 0.13 170);
+  --chart-3: oklch(0.75 0.16 45);
+  --chart-4: oklch(0.70 0.18 330);
+  --chart-5: oklch(0.60 0.13 200);
+
+  --sidebar: oklch(0.18 0.015 260);
+  --sidebar-foreground: oklch(0.95 0.01 260);
+  --sidebar-primary: oklch(0.70 0.16 265);
+  --sidebar-primary-foreground: oklch(0.15 0.02 260);
+  --sidebar-accent: oklch(0.25 0.03 270);
+  --sidebar-accent-foreground: oklch(0.90 0.02 265);
+  --sidebar-border: oklch(0.28 0.015 260);
+  --sidebar-ring: oklch(0.70 0.16 265);
 }

@layer base {
@@ -118,6 +148,101 @@
    @apply border-border outline-ring/50;
  }
  body {
-    @apply bg-background text-foreground;
+    @apply bg-background text-foreground font-sans;
  }
 }
+
+/* Custom scrollbar */
+@layer utilities {
+  .scrollbar-thin {
+    scrollbar-width: thin;
+    scrollbar-color: oklch(0.85 0.01 260) transparent;
+  }
+
+  .scrollbar-thin::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  .scrollbar-thin::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  .scrollbar-thin::-webkit-scrollbar-thumb {
+    background-color: oklch(0.85 0.01 260);
+    border-radius: 3px;
+  }
+
+  .scrollbar-thin::-webkit-scrollbar-thumb:hover {
+    background-color: oklch(0.75 0.01 260);
+  }
+}
+
+/* Smooth page transitions */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideInRight {
+  from {
+    opacity: 0;
+    transform: translateX(16px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.animate-fade-in {
+  animation: fadeIn 0.3s ease-out forwards;
+}
+
+.animate-slide-in-right {
+  animation: slideInRight 0.3s ease-out forwards;
+}
+
+/* Message bubble animations */
+@keyframes messageIn {
+  from {
+    opacity: 0;
+    transform: translateY(12px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+.animate-message-in {
+  animation: messageIn 0.25s ease-out forwards;
+}
+
+/* Subtle floating shadow for cards */
+.shadow-soft {
+  box-shadow:
+    0 1px 2px oklch(0.23 0.02 260 / 0.04),
+    0 4px 12px oklch(0.23 0.02 260 / 0.06),
+    0 8px 24px oklch(0.23 0.02 260 / 0.04);
+}
+
+.shadow-soft-lg {
+  box-shadow:
+    0 2px 4px oklch(0.23 0.02 260 / 0.04),
+    0 8px 20px oklch(0.23 0.02 260 / 0.08),
+    0 16px 40px oklch(0.23 0.02 260 / 0.06);
+}
+
+/* Gradient text utility */
+.text-gradient-primary {
+  background: linear-gradient(135deg, oklch(0.55 0.18 265), oklch(0.60 0.20 290));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,23 +1,67 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
+import { Plus_Jakarta_Sans, JetBrains_Mono } from "next/font/google";
 import { Analytics } from "@vercel/analytics/react";
+import { GoogleAnalytics } from "@next/third-parties/google";
 import { DiagramProvider } from "@/contexts/diagram-context";

 import "./globals.css";

-const geistSans = Geist({
-    variable: "--font-geist-sans",
+const plusJakarta = Plus_Jakarta_Sans({
+    variable: "--font-sans",
    subsets: ["latin"],
+    weight: ["400", "500", "600", "700"],
 });

-const geistMono = Geist_Mono({
-    variable: "--font-geist-mono",
+const jetbrainsMono = JetBrains_Mono({
+    variable: "--font-mono",
    subsets: ["latin"],
+    weight: ["400", "500"],
 });

 export const metadata: Metadata = {
-    title: "Next-AI-Drawio",
-    description: "An AI-powered drawing tool that integrates with draw.io",
+    title: "Next AI Draw.io - AI-Powered Diagram Generator",
+    description: "Create AWS architecture diagrams, flowcharts, and technical diagrams using AI. Free online tool integrating draw.io with AI assistance for professional diagram creation.",
+    keywords: ["AI diagram generator", "AWS architecture", "flowchart creator", "draw.io", "AI drawing tool", "technical diagrams", "diagram automation", "free diagram generator", "online diagram maker"],
+    authors: [{ name: "Next AI Draw.io" }],
+    creator: "Next AI Draw.io",
+    publisher: "Next AI Draw.io",
+    metadataBase: new URL("https://next-ai-drawio.jiang.jp"),
+    openGraph: {
+        title: "Next AI Draw.io - AI Diagram Generator",
+        description: "Create professional diagrams with AI assistance. Supports AWS architecture, flowcharts, and more.",
+        type: "website",
+        url: "https://next-ai-drawio.jiang.jp",
+        siteName: "Next AI Draw.io",
+        locale: "en_US",
+        images: [
+            {
+                url: "/architecture.png",
+                width: 1200,
+                height: 630,
+                alt: "Next AI Draw.io - AI-powered diagram creation tool",
+            },
+        ],
+    },
+    twitter: {
+        card: "summary_large_image",
+        title: "Next AI Draw.io - AI Diagram Generator",
+        description: "Create professional diagrams with AI assistance. Free, no login required.",
+        images: ["/architecture.png"],
+    },
+    robots: {
+        index: true,
+        follow: true,
+        googleBot: {
+            index: true,
+            follow: true,
+            "max-video-preview": -1,
+            "max-image-preview": "large",
+            "max-snippet": -1,
+        },
+    },
+    icons: {
+        icon: "/favicon.ico",
+    },
 };

 export default function RootLayout({
@@ -25,15 +69,39 @@ export default function RootLayout({
 }: Readonly<{
    children: React.ReactNode;
 }>) {
+    const jsonLd = {
+        '@context': 'https://schema.org',
+        '@type': 'SoftwareApplication',
+        name: 'Next AI Draw.io',
+        applicationCategory: 'DesignApplication',
+        operatingSystem: 'Web Browser',
+        description: 'AI-powered diagram generator with targeted XML editing capabilities that integrates with draw.io for creating AWS architecture diagrams, flowcharts, and technical diagrams. Features diagram history, multi-provider AI support, and real-time collaboration.',
+        url: 'https://next-ai-drawio.jiang.jp',
+        offers: {
+            '@type': 'Offer',
+            price: '0',
+            priceCurrency: 'USD',
+        },
+    };
+
    return (
        <html lang="en">
+            <head>
+                <script
+                    type="application/ld+json"
+                    dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
+                />
+            </head>
            <body
-                className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+                className={`${plusJakarta.variable} ${jetbrainsMono.variable} antialiased`}
            >
                <DiagramProvider>{children}</DiagramProvider>

                <Analytics />
            </body>
+            {process.env.NEXT_PUBLIC_GA_ID && (
+                <GoogleAnalytics gaId={process.env.NEXT_PUBLIC_GA_ID} />
+            )}
        </html>
    );
 }
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -3,6 +3,7 @@ import React, { useState, useEffect } from "react";
 import { DrawIoEmbed } from "react-drawio";
 import ChatPanel from "@/components/chat-panel";
 import { useDiagram } from "@/contexts/diagram-context";
+import { Monitor } from "lucide-react";

 export default function Home() {
    const { drawioRef, handleDiagramExport } = useDiagram();
@@ -14,17 +15,11 @@ export default function Home() {
            setIsMobile(window.innerWidth < 768);
        };

-        // Check on mount
        checkMobile();
-
-        // Add event listener for resize
        window.addEventListener("resize", checkMobile);
-
-        // Cleanup
        return () => window.removeEventListener("resize", checkMobile);
    }, []);

-    // Add keyboard shortcut for toggling chat panel (Ctrl+B)
    useEffect(() => {
        const handleKeyDown = (event: KeyboardEvent) => {
            if ((event.ctrlKey || event.metaKey) && event.key === 'b') {
@@ -34,43 +29,56 @@ export default function Home() {
        };

        window.addEventListener('keydown', handleKeyDown);
-
-        return () => {
-            window.removeEventListener('keydown', handleKeyDown);
-        };
+        return () => window.removeEventListener('keydown', handleKeyDown);
    }, []);

-    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>
+    return (
+        <div className="flex h-screen bg-background relative overflow-hidden">
+            {/* Mobile warning overlay */}
+            {isMobile && (
+                <div className="absolute inset-0 z-50 flex items-center justify-center bg-background">
+                    <div className="text-center p-8 max-w-sm mx-auto animate-fade-in">
+                        <div className="w-16 h-16 rounded-2xl bg-primary/10 flex items-center justify-center mx-auto mb-6">
+                            <Monitor className="w-8 h-8 text-primary" />
+                        </div>
+                        <h1 className="text-xl font-semibold text-foreground mb-3">
+                            Desktop Required
+                        </h1>
+                        <p className="text-sm text-muted-foreground leading-relaxed">
+                            This application works best on desktop or laptop devices. Please open it on a larger screen for the full experience.
+                        </p>
+                    </div>
+                </div>
+            )}
+
+            {/* Draw.io Canvas */}
+            <div
+                className={`${isChatVisible ? 'w-2/3' : 'w-full'} h-full relative transition-all duration-300 ease-out`}
+            >
+                <div className="absolute inset-2 rounded-xl overflow-hidden shadow-soft-lg border border-border/30 bg-white">
+                    <DrawIoEmbed
+                        ref={drawioRef}
+                        onExport={handleDiagramExport}
+                        urlParameters={{
+                            spin: true,
+                            libraries: false,
+                            saveAndExit: false,
+                            noExitBtn: true,
+                        }}
+                    />
                </div>
            </div>
-        );
-    }

-    return (
-        <div className="flex h-screen bg-gray-100">
-            <div className={`${isChatVisible ? 'w-2/3' : 'w-full'} p-1 h-full relative transition-all duration-300 ease-in-out`}>
-                <DrawIoEmbed
-                    ref={drawioRef}
-                    onExport={handleDiagramExport}
-                    urlParameters={{
-                        spin: true,
-                        libraries: false,
-                        saveAndExit: false,
-                        noExitBtn: true,
-                    }}
-                />
-            </div>
-            <div className={`${isChatVisible ? 'w-1/3' : 'w-12'} h-full p-1 transition-all duration-300 ease-in-out`}>
-                <ChatPanel
-                    isVisible={isChatVisible}
-                    onToggleVisibility={() => setIsChatVisible(!isChatVisible)}
-                />
+            {/* Chat Panel */}
+            <div
+                className={`${isChatVisible ? 'w-1/3' : 'w-12'} h-full transition-all duration-300 ease-out`}
+            >
+                <div className="h-full py-2 pr-2">
+                    <ChatPanel
+                        isVisible={isChatVisible}
+                        onToggleVisibility={() => setIsChatVisible(!isChatVisible)}
+                    />
+                </div>
            </div>
        </div>
    );
--- a/app/robots.ts
+++ b/app/robots.ts
@@ -0,0 +1,12 @@
+import { MetadataRoute } from 'next'
+
+export default function robots(): MetadataRoute.Robots {
+    return {
+        rules: {
+            userAgent: '*',
+            allow: '/',
+            disallow: '/api/',
+        },
+        sitemap: 'https://next-ai-drawio.jiang.jp/sitemap.xml',
+    }
+}
--- a/app/sitemap.ts
+++ b/app/sitemap.ts
@@ -0,0 +1,18 @@
+import { MetadataRoute } from 'next'
+
+export default function sitemap(): MetadataRoute.Sitemap {
+    return [
+        {
+            url: 'https://next-ai-drawio.jiang.jp',
+            lastModified: new Date(),
+            changeFrequency: 'weekly',
+            priority: 1,
+        },
+        {
+            url: 'https://next-ai-drawio.jiang.jp/about',
+            lastModified: new Date(),
+            changeFrequency: 'monthly',
+            priority: 0.8,
+        },
+    ]
+}
--- a/components/chat-example-panel.tsx
+++ b/components/chat-example-panel.tsx
@@ -1,3 +1,37 @@
+"use client";
+
+import { Zap, Cloud, GitBranch, Palette } from "lucide-react";
+
+interface ExampleCardProps {
+    icon: React.ReactNode;
+    title: string;
+    description: string;
+    onClick: () => void;
+}
+
+function ExampleCard({ icon, title, description, onClick }: ExampleCardProps) {
+    return (
+        <button
+            onClick={onClick}
+            className="group w-full text-left p-4 rounded-xl border border-border/60 bg-card hover:bg-accent/50 hover:border-primary/30 transition-all duration-200 hover:shadow-sm"
+        >
+            <div className="flex items-start gap-3">
+                <div className="w-9 h-9 rounded-lg bg-primary/10 flex items-center justify-center shrink-0 group-hover:bg-primary/15 transition-colors">
+                    {icon}
+                </div>
+                <div className="min-w-0">
+                    <h3 className="text-sm font-medium text-foreground group-hover:text-primary transition-colors">
+                        {title}
+                    </h3>
+                    <p className="text-xs text-muted-foreground mt-0.5 line-clamp-2">
+                        {description}
+                    </p>
+                </div>
+            </div>
+        </button>
+    );
+}
+
 export default function ExamplePanel({
    setInput,
    setFiles,
@@ -5,71 +39,85 @@ export default function ExamplePanel({
    setInput: (input: string) => void;
    setFiles: (files: File[]) => void;
 }) {
-    // New handler for the "Replicate this flowchart" button
    const handleReplicateFlowchart = async () => {
        setInput("Replicate this flowchart.");

        try {
-            // Fetch the example image
            const response = await fetch("/example.png");
            const blob = await response.blob();
            const file = new File([blob], "example.png", { type: "image/png" });
-
-            // Set the file to the files state
            setFiles([file]);
        } catch (error) {
            console.error("Error loading example image:", error);
        }
    };

-    // Handler for the "Replicate this in aws style" button
    const handleReplicateArchitecture = async () => {
        setInput("Replicate this in aws style");

        try {
-            // Fetch the architecture image
            const response = await fetch("/architecture.png");
            const blob = await response.blob();
            const file = new File([blob], "architecture.png", {
                type: "image/png",
            });
-
-            // Set the file to the files state
            setFiles([file]);
        } catch (error) {
            console.error("Error loading architecture image:", error);
        }
    };
+
    return (
-        <div className="px-4 py-2 border-t border-b border-gray-100">
-            <p className="text-sm text-gray-500 mb-2">
-                {" "}
-                Start a conversation to generate or modify diagrams.
-            </p>
-            <p className="text-sm text-gray-500 mb-2">
-                {" "}
-                You can also upload images to use as references.
-            </p>
-            <p className="text-sm text-gray-500 mb-2">Try these examples:</p>
-            <div className="flex flex-wrap gap-5">
-                <button
-                    className="text-xs bg-gray-100 hover:bg-gray-200 text-gray-800 font-medium py-1 px-2 rounded"
-                    onClick={handleReplicateArchitecture}
-                >
-                    Create this diagram in aws style
-                </button>
-                <button
-                    className="text-xs bg-gray-100 hover:bg-gray-200 text-gray-800 font-medium py-1 px-2 rounded"
-                    onClick={handleReplicateFlowchart}
-                >
-                    Replicate this flowchart
-                </button>
-                <button
-                    className="text-xs bg-gray-100 hover:bg-gray-200 text-gray-800 font-medium py-1 px-2 rounded"
-                    onClick={() => setInput("Draw a cat for me")}
-                >
-                    Draw a cat for me
-                </button>
+        <div className="py-6 px-2 animate-fade-in">
+            {/* Welcome section */}
+            <div className="text-center mb-6">
+                <h2 className="text-lg font-semibold text-foreground mb-2">
+                    Create diagrams with AI
+                </h2>
+                <p className="text-sm text-muted-foreground max-w-xs mx-auto">
+                    Describe what you want to create or upload an image to replicate
+                </p>
+            </div>
+
+            {/* Examples grid */}
+            <div className="space-y-3">
+                <p className="text-xs font-medium text-muted-foreground uppercase tracking-wider px-1">
+                    Quick Examples
+                </p>
+
+                <div className="grid gap-2">
+                    <ExampleCard
+                        icon={<Zap className="w-4 h-4 text-primary" />}
+                        title="Animated Diagram"
+                        description="Draw a transformer architecture with animated connectors"
+                        onClick={() => setInput("Give me a **animated connector** diagram of transformer's architecture")}
+                    />
+
+                    <ExampleCard
+                        icon={<Cloud className="w-4 h-4 text-primary" />}
+                        title="AWS Architecture"
+                        description="Create a cloud architecture diagram with AWS icons"
+                        onClick={handleReplicateArchitecture}
+                    />
+
+                    <ExampleCard
+                        icon={<GitBranch className="w-4 h-4 text-primary" />}
+                        title="Replicate Flowchart"
+                        description="Upload and replicate an existing flowchart"
+                        onClick={handleReplicateFlowchart}
+                    />
+
+                    <ExampleCard
+                        icon={<Palette className="w-4 h-4 text-primary" />}
+                        title="Creative Drawing"
+                        description="Draw something fun and creative"
+                        onClick={() => setInput("Draw a cat for me")}
+                    />
+                </div>
+
+                <p className="text-[11px] text-muted-foreground/60 text-center mt-4">
+                    Examples are cached for instant response
+                </p>
            </div>
        </div>
    );
--- a/components/chat-input.tsx
+++ b/components/chat-input.tsx
@@ -4,12 +4,15 @@ import React, { useCallback, useRef, useEffect, useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Textarea } from "@/components/ui/textarea";
 import { ResetWarningModal } from "@/components/reset-warning-modal";
+import { SaveDialog } from "@/components/save-dialog";
 import {
    Loader2,
    Send,
-    RotateCcw,
+    Trash2,
    Image as ImageIcon,
    History,
+    Download,
+    Paperclip,
 } from "lucide-react";
 import { ButtonWithTooltip } from "@/components/button-with-tooltip";
 import { FilePreviewList } from "./file-preview-list";
@@ -39,19 +42,19 @@ export function ChatInput({
    showHistory = false,
    onToggleHistory = () => {},
 }: ChatInputProps) {
-    const { diagramHistory } = useDiagram();
+    const { diagramHistory, saveDiagramToFile } = useDiagram();
    const textareaRef = useRef<HTMLTextAreaElement>(null);
    const fileInputRef = useRef<HTMLInputElement>(null);
    const [isDragging, setIsDragging] = useState(false);
    const [showClearDialog, setShowClearDialog] = useState(false);
+    const [showSaveDialog, setShowSaveDialog] = useState(false);

-    // Debug: Log status changes
    const isDisabled = status === "streaming" || status === "submitted";
+
    useEffect(() => {
        console.log('[ChatInput] Status changed to:', status, '| Input disabled:', isDisabled);
    }, [status, isDisabled]);

-    // Auto-resize textarea based on content
    const adjustTextareaHeight = useCallback(() => {
        const textarea = textareaRef.current;
        if (textarea) {
@@ -64,7 +67,6 @@ export function ChatInput({
        adjustTextareaHeight();
    }, [input, adjustTextareaHeight]);

-    // Handle keyboard shortcuts and paste events
    const handleKeyDown = (e: React.KeyboardEvent) => {
        if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
            e.preventDefault();
@@ -75,7 +77,6 @@ export function ChatInput({
        }
    };

-    // Handle clipboard paste
    const handlePaste = async (e: React.ClipboardEvent) => {
        if (isDisabled) return;

@@ -89,7 +90,6 @@ export function ChatInput({
                imageItems.map(async (item) => {
                    const file = item.getAsFile();
                    if (!file) return null;
-                    // Create a new file with a unique name
                    return new File(
                        [file],
                        `pasted-image-${Date.now()}.${file.type.split("/")[1]}`,
@@ -109,13 +109,11 @@ export function ChatInput({
        }
    };

-    // Handle file changes
    const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        const newFiles = Array.from(e.target.files || []);
        onFileChange([...files, ...newFiles]);
    };

-    // Remove individual file
    const handleRemoveFile = (fileToRemove: File) => {
        onFileChange(files.filter((file) => file !== fileToRemove));
        if (fileInputRef.current) {
@@ -123,12 +121,10 @@ export function ChatInput({
        }
    };

-    // Trigger file input click
    const triggerFileInput = () => {
        fileInputRef.current?.click();
    };

-    // Handle drag events
    const handleDragOver = (e: React.DragEvent<HTMLFormElement>) => {
        e.preventDefault();
        e.stopPropagation();
@@ -150,7 +146,6 @@ export function ChatInput({

        const droppedFiles = e.dataTransfer.files;

-        // Only process image files
        const imageFiles = Array.from(droppedFiles).filter((file) =>
            file.type.startsWith("image/")
        );
@@ -160,7 +155,6 @@ export function ChatInput({
        }
    };

-    // Handle clearing conversation and diagram
    const handleClear = () => {
        onClearChat();
        setShowClearDialog(false);
@@ -169,112 +163,140 @@ export function ChatInput({
    return (
        <form
            onSubmit={onSubmit}
-            className={`w-full space-y-2 ${
+            className={`w-full transition-all duration-200 ${
                isDragging
-                    ? "border-2 border-dashed border-primary p-4 rounded-lg bg-muted/20"
+                    ? "ring-2 ring-primary ring-offset-2 rounded-2xl"
                    : ""
            }`}
            onDragOver={handleDragOver}
            onDragLeave={handleDragLeave}
            onDrop={handleDrop}
        >
-            <FilePreviewList files={files} onRemoveFile={handleRemoveFile} />
-
-            <Textarea
-                ref={textareaRef}
-                value={input}
-                onChange={onChange}
-                onKeyDown={handleKeyDown}
-                onPaste={handlePaste}
-                placeholder="Describe what changes you want to make to the diagram
-                or upload(paste) an image to replicate a diagram.
-                 (Press Cmd/Ctrl + Enter to send)"
-                disabled={isDisabled}
-                aria-label="Chat input"
-                className="min-h-[80px] resize-none transition-all duration-200 px-1 py-0"
-            />
-
-            <div className="flex items-center gap-2">
-                <div className="mr-auto">
-                    <ButtonWithTooltip
-                        type="button"
-                        variant="ghost"
-                        size="icon"
-                        onClick={() => setShowClearDialog(true)}
-                        tooltipContent="Clear current conversation and diagram"
-                    >
-                        <RotateCcw className="mr-2 h-4 w-4" />
-                    </ButtonWithTooltip>
-
-                    {/* Warning Modal */}
-                    <ResetWarningModal
-                        open={showClearDialog}
-                        onOpenChange={setShowClearDialog}
-                        onClear={handleClear}
-                    />
-
-                    <HistoryDialog
-                        showHistory={showHistory}
-                        onToggleHistory={onToggleHistory}
-                    />
+            {/* File previews */}
+            {files.length > 0 && (
+                <div className="mb-3">
+                    <FilePreviewList files={files} onRemoveFile={handleRemoveFile} />
                </div>
-                <div className="flex gap-2">
-                    {/* History Button */}
-                    <ButtonWithTooltip
-                        type="button"
-                        variant="outline"
-                        size="icon"
-                        onClick={() => onToggleHistory(true)}
-                        disabled={
-                            isDisabled ||
-                            diagramHistory.length === 0
-                        }
-                        title="Diagram History"
-                        tooltipContent="View diagram history"
-                    >
-                        <History className="h-4 w-4" />
-                    </ButtonWithTooltip>
+            )}

-                    <Button
-                        type="button"
-                        variant="outline"
-                        size="icon"
-                        onClick={triggerFileInput}
-                        disabled={isDisabled}
-                        title="Upload image"
-                    >
-                        <ImageIcon className="h-4 w-4" />
-                    </Button>
+            {/* Input container */}
+            <div className="relative rounded-2xl border border-border bg-background shadow-sm focus-within:ring-2 focus-within:ring-primary/20 focus-within:border-primary/50 transition-all duration-200">
+                <Textarea
+                    ref={textareaRef}
+                    value={input}
+                    onChange={onChange}
+                    onKeyDown={handleKeyDown}
+                    onPaste={handlePaste}
+                    placeholder="Describe your diagram or paste an image..."
+                    disabled={isDisabled}
+                    aria-label="Chat input"
+                    className="min-h-[60px] max-h-[200px] resize-none border-0 bg-transparent px-4 py-3 text-sm focus-visible:ring-0 focus-visible:ring-offset-0 placeholder:text-muted-foreground/60"
+                />

-                    <input
-                        type="file"
-                        ref={fileInputRef}
-                        className="hidden"
-                        onChange={handleFileChange}
-                        accept="image/*"
-                        multiple
-                        disabled={isDisabled}
-                    />
+                {/* Action bar */}
+                <div className="flex items-center justify-between px-3 py-2 border-t border-border/50">
+                    {/* Left actions */}
+                    <div className="flex items-center gap-1">
+                        <ButtonWithTooltip
+                            type="button"
+                            variant="ghost"
+                            size="sm"
+                            onClick={() => setShowClearDialog(true)}
+                            tooltipContent="Clear conversation"
+                            className="h-8 w-8 p-0 text-muted-foreground hover:text-destructive hover:bg-destructive/10"
+                        >
+                            <Trash2 className="h-4 w-4" />
+                        </ButtonWithTooltip>
+
+                        <ResetWarningModal
+                            open={showClearDialog}
+                            onOpenChange={setShowClearDialog}
+                            onClear={handleClear}
+                        />
+
+                        <HistoryDialog
+                            showHistory={showHistory}
+                            onToggleHistory={onToggleHistory}
+                        />
+                    </div>
+
+                    {/* Right actions */}
+                    <div className="flex items-center gap-1">
+                        <ButtonWithTooltip
+                            type="button"
+                            variant="ghost"
+                            size="sm"
+                            onClick={() => onToggleHistory(true)}
+                            disabled={isDisabled || diagramHistory.length === 0}
+                            tooltipContent="Diagram history"
+                            className="h-8 w-8 p-0 text-muted-foreground hover:text-foreground"
+                        >
+                            <History className="h-4 w-4" />
+                        </ButtonWithTooltip>
+
+                        <ButtonWithTooltip
+                            type="button"
+                            variant="ghost"
+                            size="sm"
+                            onClick={() => setShowSaveDialog(true)}
+                            disabled={isDisabled}
+                            tooltipContent="Save diagram"
+                            className="h-8 w-8 p-0 text-muted-foreground hover:text-foreground"
+                        >
+                            <Download className="h-4 w-4" />
+                        </ButtonWithTooltip>
+
+                        <SaveDialog
+                            open={showSaveDialog}
+                            onOpenChange={setShowSaveDialog}
+                            onSave={saveDiagramToFile}
+                            defaultFilename={`diagram-${new Date().toISOString().slice(0, 10)}`}
+                        />
+
+                        <ButtonWithTooltip
+                            type="button"
+                            variant="ghost"
+                            size="sm"
+                            onClick={triggerFileInput}
+                            disabled={isDisabled}
+                            tooltipContent="Upload image"
+                            className="h-8 w-8 p-0 text-muted-foreground hover:text-foreground"
+                        >
+                            <ImageIcon className="h-4 w-4" />
+                        </ButtonWithTooltip>
+
+                        <input
+                            type="file"
+                            ref={fileInputRef}
+                            className="hidden"
+                            onChange={handleFileChange}
+                            accept="image/*"
+                            multiple
+                            disabled={isDisabled}
+                        />
+
+                        <div className="w-px h-5 bg-border mx-1" />
+
+                        <Button
+                            type="submit"
+                            disabled={isDisabled || !input.trim()}
+                            size="sm"
+                            className="h-8 px-4 rounded-xl font-medium shadow-sm"
+                            aria-label={isDisabled ? "Sending..." : "Send message"}
+                        >
+                            {isDisabled ? (
+                                <Loader2 className="h-4 w-4 animate-spin" />
+                            ) : (
+                                <>
+                                    <Send className="h-4 w-4 mr-1.5" />
+                                    Send
+                                </>
+                            )}
+                        </Button>
+                    </div>
                </div>
-
-                <Button
-                    type="submit"
-                    disabled={isDisabled || !input.trim()}
-                    className="transition-opacity"
-                    aria-label={
-                        isDisabled
-                            ? "Sending message..."
-                            : "Send message"
-                    }
-                >
-                    {isDisabled ? (
-                        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                    ) : (
-                        <Send className="mr-2 h-4 w-4" />
-                    )}
-                    Send
-                </Button>
            </div>
+
        </form>
    );
 }
--- a/components/chat-message-display.tsx
+++ b/components/chat-message-display.tsx
@@ -1,15 +1,67 @@
 "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 { convertToLegalXml, replaceNodes, validateMxCellStructure } from "@/lib/utils";
+import { Copy, Check, X, ChevronDown, ChevronUp, Cpu, Minus, Plus } from "lucide-react";
+import { CodeBlock } from "./code-block";
+
+interface EditPair {
+    search: string;
+    replace: string;
+}
+
+function EditDiffDisplay({ edits }: { edits: EditPair[] }) {
+    return (
+        <div className="space-y-3">
+            {edits.map((edit, index) => (
+                <div key={index} className="rounded-lg border border-border/50 overflow-hidden bg-background/50">
+                    <div className="px-3 py-1.5 bg-muted/40 border-b border-border/30 flex items-center gap-2">
+                        <span className="text-xs font-medium text-muted-foreground">
+                            Change {index + 1}
+                        </span>
+                    </div>
+                    <div className="divide-y divide-border/30">
+                        {/* Search (old) */}
+                        <div className="px-3 py-2">
+                            <div className="flex items-center gap-1.5 mb-1.5">
+                                <Minus className="w-3 h-3 text-red-500" />
+                                <span className="text-[10px] font-medium text-red-600 uppercase tracking-wide">Remove</span>
+                            </div>
+                            <pre className="text-[11px] font-mono text-red-700 bg-red-50 rounded px-2 py-1.5 overflow-x-auto whitespace-pre-wrap break-all">
+                                {edit.search}
+                            </pre>
+                        </div>
+                        {/* Replace (new) */}
+                        <div className="px-3 py-2">
+                            <div className="flex items-center gap-1.5 mb-1.5">
+                                <Plus className="w-3 h-3 text-green-500" />
+                                <span className="text-[10px] font-medium text-green-600 uppercase tracking-wide">Add</span>
+                            </div>
+                            <pre className="text-[11px] font-mono text-green-700 bg-green-50 rounded px-2 py-1.5 overflow-x-auto whitespace-pre-wrap break-all">
+                                {edit.replace}
+                            </pre>
+                        </div>
+                    </div>
+                </div>
+            ))}
+        </div>
+    );
+}

 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,14 +82,35 @@ 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 || "";
            const convertedXml = convertToLegalXml(currentXml);
            if (convertedXml !== previousXML.current) {
-                previousXML.current = convertedXml;
                const replacedXML = replaceNodes(chartXML, convertedXml);
-                onDisplayChart(replacedXML);
+
+                const validationError = validateMxCellStructure(replacedXML);
+                if (!validationError) {
+                    previousXML.current = convertedXml;
+                    onDisplayChart(replacedXML);
+                } else {
+                    console.error("[ChatMessageDisplay] XML validation failed:", validationError);
+                }
            }
        },
        [chartXML, onDisplayChart]
@@ -49,7 +122,6 @@ export function ChatMessageDisplay({
        }
    }, [messages]);

-    // Handle tool invocations and update diagram when needed
    useEffect(() => {
        messages.forEach((message) => {
            if (message.parts) {
@@ -57,7 +129,6 @@ export function ChatMessageDisplay({
                    if (part.type?.startsWith("tool-")) {
                        const { toolCallId, state } = part;

-                        // Auto-collapse args when diagrams are generated
                        if (state === "output-available") {
                            setExpandedTools((prev) => ({
                                ...prev,
@@ -65,20 +136,16 @@ export function ChatMessageDisplay({
                            }));
                        }

-                        // Handle diagram updates for display_diagram tool
                        if (
                            part.type === "tool-display_diagram" &&
                            part.input?.xml
                        ) {
-                            // For streaming input, always update to show streaming
                            if (
                                state === "input-streaming" ||
                                state === "input-available"
                            ) {
                                handleDisplayChart(part.input.xml);
-                            }
-                            // For completed calls, only update if not processed yet
-                            else if (
+                            } else if (
                                state === "output-available" &&
                                !processedToolCalls.current.has(toolCallId)
                            ) {
@@ -105,110 +172,163 @@ export function ChatMessageDisplay({
            }));
        };

+        const getToolDisplayName = (name: string) => {
+            switch (name) {
+                case "display_diagram":
+                    return "Generate Diagram";
+                case "edit_diagram":
+                    return "Edit Diagram";
+                default:
+                    return name;
+            }
+        };
+
        return (
            <div
                key={callId}
-                className="p-4 my-2 text-gray-500 border border-gray-300 rounded"
+                className="my-3 rounded-xl border border-border/60 bg-muted/30 overflow-hidden"
            >
-                <div className="flex flex-col gap-2">
-                    <div className="flex items-center justify-between">
-                        <div className="text-xs">Tool: {toolName}</div>
+                <div className="flex items-center justify-between px-4 py-3 bg-muted/50">
+                    <div className="flex items-center gap-2">
+                        <div className="w-6 h-6 rounded-md bg-primary/10 flex items-center justify-center">
+                            <Cpu className="w-3.5 h-3.5 text-primary" />
+                        </div>
+                        <span className="text-sm font-medium text-foreground/80">
+                            {getToolDisplayName(toolName)}
+                        </span>
+                    </div>
+                    <div className="flex items-center gap-2">
+                        {state === "input-streaming" && (
+                            <div className="h-4 w-4 border-2 border-primary border-t-transparent rounded-full animate-spin" />
+                        )}
+                        {state === "output-available" && (
+                            <span className="text-xs font-medium text-green-600 bg-green-50 px-2 py-0.5 rounded-full">
+                                Complete
+                            </span>
+                        )}
+                        {state === "output-error" && (
+                            <span className="text-xs font-medium text-red-600 bg-red-50 px-2 py-0.5 rounded-full">
+                                Error
+                            </span>
+                        )}
                        {input && Object.keys(input).length > 0 && (
                            <button
                                onClick={toggleExpanded}
-                                className="text-xs text-gray-500 hover:text-gray-700"
+                                className="p-1 rounded hover:bg-muted transition-colors"
                            >
-                                {isExpanded ? "Hide Args" : "Show Args"}
+                                {isExpanded ? (
+                                    <ChevronUp className="w-4 h-4 text-muted-foreground" />
+                                ) : (
+                                    <ChevronDown className="w-4 h-4 text-muted-foreground" />
+                                )}
                            </button>
                        )}
                    </div>
-                    {input && isExpanded && (
-                        <div className="mt-1 font-mono text-xs overflow-hidden">
-                            {typeof input === "object" &&
-                                Object.keys(input).length > 0 &&
-                                `Input: ${JSON.stringify(input, null, 2)}`}
-                        </div>
-                    )}
-                    <div className="mt-2 text-sm">
-                        {state === "input-streaming" ? (
-                            <div className="h-4 w-4 border-2 border-primary border-t-transparent rounded-full animate-spin" />
-                        ) : state === "output-available" ? (
-                            <div className="text-green-600">
-                                {output || (toolName === "display_diagram"
-                                    ? "Diagram generated"
-                                    : toolName === "edit_diagram"
-                                    ? "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")}
-                            </div>
+                </div>
+                {input && isExpanded && (
+                    <div className="px-4 py-3 border-t border-border/40 bg-muted/20">
+                        {typeof input === "object" && input.xml ? (
+                            <CodeBlock code={input.xml} language="xml" />
+                        ) : typeof input === "object" && input.edits && Array.isArray(input.edits) ? (
+                            <EditDiffDisplay edits={input.edits} />
+                        ) : typeof input === "object" && Object.keys(input).length > 0 ? (
+                            <CodeBlock code={JSON.stringify(input, null, 2)} language="json" />
                        ) : null}
                    </div>
-                </div>
+                )}
+                {output && state === "output-error" && (
+                    <div className="px-4 py-3 border-t border-border/40 text-sm text-red-600">
+                        {output}
+                    </div>
+                )}
            </div>
        );
    };

    return (
-        <ScrollArea className="h-full pr-4">
+        <ScrollArea className="h-full px-4 scrollbar-thin">
            {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"
-                        }`}
-                    >
-                        <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"
-                            }`}
-                        >
-                            {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={`file-${index}`}
-                                                    className="rounded-md border"
-                                                    style={{
-                                                        objectFit: "contain",
-                                                    }}
-                                                />
-                                            </div>
-                                        );
-                                    default:
+                <div className="py-4 space-y-4">
+                    {messages.map((message, messageIndex) => {
+                        const userMessageText = message.role === "user" ? getMessageTextContent(message) : "";
+                        return (
+                            <div
+                                key={message.id}
+                                className={`flex ${message.role === "user" ? "justify-end" : "justify-start"} animate-message-in`}
+                                style={{ animationDelay: `${messageIndex * 50}ms` }}
+                            >
+                                {message.role === "user" && userMessageText && (
+                                    <button
+                                        onClick={() => copyMessageToClipboard(message.id, userMessageText)}
+                                        className="p-1.5 rounded-lg text-muted-foreground/60 hover:text-muted-foreground hover:bg-muted transition-colors self-center mr-2"
+                                        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="max-w-[85%]">
+                                    {/* Text content in bubble */}
+                                    {message.parts?.some((part: any) => part.type === "text" || part.type === "file") && (
+                                        <div
+                                            className={`px-4 py-3 text-sm leading-relaxed ${
+                                                message.role === "user"
+                                                    ? "bg-primary text-primary-foreground rounded-2xl rounded-br-md shadow-sm"
+                                                    : "bg-muted/60 text-foreground rounded-2xl rounded-bl-md"
+                                            }`}
+                                        >
+                                            {message.parts?.map((part: any, index: number) => {
+                                                switch (part.type) {
+                                                    case "text":
+                                                        return (
+                                                            <div key={index} className="whitespace-pre-wrap break-words">
+                                                                {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-lg border border-white/20"
+                                                                    style={{
+                                                                        objectFit: "contain",
+                                                                    }}
+                                                                />
+                                                            </div>
+                                                        );
+                                                    default:
+                                                        return null;
+                                                }
+                                            })}
+                                        </div>
+                                    )}
+                                    {/* Tool calls outside bubble */}
+                                    {message.parts?.map((part: any) => {
                                        if (part.type?.startsWith("tool-")) {
                                            return renderToolPart(part);
                                        }
                                        return null;
-                                }
-                            })}
-                        </div>
-                    </div>
-                ))
+                                    })}
+                                </div>
+                            </div>
+                        );
+                    })}
+                </div>
            )}
            {error && (
-                <div className="text-red-500 text-sm mt-2">
-                    Error: {error.message}
+                <div className="mx-4 mb-4 p-4 rounded-xl bg-red-50 border border-red-200 text-red-600 text-sm">
+                    <span className="font-medium">Error:</span> {error.message}
                </div>
            )}
            <div ref={messagesEndRef} />
--- a/components/chat-panel.tsx
+++ b/components/chat-panel.tsx
@@ -4,20 +4,15 @@ import type React from "react";
 import { useRef, useEffect, useState } from "react";
 import { FaGithub } from "react-icons/fa";
 import { PanelRightClose, PanelRightOpen } from "lucide-react";
+import Link from "next/link";
+import Image from "next/image";

-import {
-    Card,
-    CardContent,
-    CardFooter,
-    CardHeader,
-    CardTitle,
-} from "@/components/ui/card";
 import { useChat } from "@ai-sdk/react";
 import { DefaultChatTransport } from "ai";
 import { ChatInput } from "@/components/chat-input";
 import { ChatMessageDisplay } from "./chat-message-display";
 import { useDiagram } from "@/contexts/diagram-context";
-import { replaceNodes, formatXML } from "@/lib/utils";
+import { replaceNodes, formatXML, validateMxCellStructure } from "@/lib/utils";
 import { ButtonWithTooltip } from "@/components/button-with-tooltip";

 interface ChatPanelProps {
@@ -25,46 +20,50 @@ interface ChatPanelProps {
    onToggleVisibility: () => void;
 }

-export default function ChatPanel({ isVisible, onToggleVisibility }: ChatPanelProps) {
+export default function ChatPanel({
+    isVisible,
+    onToggleVisibility,
+}: ChatPanelProps) {
    const {
        loadDiagram: onDisplayChart,
        handleExport: onExport,
+        handleExportWithoutHistory,
        resolverRef,
        chartXML,
        clearDiagram,
    } = useDiagram();

-    const onFetchChart = () => {
+    const onFetchChart = (saveToHistory = true) => {
        return Promise.race([
            new Promise<string>((resolve) => {
                if (resolverRef && "current" in resolverRef) {
                    resolverRef.current = resolve;
                }
-                onExport();
+                if (saveToHistory) {
+                    onExport();
+                } else {
+                    handleExportWithoutHistory();
+                }
            }),
            new Promise<string>((_, reject) =>
-                setTimeout(() => reject(new Error("Chart export timed out after 10 seconds")), 10000)
-            )
+                setTimeout(
+                    () =>
+                        reject(
+                            new Error("Chart export timed out after 10 seconds")
+                        ),
+                    10000
+                )
+            ),
        ]);
    };
-    // Add a step counter to track updates

-    // Add state for file attachments
    const [files, setFiles] = useState<File[]>([]);
-    // Add state for showing the history dialog
    const [showHistory, setShowHistory] = useState(false);
-
-    // Convert File[] to FileList for experimental_attachments
-    const createFileList = (files: File[]): FileList => {
-        const dt = new DataTransfer();
-        files.forEach((file) => dt.items.add(file));
-        return dt.files;
-    };
-
-    // Add state for input management
    const [input, setInput] = useState("");

-    // Remove the currentXmlRef and related useEffect
+    // Generate a unique session ID for Langfuse tracing
+    const [sessionId, setSessionId] = useState(() => `session-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`);
+
    const { messages, sendMessage, addToolResult, status, error, setMessages } =
        useChat({
            transport: new DefaultChatTransport({
@@ -72,27 +71,36 @@ export default function ChatPanel({ isVisible, onToggleVisibility }: ChatPanelPr
            }),
            async onToolCall({ toolCall }) {
                if (toolCall.toolName === "display_diagram") {
-                    // Diagram is handled streamingly in the ChatMessageDisplay component
-                    addToolResult({
-                        tool: "display_diagram",
-                        toolCallId: toolCall.toolCallId,
-                        output: "Successfully displayed the diagram.",
-                    });
+                    const { xml } = toolCall.input as { xml: string };
+
+                    const validationError = validateMxCellStructure(xml);
+
+                    if (validationError) {
+                        addToolResult({
+                            tool: "display_diagram",
+                            toolCallId: toolCall.toolCallId,
+                            output: validationError,
+                        });
+                    } else {
+                        addToolResult({
+                            tool: "display_diagram",
+                            toolCallId: toolCall.toolCallId,
+                            output: "Successfully displayed the diagram.",
+                        });
+                    }
                } else if (toolCall.toolName === "edit_diagram") {
                    const { edits } = toolCall.input as {
                        edits: Array<{ search: string; replace: string }>;
                    };

-                    let currentXml = '';
+                    let currentXml = "";
                    try {
-                        // Fetch current chart XML
-                        currentXml = await onFetchChart();
+                        // Fetch without saving to history - edit_diagram shouldn't create history entry
+                        currentXml = await onFetchChart(false);

-                        // Apply edits using the utility function
                        const { replaceXMLParts } = await import("@/lib/utils");
                        const editedXml = replaceXMLParts(currentXml, edits);

-                        // Load the edited diagram
                        onDisplayChart(editedXml);

                        addToolResult({
@@ -103,9 +111,11 @@ export default function ChatPanel({ isVisible, onToggleVisibility }: ChatPanelPr
                    } catch (error) {
                        console.error("Edit diagram failed:", error);

-                        const errorMessage = error instanceof Error ? error.message : String(error);
+                        const errorMessage =
+                            error instanceof Error
+                                ? error.message
+                                : String(error);

-                        // Provide detailed error with current diagram XML
                        addToolResult({
                            tool: "edit_diagram",
                            toolCallId: toolCall.toolCallId,
@@ -125,17 +135,17 @@ Please retry with an adjusted search pattern or use display_diagram if retries a
                console.error("Chat error:", error);
            },
        });
+
    const messagesEndRef = useRef<HTMLDivElement>(null);
-    // Scroll to bottom when messages change
+
    useEffect(() => {
        if (messagesEndRef.current) {
            messagesEndRef.current.scrollIntoView({ behavior: "smooth" });
        }
    }, [messages]);

-    // Debug: Log status changes
    useEffect(() => {
-        console.log('[ChatPanel] Status changed to:', status);
+        console.log("[ChatPanel] Status changed to:", status);
    }, [status]);

    const onFormSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
@@ -143,16 +153,11 @@ Please retry with an adjusted search pattern or use display_diagram if retries a
        const isProcessing = status === "streaming" || status === "submitted";
        if (input.trim() && !isProcessing) {
            try {
-                // Fetch chart data before sending message
                let chartXml = await onFetchChart();
-
-                // Format the XML to ensure consistency
                chartXml = formatXML(chartXml);

-                // Create message parts
                const parts: any[] = [{ type: "text", text: input }];

-                // Add file parts if files exist
                if (files.length > 0) {
                    for (const file of files) {
                        const reader = new FileReader();
@@ -175,11 +180,11 @@ Please retry with an adjusted search pattern or use display_diagram if retries a
                    {
                        body: {
                            xml: chartXml,
+                            sessionId,
                        },
                    }
                );

-                // Clear input and files after submission
                setInput("");
                setFiles([]);
            } catch (error) {
@@ -188,74 +193,102 @@ Please retry with an adjusted search pattern or use display_diagram if retries a
        }
    };

-    // Handle input change
    const handleInputChange = (
        e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
    ) => {
        setInput(e.target.value);
    };

-    // Helper function to handle file changes
    const handleFileChange = (newFiles: File[]) => {
        setFiles(newFiles);
    };

-    // Collapsed view when chat is hidden
+    // Collapsed view
    if (!isVisible) {
        return (
-            <Card className="h-full flex flex-col rounded-none py-0 gap-0 items-center justify-start pt-4">
+            <div className="h-full flex flex-col items-center pt-4 bg-card border border-border/30 rounded-xl">
                <ButtonWithTooltip
                    tooltipContent="Show chat panel (Ctrl+B)"
                    variant="ghost"
                    size="icon"
                    onClick={onToggleVisibility}
+                    className="hover:bg-accent transition-colors"
                >
-                    <PanelRightOpen className="h-5 w-5" />
+                    <PanelRightOpen className="h-5 w-5 text-muted-foreground" />
                </ButtonWithTooltip>
                <div
-                    className="text-sm text-gray-500 mt-8"
-                    style={{ writingMode: 'vertical-rl', transform: 'rotate(180deg)' }}
+                    className="text-sm font-medium text-muted-foreground mt-8 tracking-wide"
+                    style={{
+                        writingMode: "vertical-rl",
+                        transform: "rotate(180deg)",
+                    }}
                >
-                    Chat
+                    AI Chat
                </div>
-            </Card>
+            </div>
        );
    }

-    // Full view when chat is visible
+    // Full view
    return (
-        <Card className="h-full flex flex-col rounded-none py-0 gap-0">
-            <CardHeader className="p-4 flex flex-row justify-between items-center">
-                <CardTitle>Next-AI-Drawio</CardTitle>
-                <div className="flex items-center gap-2">
-                    <ButtonWithTooltip
-                        tooltipContent="Hide chat panel (Ctrl+B)"
-                        variant="ghost"
-                        size="icon"
-                        onClick={onToggleVisibility}
-                    >
-                        <PanelRightClose className="h-5 w-5" />
-                    </ButtonWithTooltip>
-                    <a
-                        href="https://github.com/DayuanJiang/next-ai-draw-io"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="text-gray-600 hover:text-gray-900 transition-colors"
-                    >
-                        <FaGithub className="w-6 h-6" />
-                    </a>
+        <div className="h-full flex flex-col bg-card shadow-soft animate-slide-in-right rounded-xl border border-border/30">
+            {/* Header */}
+            <header className="px-5 py-4 border-b border-border/50">
+                <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-3">
+                        <div className="flex items-center gap-2">
+                            <Image
+                                src="/favicon.ico"
+                                alt="Next AI Drawio"
+                                width={28}
+                                height={28}
+                                className="rounded"
+                            />
+                            <h1 className="text-base font-semibold tracking-tight whitespace-nowrap">
+                                Next AI Drawio
+                            </h1>
+                        </div>
+                        <Link
+                            href="/about"
+                            className="text-sm text-muted-foreground hover:text-foreground transition-colors ml-2"
+                        >
+                            About
+                        </Link>
+                    </div>
+                    <div className="flex items-center gap-1">
+                        <a
+                            href="https://github.com/DayuanJiang/next-ai-draw-io"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="p-2 rounded-lg text-muted-foreground hover:text-foreground hover:bg-accent transition-colors"
+                        >
+                            <FaGithub className="w-5 h-5" />
+                        </a>
+                        <ButtonWithTooltip
+                            tooltipContent="Hide chat panel (Ctrl+B)"
+                            variant="ghost"
+                            size="icon"
+                            onClick={onToggleVisibility}
+                            className="hover:bg-accent"
+                        >
+                            <PanelRightClose className="h-5 w-5 text-muted-foreground" />
+                        </ButtonWithTooltip>
+                    </div>
                </div>
-            </CardHeader>
-            <CardContent className="flex-grow overflow-hidden px-2">
+            </header>
+
+            {/* Messages */}
+            <main className="flex-1 overflow-hidden">
                <ChatMessageDisplay
                    messages={messages}
                    error={error}
                    setInput={setInput}
                    setFiles={handleFileChange}
                />
-            </CardContent>
+            </main>

-            <CardFooter className="p-2">
+            {/* Input */}
+            <footer className="p-4 border-t border-border/50 bg-card/50">
                <ChatInput
                    input={input}
                    status={status}
@@ -264,13 +297,14 @@ Please retry with an adjusted search pattern or use display_diagram if retries a
                    onClearChat={() => {
                        setMessages([]);
                        clearDiagram();
+                        setSessionId(`session-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`);
                    }}
                    files={files}
                    onFileChange={handleFileChange}
                    showHistory={showHistory}
                    onToggleHistory={setShowHistory}
                />
-            </CardFooter>
-        </Card>
+            </footer>
+        </div>
    );
 }
--- a/components/code-block.tsx
+++ b/components/code-block.tsx
@@ -0,0 +1,39 @@
+"use client";
+
+import { Highlight, themes } from "prism-react-renderer";
+
+interface CodeBlockProps {
+    code: string;
+    language?: "xml" | "json";
+}
+
+export function CodeBlock({ code, language = "xml" }: CodeBlockProps) {
+    return (
+        <div className="overflow-hidden w-full">
+            <Highlight theme={themes.github} code={code} language={language}>
+                {({ className, style, tokens, getLineProps, getTokenProps }) => (
+                    <pre
+                        className="text-[11px] leading-relaxed overflow-x-auto overflow-y-auto max-h-48 scrollbar-thin break-all"
+                        style={{
+                            ...style,
+                            fontFamily: "var(--font-mono), ui-monospace, monospace",
+                            backgroundColor: "transparent",
+                            margin: 0,
+                            padding: 0,
+                            wordBreak: "break-all",
+                            whiteSpace: "pre-wrap",
+                        }}
+                    >
+                        {tokens.map((line, i) => (
+                            <div key={i} {...getLineProps({ line })} style={{ wordBreak: "break-all" }}>
+                                {line.map((token, key) => (
+                                    <span key={key} {...getTokenProps({ token })} />
+                                ))}
+                            </div>
+                        ))}
+                    </pre>
+                )}
+            </Highlight>
+        </div>
+    );
+}
--- a/components/file-preview-list.tsx
+++ b/components/file-preview-list.tsx
@@ -79,7 +79,7 @@ export function FilePreviewList({ files, onRemoveFile }: FilePreviewListProps) {
                    <div className="relative w-auto h-auto max-w-[90vw] max-h-[90vh]">
                        <Image
                            src={selectedImage}
-                            alt="Preview"
+                            alt="Full size preview of uploaded diagram or image"
                            width={1200}
                            height={900}
                            className="object-contain max-w-full max-h-[90vh] w-auto h-auto"
--- a/components/history-dialog.tsx
+++ b/components/history-dialog.tsx
@@ -1,5 +1,6 @@
 "use client";

+import { useState } from "react";
 import {
    Dialog,
    DialogContent,
@@ -22,6 +23,19 @@ export function HistoryDialog({
    onToggleHistory,
 }: HistoryDialogProps) {
    const { loadDiagram: onDisplayChart, diagramHistory } = useDiagram();
+    const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
+
+    const handleClose = () => {
+        setSelectedIndex(null);
+        onToggleHistory(false);
+    };
+
+    const handleConfirmRestore = () => {
+        if (selectedIndex !== null) {
+            onDisplayChart(diagramHistory[selectedIndex].xml);
+            handleClose();
+        }
+    };

    return (
        <Dialog open={showHistory} onOpenChange={onToggleHistory}>
@@ -45,11 +59,12 @@ export function HistoryDialog({
                        {diagramHistory.map((item, index) => (
                            <div
                                key={index}
-                                className="border rounded-md p-2 cursor-pointer hover:border-primary transition-colors"
-                                onClick={() => {
-                                    onDisplayChart(item.xml);
-                                    onToggleHistory(false);
-                                }}
+                                className={`border rounded-md p-2 cursor-pointer hover:border-primary transition-colors ${
+                                    selectedIndex === index
+                                        ? "border-primary ring-2 ring-primary"
+                                        : ""
+                                }`}
+                                onClick={() => setSelectedIndex(index)}
                            >
                                <div className="aspect-video bg-white rounded overflow-hidden flex items-center justify-center">
                                    <Image
@@ -69,12 +84,29 @@ export function HistoryDialog({
                )}

                <DialogFooter>
-                    <Button
-                        variant="outline"
-                        onClick={() => onToggleHistory(false)}
-                    >
-                        Close
-                    </Button>
+                    {selectedIndex !== null ? (
+                        <>
+                            <div className="flex-1 text-sm text-muted-foreground">
+                                Restore to Version {selectedIndex + 1}?
+                            </div>
+                            <Button
+                                variant="outline"
+                                onClick={() => setSelectedIndex(null)}
+                            >
+                                Cancel
+                            </Button>
+                            <Button onClick={handleConfirmRestore}>
+                                Confirm
+                            </Button>
+                        </>
+                    ) : (
+                        <Button
+                            variant="outline"
+                            onClick={handleClose}
+                        >
+                            Close
+                        </Button>
+                    )}
                </DialogFooter>
            </DialogContent>
        </Dialog>
--- a/components/save-dialog.tsx
+++ b/components/save-dialog.tsx
@@ -0,0 +1,80 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+    Dialog,
+    DialogContent,
+    DialogHeader,
+    DialogTitle,
+    DialogFooter,
+} from "@/components/ui/dialog";
+
+interface SaveDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    onSave: (filename: string) => void;
+    defaultFilename: string;
+}
+
+export function SaveDialog({
+    open,
+    onOpenChange,
+    onSave,
+    defaultFilename,
+}: SaveDialogProps) {
+    const [filename, setFilename] = useState(defaultFilename);
+
+    useEffect(() => {
+        if (open) {
+            setFilename(defaultFilename);
+        }
+    }, [open, defaultFilename]);
+
+    const handleSave = () => {
+        const finalFilename = filename.trim() || defaultFilename;
+        onSave(finalFilename);
+        onOpenChange(false);
+    };
+
+    const handleKeyDown = (e: React.KeyboardEvent) => {
+        if (e.key === "Enter") {
+            e.preventDefault();
+            handleSave();
+        }
+    };
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent className="sm:max-w-md">
+                <DialogHeader>
+                    <DialogTitle>Save Diagram</DialogTitle>
+                </DialogHeader>
+                <div className="space-y-2">
+                    <label className="text-sm font-medium">Filename</label>
+                    <div className="flex items-stretch">
+                        <Input
+                            value={filename}
+                            onChange={(e) => setFilename(e.target.value)}
+                            onKeyDown={handleKeyDown}
+                            placeholder="Enter filename"
+                            autoFocus
+                            onFocus={(e) => e.target.select()}
+                            className="rounded-r-none border-r-0 focus-visible:z-10"
+                        />
+                        <span className="inline-flex items-center px-3 rounded-r-md border border-l-0 border-input bg-muted text-sm text-muted-foreground font-mono">
+                            .drawio
+                        </span>
+                    </div>
+                </div>
+                <DialogFooter>
+                    <Button variant="outline" onClick={() => onOpenChange(false)}>
+                        Cancel
+                    </Button>
+                    <Button onClick={handleSave}>Save</Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    );
+}
--- a/contexts/diagram-context.tsx
+++ b/contexts/diagram-context.tsx
@@ -10,10 +10,12 @@ interface DiagramContextType {
    diagramHistory: { svg: string; xml: string }[];
    loadDiagram: (chart: string) => void;
    handleExport: () => void;
+    handleExportWithoutHistory: () => void;
    resolverRef: React.Ref<((value: string) => void) | null>;
    drawioRef: React.Ref<DrawIoEmbedRef | null>;
    handleDiagramExport: (data: any) => void;
    clearDiagram: () => void;
+    saveDiagramToFile: (filename: string) => void;
 }

 const DiagramContext = createContext<DiagramContextType | undefined>(undefined);
@@ -26,9 +28,24 @@ export function DiagramProvider({ children }: { children: React.ReactNode }) {
    >([]);
    const drawioRef = useRef<DrawIoEmbedRef | null>(null);
    const resolverRef = useRef<((value: string) => void) | null>(null);
+    // Track if we're expecting an export for history (user-initiated)
+    const expectHistoryExportRef = useRef<boolean>(false);
+    // Track if we're expecting an export for file save
+    const saveResolverRef = useRef<((xml: string) => void) | null>(null);

    const handleExport = () => {
        if (drawioRef.current) {
+            // Mark that this export should be saved to history
+            expectHistoryExportRef.current = true;
+            drawioRef.current.exportDiagram({
+                format: "xmlsvg",
+            });
+        }
+    };
+
+    const handleExportWithoutHistory = () => {
+        if (drawioRef.current) {
+            // Export without saving to history (for edit_diagram fetching current state)
            drawioRef.current.exportDiagram({
                format: "xmlsvg",
            });
@@ -47,17 +64,29 @@ export function DiagramProvider({ children }: { children: React.ReactNode }) {
        const extractedXML = extractDiagramXML(data.data);
        setChartXML(extractedXML);
        setLatestSvg(data.data);
-        setDiagramHistory((prev) => [
-            ...prev,
-            {
-                svg: data.data,
-                xml: extractedXML,
-            },
-        ]);
+
+        // Only add to history if this was a user-initiated export
+        if (expectHistoryExportRef.current) {
+            setDiagramHistory((prev) => [
+                ...prev,
+                {
+                    svg: data.data,
+                    xml: extractedXML,
+                },
+            ]);
+            expectHistoryExportRef.current = false;
+        }
+
        if (resolverRef.current) {
            resolverRef.current(extractedXML);
            resolverRef.current = null;
        }
+
+        // Handle save to file if requested
+        if (saveResolverRef.current) {
+            saveResolverRef.current(extractedXML);
+            saveResolverRef.current = null;
+        }
    };

    const clearDiagram = () => {
@@ -68,6 +97,35 @@ export function DiagramProvider({ children }: { children: React.ReactNode }) {
        setDiagramHistory([]);
    };

+    const saveDiagramToFile = (filename: string) => {
+        if (!drawioRef.current) {
+            console.warn("Draw.io editor not ready");
+            return;
+        }
+
+        // Export diagram and save when export completes
+        drawioRef.current.exportDiagram({ format: "xmlsvg" });
+        saveResolverRef.current = (xml: string) => {
+            // Wrap in proper .drawio format
+            let fileContent = xml;
+            if (!xml.includes("<mxfile")) {
+                fileContent = `<mxfile><diagram name="Page-1" id="page-1">${xml}</diagram></mxfile>`;
+            }
+
+            const blob = new Blob([fileContent], { type: "application/xml" });
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement("a");
+            a.href = url;
+            // Add .drawio extension if not present
+            a.download = filename.endsWith(".drawio") ? filename : `${filename}.drawio`;
+            document.body.appendChild(a);
+            a.click();
+            document.body.removeChild(a);
+            // Delay URL revocation to ensure download completes
+            setTimeout(() => URL.revokeObjectURL(url), 100);
+        };
+    };
+
    return (
        <DiagramContext.Provider
            value={{
@@ -76,10 +134,12 @@ export function DiagramProvider({ children }: { children: React.ReactNode }) {
                diagramHistory,
                loadDiagram,
                handleExport,
+                handleExportWithoutHistory,
                resolverRef,
                drawioRef,
                handleDiagramExport,
                clearDiagram,
+                saveDiagramToFile,
            }}
        >
            {children}
--- a/env.example
+++ b/env.example
@@ -1,6 +1,6 @@
 # AI Provider Configuration
 # AI_PROVIDER: Which provider to use
-# Options: bedrock, openai, anthropic, google, azure, ollama, openrouter
+# Options: bedrock, openai, anthropic, google, azure, ollama, openrouter, deepseek
 # Default: bedrock
 AI_PROVIDER=bedrock

@@ -14,21 +14,36 @@ 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

 # Anthropic (Direct) Configuration
 # ANTHROPIC_API_KEY=sk-ant-...
+# ANTHROPIC_BASE_URL=https://your-custom-anthropic/v1

 # Google Generative AI Configuration
 # GOOGLE_GENERATIVE_AI_API_KEY=...
+# GOOGLE_BASE_URL=https://generativelanguage.googleapis.com/v1beta  # Optional: Custom endpoint

 # Azure OpenAI Configuration
 # AZURE_RESOURCE_NAME=your-resource-name
 # AZURE_API_KEY=...
+# AZURE_BASE_URL=https://your-resource.openai.azure.com  # Optional: Custom endpoint (overrides resourceName)

 # Ollama (Local) Configuration
 # OLLAMA_BASE_URL=http://localhost:11434/api  # Optional, defaults to localhost

 # OpenRouter Configuration
 # OPENROUTER_API_KEY=sk-or-v1-...
+# OPENROUTER_BASE_URL=https://openrouter.ai/api/v1  # Optional: Custom endpoint
+
+# DeepSeek Configuration
+# DEEPSEEK_API_KEY=sk-...
+# DEEPSEEK_BASE_URL=https://api.deepseek.com/v1  # Optional: Custom endpoint
+
+# Langfuse Observability (Optional)
+# Enable LLM tracing and analytics - https://langfuse.com
+# LANGFUSE_PUBLIC_KEY=pk-lf-...
+# LANGFUSE_SECRET_KEY=sk-lf-...
+# LANGFUSE_BASEURL=https://cloud.langfuse.com  # EU region, use https://us.cloud.langfuse.com for US
--- a/instrumentation.ts
+++ b/instrumentation.ts
@@ -0,0 +1,22 @@
+import { LangfuseSpanProcessor } from '@langfuse/otel';
+import { NodeTracerProvider } from '@opentelemetry/sdk-trace-node';
+
+export function register() {
+  // Skip telemetry if Langfuse env vars are not configured
+  if (!process.env.LANGFUSE_PUBLIC_KEY || !process.env.LANGFUSE_SECRET_KEY) {
+    console.warn('[Langfuse] Environment variables not configured - telemetry disabled');
+    return;
+  }
+
+  const langfuseSpanProcessor = new LangfuseSpanProcessor({
+    publicKey: process.env.LANGFUSE_PUBLIC_KEY,
+    secretKey: process.env.LANGFUSE_SECRET_KEY,
+    baseUrl: process.env.LANGFUSE_BASEURL,
+  });
+
+  const tracerProvider = new NodeTracerProvider({
+    spanProcessors: [langfuseSpanProcessor],
+  });
+
+  tracerProvider.register();
+}
--- a/lib/ai-providers.ts
+++ b/lib/ai-providers.ts
@@ -1,10 +1,11 @@
 import { bedrock } from '@ai-sdk/amazon-bedrock';
-import { openai } from '@ai-sdk/openai';
-import { anthropic } from '@ai-sdk/anthropic';
-import { google } from '@ai-sdk/google';
-import { azure } from '@ai-sdk/azure';
-import { ollama } from 'ollama-ai-provider-v2';
+import { openai, createOpenAI } from '@ai-sdk/openai';
+import { createAnthropic } from '@ai-sdk/anthropic';
+import { google, createGoogleGenerativeAI } from '@ai-sdk/google';
+import { azure, createAzure } from '@ai-sdk/azure';
+import { ollama, createOllama } from 'ollama-ai-provider-v2';
 import { createOpenRouter } from '@openrouter/ai-sdk-provider';
+import { deepseek, createDeepSeek } from '@ai-sdk/deepseek';

 export type ProviderName =
  | 'bedrock'
@@ -13,20 +14,25 @@ export type ProviderName =
  | 'google'
  | 'azure'
  | 'ollama'
-  | 'openrouter';
+  | 'openrouter'
+  | 'deepseek';

 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',
 };

 /**
@@ -41,6 +47,7 @@ function validateProviderCredentials(provider: ProviderName): void {
    azure: 'AZURE_API_KEY',
    ollama: null, // No credentials needed for local Ollama
    openrouter: 'OPENROUTER_API_KEY',
+    deepseek: 'DEEPSEEK_API_KEY',
  };

  const requiredVar = requiredEnvVars[provider];
@@ -56,17 +63,20 @@ function validateProviderCredentials(provider: ProviderName): void {
 * Get the AI model based on environment variables
 *
 * Environment variables:
- * - AI_PROVIDER: The provider to use (bedrock, openai, anthropic, google, azure, ollama, openrouter)
+ * - AI_PROVIDER: The provider to use (bedrock, openai, anthropic, google, azure, ollama, openrouter, deepseek)
 * - AI_MODEL: The model ID/name for the selected provider
 *
 * 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
 * - AWS_REGION, AWS_ACCESS_KEY_ID, AWS_SECRET_ACCESS_KEY: AWS Bedrock credentials
 * - OLLAMA_BASE_URL: Ollama server URL (optional, defaults to http://localhost:11434)
 * - OPENROUTER_API_KEY: OpenRouter API key
+ * - DEEPSEEK_API_KEY: DeepSeek API key
+ * - DEEPSEEK_BASE_URL: DeepSeek endpoint (optional)
 */
 export function getAIModel(): ModelConfig {
  const provider = (process.env.AI_PROVIDER || 'bedrock') as ProviderName;
@@ -86,55 +96,105 @@ 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);
+      const customProvider = createAnthropic({
+        apiKey: process.env.ANTHROPIC_API_KEY,
+        baseURL: process.env.ANTHROPIC_BASE_URL || 'https://api.anthropic.com/v1',
+        headers: ANTHROPIC_BETA_HEADERS,
+      });
+      model = customProvider(modelId);
      // Add beta headers for fine-grained tool streaming
-      providerOptions = ANTHROPIC_BETA_OPTIONS;
+      headers = ANTHROPIC_BETA_HEADERS;
      break;

    case 'google':
-      model = google(modelId);
+      if (process.env.GOOGLE_BASE_URL) {
+        const customGoogle = createGoogleGenerativeAI({
+          apiKey: process.env.GOOGLE_GENERATIVE_AI_API_KEY,
+          baseURL: process.env.GOOGLE_BASE_URL,
+        });
+        model = customGoogle(modelId);
+      } else {
+        model = google(modelId);
+      }
      break;

    case 'azure':
-      model = azure(modelId);
+      if (process.env.AZURE_BASE_URL) {
+        const customAzure = createAzure({
+          apiKey: process.env.AZURE_API_KEY,
+          baseURL: process.env.AZURE_BASE_URL,
+        });
+        model = customAzure(modelId);
+      } else {
+        model = azure(modelId);
+      }
      break;

    case 'ollama':
-      model = ollama(modelId);
+      if (process.env.OLLAMA_BASE_URL) {
+        const customOllama = createOllama({
+          baseURL: process.env.OLLAMA_BASE_URL,
+        });
+        model = customOllama(modelId);
+      } else {
+        model = ollama(modelId);
+      }
      break;

    case 'openrouter':
      const openrouter = createOpenRouter({
        apiKey: process.env.OPENROUTER_API_KEY,
+        ...(process.env.OPENROUTER_BASE_URL && { baseURL: process.env.OPENROUTER_BASE_URL }),
      });
      model = openrouter(modelId);
      break;

+    case 'deepseek':
+      if (process.env.DEEPSEEK_BASE_URL) {
+        const customDeepSeek = createDeepSeek({
+          apiKey: process.env.DEEPSEEK_API_KEY,
+          baseURL: process.env.DEEPSEEK_BASE_URL,
+        });
+        model = customDeepSeek(modelId);
+      } else {
+        model = deepseek(modelId);
+      }
+      break;
+
    default:
      throw new Error(
-        `Unknown AI provider: ${provider}. Supported providers: bedrock, openai, anthropic, google, azure, ollama, openrouter`
+        `Unknown AI provider: ${provider}. Supported providers: bedrock, openai, anthropic, google, azure, ollama, openrouter, deepseek`
      );
  }

-  // 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 };
 }
--- a/lib/cached-responses.ts
+++ b/lib/cached-responses.ts
@@ -0,0 +1,557 @@
+export interface CachedResponse {
+  promptText: string;
+  hasImage: boolean;
+  xml: string;
+}
+
+export const CACHED_EXAMPLE_RESPONSES: CachedResponse[] = [
+  {
+    promptText: "Give me a **animated connector** diagram of transformer's architecture",
+    hasImage: false,
+    xml: `<root>
+  <mxCell id="0"/>
+  <mxCell id="1" parent="0"/>
+
+  <!-- Title -->
+  <mxCell id="title" value="Transformer Architecture" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=20;fontStyle=1;" vertex="1" parent="1">
+    <mxGeometry x="300" y="20" width="250" height="30" as="geometry"/>
+  </mxCell>
+
+  <!-- Input Embedding (Left - Encoder Side) -->
+  <mxCell id="input_embed" value="Input Embedding" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=11;" vertex="1" parent="1">
+    <mxGeometry x="80" y="480" width="120" height="40" as="geometry"/>
+  </mxCell>
+
+  <!-- Positional Encoding (Left) -->
+  <mxCell id="pos_enc_left" value="Positional Encoding" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=11;" vertex="1" parent="1">
+    <mxGeometry x="80" y="420" width="120" height="40" as="geometry"/>
+  </mxCell>
+
+  <!-- Encoder Stack -->
+  <mxCell id="encoder_box" value="ENCODER" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#e1d5e7;strokeColor=#9673a6;verticalAlign=top;fontSize=12;fontStyle=1;" vertex="1" parent="1">
+    <mxGeometry x="60" y="180" width="160" height="220" as="geometry"/>
+  </mxCell>
+
+  <!-- Multi-Head Attention (Encoder) -->
+  <mxCell id="mha_enc" value="Multi-Head&#xa;Attention" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;fontSize=10;" vertex="1" parent="1">
+    <mxGeometry x="80" y="330" width="120" height="50" as="geometry"/>
+  </mxCell>
+
+  <!-- Add & Norm 1 (Encoder) -->
+  <mxCell id="add_norm1_enc" value="Add &amp; Norm" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;fontSize=10;" vertex="1" parent="1">
+    <mxGeometry x="80" y="280" width="120" height="30" as="geometry"/>
+  </mxCell>
+
+  <!-- Feed Forward (Encoder) -->
+  <mxCell id="ff_enc" value="Feed Forward" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;fontSize=10;" vertex="1" parent="1">
+    <mxGeometry x="80" y="240" width="120" height="30" as="geometry"/>
+  </mxCell>
+
+  <!-- Add & Norm 2 (Encoder) -->
+  <mxCell id="add_norm2_enc" value="Add &amp; Norm" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;fontSize=10;" vertex="1" parent="1">
+    <mxGeometry x="80" y="200" width="120" height="30" as="geometry"/>
+  </mxCell>
+
+  <!-- Nx label for encoder -->
+  <mxCell id="nx_enc" value="Nx" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=11;fontStyle=2;" vertex="1" parent="1">
+    <mxGeometry x="30" y="275" width="30" height="30" as="geometry"/>
+  </mxCell>
+
+  <!-- Output Embedding (Right - Decoder Side) -->
+  <mxCell id="output_embed" value="Output Embedding" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=11;" vertex="1" parent="1">
+    <mxGeometry x="650" y="480" width="120" height="40" as="geometry"/>
+  </mxCell>
+
+  <!-- Positional Encoding (Right) -->
+  <mxCell id="pos_enc_right" value="Positional Encoding" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=11;" vertex="1" parent="1">
+    <mxGeometry x="650" y="420" width="120" height="40" as="geometry"/>
+  </mxCell>
+
+  <!-- Decoder Stack -->
+  <mxCell id="decoder_box" value="DECODER" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;verticalAlign=top;fontSize=12;fontStyle=1;" vertex="1" parent="1">
+    <mxGeometry x="630" y="140" width="160" height="260" as="geometry"/>
+  </mxCell>
+
+  <!-- Masked Multi-Head Attention (Decoder) -->
+  <mxCell id="masked_mha_dec" value="Masked Multi-Head&#xa;Attention" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;fontSize=10;" vertex="1" parent="1">
+    <mxGeometry x="650" y="340" width="120" height="50" as="geometry"/>
+  </mxCell>
+
+  <!-- Add & Norm 1 (Decoder) -->
+  <mxCell id="add_norm1_dec" value="Add &amp; Norm" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;fontSize=10;" vertex="1" parent="1">
+    <mxGeometry x="650" y="290" width="120" height="30" as="geometry"/>
+  </mxCell>
+
+  <!-- Multi-Head Attention (Decoder - Cross Attention) -->
+  <mxCell id="mha_dec" value="Multi-Head&#xa;Attention" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;fontSize=10;" vertex="1" parent="1">
+    <mxGeometry x="650" y="240" width="120" height="40" as="geometry"/>
+  </mxCell>
+
+  <!-- Add & Norm 2 (Decoder) -->
+  <mxCell id="add_norm2_dec" value="Add &amp; Norm" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;fontSize=10;" vertex="1" parent="1">
+    <mxGeometry x="650" y="200" width="120" height="30" as="geometry"/>
+  </mxCell>
+
+  <!-- Feed Forward (Decoder) -->
+  <mxCell id="ff_dec" value="Feed Forward" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;fontSize=10;" vertex="1" parent="1">
+    <mxGeometry x="650" y="160" width="120" height="30" as="geometry"/>
+  </mxCell>
+
+  <!-- Add & Norm 3 (Decoder) -->
+  <mxCell id="add_norm3_dec" value="Add &amp; Norm" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;fontSize=10;" vertex="1" parent="1">
+    <mxGeometry x="650" y="120" width="120" height="30" as="geometry"/>
+  </mxCell>
+
+  <!-- Nx label for decoder -->
+  <mxCell id="nx_dec" value="Nx" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=11;fontStyle=2;" vertex="1" parent="1">
+    <mxGeometry x="790" y="255" width="30" height="30" as="geometry"/>
+  </mxCell>
+
+  <!-- Linear -->
+  <mxCell id="linear" value="Linear" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;fontSize=11;" vertex="1" parent="1">
+    <mxGeometry x="650" y="80" width="120" height="30" as="geometry"/>
+  </mxCell>
+
+  <!-- Softmax -->
+  <mxCell id="softmax" value="Softmax" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;fontSize=11;" vertex="1" parent="1">
+    <mxGeometry x="650" y="40" width="120" height="30" as="geometry"/>
+  </mxCell>
+
+  <!-- Output Probabilities -->
+  <mxCell id="output" value="Output Probabilities" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=11;fontStyle=1;" vertex="1" parent="1">
+    <mxGeometry x="640" y="0" width="140" height="30" as="geometry"/>
+  </mxCell>
+
+  <!-- Animated Connectors - Encoder Side -->
+  <mxCell id="conn1" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=0;exitDx=0;exitDy=0;entryX=0.5;entryY=1;entryDx=0;entryDy=0;strokeWidth=2;strokeColor=#6c8ebf;flowAnimation=1;" edge="1" parent="1" source="input_embed" target="pos_enc_left">
+    <mxGeometry relative="1" as="geometry"/>
+  </mxCell>
+
+  <mxCell id="conn2" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=0;exitDx=0;exitDy=0;entryX=0.5;entryY=1;entryDx=0;entryDy=0;strokeWidth=2;strokeColor=#6c8ebf;flowAnimation=1;" edge="1" parent="1" source="pos_enc_left" target="mha_enc">
+    <mxGeometry relative="1" as="geometry"/>
+  </mxCell>
+
+  <mxCell id="conn3" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=0;exitDx=0;exitDy=0;entryX=0.5;entryY=1;entryDx=0;entryDy=0;strokeWidth=2;strokeColor=#82b366;flowAnimation=1;" edge="1" parent="1" source="mha_enc" target="add_norm1_enc">
+    <mxGeometry relative="1" as="geometry"/>
+  </mxCell>
+
+  <mxCell id="conn4" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=0;exitDx=0;exitDy=0;entryX=0.5;entryY=1;entryDx=0;entryDy=0;strokeWidth=2;strokeColor=#d6b656;flowAnimation=1;" edge="1" parent="1" source="add_norm1_enc" target="ff_enc">
+    <mxGeometry relative="1" as="geometry"/>
+  </mxCell>
+
+  <mxCell id="conn5" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=0;exitDx=0;exitDy=0;entryX=0.5;entryY=1;entryDx=0;entryDy=0;strokeWidth=2;strokeColor=#82b366;flowAnimation=1;" edge="1" parent="1" source="ff_enc" target="add_norm2_enc">
+    <mxGeometry relative="1" as="geometry"/>
+  </mxCell>
+
+  <!-- Encoder to Decoder Cross Attention -->
+  <mxCell id="conn_cross" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;strokeWidth=3;strokeColor=#9673a6;flowAnimation=1;dashed=1;" edge="1" parent="1" source="add_norm2_enc" target="mha_dec">
+    <mxGeometry relative="1" as="geometry">
+      <Array as="points">
+        <mxPoint x="400" y="215"/>
+        <mxPoint x="400" y="260"/>
+      </Array>
+    </mxGeometry>
+  </mxCell>
+  <mxCell id="cross_label" value="K, V" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];fontSize=10;fontStyle=1;fillColor=#ffffff;" vertex="1" connectable="0" parent="conn_cross">
+    <mxGeometry x="-0.1" y="1" relative="1" as="geometry">
+      <mxPoint x="10" y="-9" as="offset"/>
+    </mxGeometry>
+  </mxCell>
+
+  <!-- Animated Connectors - Decoder Side -->
+  <mxCell id="conn6" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=0;exitDx=0;exitDy=0;entryX=0.5;entryY=1;entryDx=0;entryDy=0;strokeWidth=2;strokeColor=#d79b00;flowAnimation=1;" edge="1" parent="1" source="output_embed" target="pos_enc_right">
+    <mxGeometry relative="1" as="geometry"/>
+  </mxCell>
+
+  <mxCell id="conn7" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=0;exitDx=0;exitDy=0;entryX=0.5;entryY=1;entryDx=0;entryDy=0;strokeWidth=2;strokeColor=#d79b00;flowAnimation=1;" edge="1" parent="1" source="pos_enc_right" target="masked_mha_dec">
+    <mxGeometry relative="1" as="geometry"/>
+  </mxCell>
+
+  <mxCell id="conn8" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=0;exitDx=0;exitDy=0;entryX=0.5;entryY=1;entryDx=0;entryDy=0;strokeWidth=2;strokeColor=#82b366;flowAnimation=1;" edge="1" parent="1" source="masked_mha_dec" target="add_norm1_dec">
+    <mxGeometry relative="1" as="geometry"/>
+  </mxCell>
+
+  <mxCell id="conn9" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=0;exitDx=0;exitDy=0;entryX=0.5;entryY=1;entryDx=0;entryDy=0;strokeWidth=2;strokeColor=#d6b656;flowAnimation=1;" edge="1" parent="1" source="add_norm1_dec" target="mha_dec">
+    <mxGeometry relative="1" as="geometry"/>
+  </mxCell>
+
+  <mxCell id="conn10" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=0;exitDx=0;exitDy=0;entryX=0.5;entryY=1;entryDx=0;entryDy=0;strokeWidth=2;strokeColor=#82b366;flowAnimation=1;" edge="1" parent="1" source="mha_dec" target="add_norm2_dec">
+    <mxGeometry relative="1" as="geometry"/>
+  </mxCell>
+
+  <mxCell id="conn11" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=0;exitDx=0;exitDy=0;entryX=0.5;entryY=1;entryDx=0;entryDy=0;strokeWidth=2;strokeColor=#d6b656;flowAnimation=1;" edge="1" parent="1" source="add_norm2_dec" target="ff_dec">
+    <mxGeometry relative="1" as="geometry"/>
+  </mxCell>
+
+  <mxCell id="conn12" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=0;exitDx=0;exitDy=0;entryX=0.5;entryY=1;entryDx=0;entryDy=0;strokeWidth=2;strokeColor=#82b366;flowAnimation=1;" edge="1" parent="1" source="ff_dec" target="add_norm3_dec">
+    <mxGeometry relative="1" as="geometry"/>
+  </mxCell>
+
+  <mxCell id="conn13" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=0;exitDx=0;exitDy=0;entryX=0.5;entryY=1;entryDx=0;entryDy=0;strokeWidth=2;strokeColor=#b85450;flowAnimation=1;" edge="1" parent="1" source="add_norm3_dec" target="linear">
+    <mxGeometry relative="1" as="geometry"/>
+  </mxCell>
+
+  <mxCell id="conn14" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=0;exitDx=0;exitDy=0;entryX=0.5;entryY=1;entryDx=0;entryDy=0;strokeWidth=2;strokeColor=#b85450;flowAnimation=1;" edge="1" parent="1" source="linear" target="softmax">
+    <mxGeometry relative="1" as="geometry"/>
+  </mxCell>
+
+  <mxCell id="conn15" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=0;exitDx=0;exitDy=0;entryX=0.5;entryY=1;entryDx=0;entryDy=0;strokeWidth=2;strokeColor=#6c8ebf;flowAnimation=1;" edge="1" parent="1" source="softmax" target="output">
+    <mxGeometry relative="1" as="geometry"/>
+  </mxCell>
+
+  <!-- Residual Connections (Encoder) -->
+  <mxCell id="res1_enc" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;strokeWidth=1.5;strokeColor=#999999;dashed=1;flowAnimation=1;" edge="1" parent="1" source="mha_enc" target="add_norm1_enc">
+    <mxGeometry relative="1" as="geometry">
+      <Array as="points">
+        <mxPoint x="50" y="355"/>
+        <mxPoint x="50" y="295"/>
+      </Array>
+    </mxGeometry>
+  </mxCell>
+
+  <mxCell id="res2_enc" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;strokeWidth=1.5;strokeColor=#999999;dashed=1;flowAnimation=1;" edge="1" parent="1" source="ff_enc" target="add_norm2_enc">
+    <mxGeometry relative="1" as="geometry">
+      <Array as="points">
+        <mxPoint x="50" y="255"/>
+        <mxPoint x="50" y="215"/>
+      </Array>
+    </mxGeometry>
+  </mxCell>
+
+  <!-- Residual Connections (Decoder) -->
+  <mxCell id="res1_dec" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=1;entryY=0.5;entryDx=0;entryDy=0;strokeWidth=1.5;strokeColor=#999999;dashed=1;flowAnimation=1;" edge="1" parent="1" source="masked_mha_dec" target="add_norm1_dec">
+    <mxGeometry relative="1" as="geometry">
+      <Array as="points">
+        <mxPoint x="800" y="365"/>
+        <mxPoint x="800" y="305"/>
+      </Array>
+    </mxGeometry>
+  </mxCell>
+
+  <mxCell id="res2_dec" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=1;entryY=0.5;entryDx=0;entryDy=0;strokeWidth=1.5;strokeColor=#999999;dashed=1;flowAnimation=1;" edge="1" parent="1" source="mha_dec" target="add_norm2_dec">
+    <mxGeometry relative="1" as="geometry">
+      <Array as="points">
+        <mxPoint x="800" y="260"/>
+        <mxPoint x="800" y="215"/>
+      </Array>
+    </mxGeometry>
+  </mxCell>
+
+  <mxCell id="res3_dec" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=1;entryY=0.5;entryDx=0;entryDy=0;strokeWidth=1.5;strokeColor=#999999;dashed=1;flowAnimation=1;" edge="1" parent="1" source="ff_dec" target="add_norm3_dec">
+    <mxGeometry relative="1" as="geometry">
+      <Array as="points">
+        <mxPoint x="800" y="175"/>
+        <mxPoint x="800" y="135"/>
+      </Array>
+    </mxGeometry>
+  </mxCell>
+
+  <!-- Input/Output Labels -->
+  <mxCell id="input_label" value="Inputs" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=12;fontStyle=1;" vertex="1" parent="1">
+    <mxGeometry x="110" y="530" width="60" height="20" as="geometry"/>
+  </mxCell>
+
+  <mxCell id="output_label" value="Outputs&#xa;(shifted right)" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=12;fontStyle=1;" vertex="1" parent="1">
+    <mxGeometry x="660" y="530" width="100" height="30" as="geometry"/>
+  </mxCell>
+</root>`,
+  },
+  {
+    promptText: "Replicate this in aws style",
+    hasImage: true,
+    xml: `<root>
+  <mxCell id="0"/>
+  <mxCell id="1" parent="0"/>
+
+  <!-- AWS Cloud Container -->
+  <mxCell id="2" value="AWS" style="sketch=0;outlineConnect=0;gradientColor=none;html=1;whiteSpace=wrap;fontSize=12;fontStyle=0;container=1;pointerEvents=0;collapsible=0;recursiveResize=0;shape=mxgraph.aws4.group;grIcon=mxgraph.aws4.group_aws_cloud;strokeColor=#232F3E;fillColor=none;verticalAlign=top;align=left;spacingLeft=30;fontColor=#232F3E;dashed=0;rounded=1;arcSize=5;" vertex="1" parent="1">
+    <mxGeometry x="340" y="40" width="880" height="520" as="geometry"/>
+  </mxCell>
+
+  <!-- User -->
+  <mxCell id="3" value="User" style="sketch=0;outlineConnect=0;fontColor=#232F3E;gradientColor=none;fillColor=#232F3D;strokeColor=none;dashed=0;verticalLabelPosition=bottom;verticalAlign=top;align=center;html=1;fontSize=14;fontStyle=0;aspect=fixed;pointerEvents=1;shape=mxgraph.aws4.user;rounded=1;" vertex="1" parent="1">
+    <mxGeometry x="80" y="240" width="78" height="78" as="geometry"/>
+  </mxCell>
+
+  <!-- EC2 Instance -->
+  <mxCell id="4" value="EC2" style="sketch=0;points=[[0,0,0],[0.25,0,0],[0.5,0,0],[0.75,0,0],[1,0,0],[0,1,0],[0.25,1,0],[0.5,1,0],[0.75,1,0],[1,1,0],[0,0.25,0],[0,0.5,0],[0,0.75,0],[1,0.25,0],[1,0.5,0],[1,0.75,0]];outlineConnect=0;fontColor=#232F3E;fillColor=#ED7100;strokeColor=#ffffff;dashed=0;verticalLabelPosition=bottom;verticalAlign=top;align=center;html=1;fontSize=14;fontStyle=0;aspect=fixed;shape=mxgraph.aws4.resourceIcon;resIcon=mxgraph.aws4.ec2;rounded=1;" vertex="1" parent="1">
+    <mxGeometry x="560" y="240" width="78" height="78" as="geometry"/>
+  </mxCell>
+
+  <!-- S3 Bucket -->
+  <mxCell id="5" value="S3" style="sketch=0;points=[[0,0,0],[0.25,0,0],[0.5,0,0],[0.75,0,0],[1,0,0],[0,1,0],[0.25,1,0],[0.5,1,0],[0.75,1,0],[1,1,0],[0,0.25,0],[0,0.5,0],[0,0.75,0],[1,0.25,0],[1,0.5,0],[1,0.75,0]];outlineConnect=0;fontColor=#232F3E;fillColor=#7AA116;strokeColor=#ffffff;dashed=0;verticalLabelPosition=bottom;verticalAlign=top;align=center;html=1;fontSize=14;fontStyle=0;aspect=fixed;shape=mxgraph.aws4.resourceIcon;resIcon=mxgraph.aws4.s3;rounded=1;" vertex="1" parent="1">
+    <mxGeometry x="960" y="120" width="78" height="78" as="geometry"/>
+  </mxCell>
+
+  <!-- Bedrock -->
+  <mxCell id="6" value="bedrock" style="sketch=0;points=[[0,0,0],[0.25,0,0],[0.5,0,0],[0.75,0,0],[1,0,0],[0,1,0],[0.25,1,0],[0.5,1,0],[0.75,1,0],[1,1,0],[0,0.25,0],[0,0.5,0],[0,0.75,0],[1,0.25,0],[1,0.5,0],[1,0.75,0]];outlineConnect=0;fontColor=#232F3E;fillColor=#01A88D;strokeColor=#ffffff;dashed=0;verticalLabelPosition=bottom;verticalAlign=top;align=center;html=1;fontSize=14;fontStyle=0;aspect=fixed;shape=mxgraph.aws4.resourceIcon;resIcon=mxgraph.aws4.bedrock;rounded=1;" vertex="1" parent="1">
+    <mxGeometry x="960" y="260" width="78" height="78" as="geometry"/>
+  </mxCell>
+
+  <!-- DynamoDB -->
+  <mxCell id="7" value="DynamoDB" style="sketch=0;points=[[0,0,0],[0.25,0,0],[0.5,0,0],[0.75,0,0],[1,0,0],[0,1,0],[0.25,1,0],[0.5,1,0],[0.75,1,0],[1,1,0],[0,0.25,0],[0,0.5,0],[0,0.75,0],[1,0.25,0],[1,0.5,0],[1,0.75,0]];outlineConnect=0;fontColor=#232F3E;fillColor=#C925D1;strokeColor=#ffffff;dashed=0;verticalLabelPosition=bottom;verticalAlign=top;align=center;html=1;fontSize=14;fontStyle=0;aspect=fixed;shape=mxgraph.aws4.resourceIcon;resIcon=mxgraph.aws4.dynamodb;rounded=1;" vertex="1" parent="1">
+    <mxGeometry x="960" y="400" width="78" height="78" as="geometry"/>
+  </mxCell>
+
+  <!-- Arrow: User to EC2 -->
+  <mxCell id="8" value="" style="endArrow=classic;html=1;rounded=0;strokeColor=#232F3E;strokeWidth=2;exitX=1;exitY=0.5;exitDx=0;exitDy=0;exitPerimeter=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;entryPerimeter=0;" edge="1" parent="1" source="3" target="4">
+    <mxGeometry width="50" height="50" relative="1" as="geometry">
+      <mxPoint x="400" y="350" as="sourcePoint"/>
+      <mxPoint x="450" y="300" as="targetPoint"/>
+    </mxGeometry>
+  </mxCell>
+
+  <!-- Arrow: EC2 to S3 -->
+  <mxCell id="9" value="" style="endArrow=classic;html=1;rounded=0;strokeColor=#232F3E;strokeWidth=2;exitX=1;exitY=0.25;exitDx=0;exitDy=0;exitPerimeter=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;entryPerimeter=0;" edge="1" parent="1" source="4" target="5">
+    <mxGeometry width="50" height="50" relative="1" as="geometry">
+      <mxPoint x="700" y="350" as="sourcePoint"/>
+      <mxPoint x="750" y="300" as="targetPoint"/>
+    </mxGeometry>
+  </mxCell>
+
+  <!-- Arrow: EC2 to Bedrock -->
+  <mxCell id="10" value="" style="endArrow=classic;html=1;rounded=0;strokeColor=#232F3E;strokeWidth=2;exitX=1;exitY=0.5;exitDx=0;exitDy=0;exitPerimeter=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;entryPerimeter=0;" edge="1" parent="1" source="4" target="6">
+    <mxGeometry width="50" height="50" relative="1" as="geometry">
+      <mxPoint x="700" y="350" as="sourcePoint"/>
+      <mxPoint x="750" y="300" as="targetPoint"/>
+    </mxGeometry>
+  </mxCell>
+
+  <!-- Arrow: EC2 to DynamoDB -->
+  <mxCell id="11" value="" style="endArrow=classic;html=1;rounded=0;strokeColor=#232F3E;strokeWidth=2;exitX=1;exitY=0.75;exitDx=0;exitDy=0;exitPerimeter=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;entryPerimeter=0;" edge="1" parent="1" source="4" target="7">
+    <mxGeometry width="50" height="50" relative="1" as="geometry">
+      <mxPoint x="700" y="350" as="sourcePoint"/>
+      <mxPoint x="750" y="300" as="targetPoint"/>
+    </mxGeometry>
+  </mxCell>
+</root>`,
+  },
+  {
+    promptText: "Replicate this flowchart.",
+    hasImage: true,
+    xml: `<root>
+  <mxCell id="0"/>
+  <mxCell id="1" parent="0"/>
+
+  <!-- Start: Lamp doesn't work -->
+  <mxCell id="2" value="Lamp doesn't work" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#ffcccc;strokeColor=#000000;strokeWidth=2;fontSize=18;fontStyle=0;" vertex="1" parent="1">
+    <mxGeometry x="140" y="40" width="180" height="60" as="geometry"/>
+  </mxCell>
+
+  <!-- Arrow from start to first decision -->
+  <mxCell id="3" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#000000;strokeWidth=2;endArrow=block;endFill=1;" edge="1" parent="1" source="2" target="4">
+    <mxGeometry relative="1" as="geometry"/>
+  </mxCell>
+
+  <!-- Decision: Lamp plugged in? -->
+  <mxCell id="4" value="Lamp&lt;br&gt;plugged in?" style="rhombus;whiteSpace=wrap;html=1;fillColor=#ffff99;strokeColor=#000000;strokeWidth=2;fontSize=18;fontStyle=0;" vertex="1" parent="1">
+    <mxGeometry x="130" y="150" width="200" height="200" as="geometry"/>
+  </mxCell>
+
+  <!-- Arrow to Plug in lamp (No) -->
+  <mxCell id="5" value="No" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#000000;strokeWidth=2;endArrow=block;endFill=1;fontSize=16;" edge="1" parent="1" source="4" target="6">
+    <mxGeometry x="-0.2" relative="1" as="geometry">
+      <mxPoint as="offset"/>
+    </mxGeometry>
+  </mxCell>
+
+  <!-- Action: Plug in lamp -->
+  <mxCell id="6" value="Plug in lamp" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#99ff99;strokeColor=#000000;strokeWidth=2;fontSize=18;fontStyle=0;" vertex="1" parent="1">
+    <mxGeometry x="420" y="220" width="200" height="60" as="geometry"/>
+  </mxCell>
+
+  <!-- Arrow down to second decision (Yes) -->
+  <mxCell id="7" value="Yes" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#000000;strokeWidth=2;endArrow=block;endFill=1;fontSize=16;" edge="1" parent="1" source="4" target="8">
+    <mxGeometry relative="1" as="geometry"/>
+  </mxCell>
+
+  <!-- Decision: Bulb burned out? -->
+  <mxCell id="8" value="Bulb&lt;br&gt;burned out?" style="rhombus;whiteSpace=wrap;html=1;fillColor=#ffff99;strokeColor=#000000;strokeWidth=2;fontSize=18;fontStyle=0;" vertex="1" parent="1">
+    <mxGeometry x="130" y="400" width="200" height="200" as="geometry"/>
+  </mxCell>
+
+  <!-- Arrow to Replace bulb (Yes) -->
+  <mxCell id="9" value="Yes" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#000000;strokeWidth=2;endArrow=block;endFill=1;fontSize=16;" edge="1" parent="1" source="8" target="10">
+    <mxGeometry x="-0.2" relative="1" as="geometry">
+      <mxPoint as="offset"/>
+    </mxGeometry>
+  </mxCell>
+
+  <!-- Action: Replace bulb -->
+  <mxCell id="10" value="Replace bulb" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#99ff99;strokeColor=#000000;strokeWidth=2;fontSize=18;fontStyle=0;" vertex="1" parent="1">
+    <mxGeometry x="420" y="470" width="200" height="60" as="geometry"/>
+  </mxCell>
+
+  <!-- Arrow down to Repair lamp (No) -->
+  <mxCell id="11" value="No" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#000000;strokeWidth=2;endArrow=block;endFill=1;fontSize=16;" edge="1" parent="1" source="8" target="12">
+    <mxGeometry relative="1" as="geometry"/>
+  </mxCell>
+
+  <!-- Action: Repair lamp -->
+  <mxCell id="12" value="Repair lamp" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#99ff99;strokeColor=#000000;strokeWidth=2;fontSize=18;fontStyle=0;" vertex="1" parent="1">
+    <mxGeometry x="130" y="650" width="200" height="60" as="geometry"/>
+  </mxCell>
+</root>`,
+  },
+  {
+    promptText: "Draw a cat for me",
+    hasImage: false,
+    xml: `<root>
+  <mxCell id="0"/>
+  <mxCell id="1" parent="0"/>
+
+  <!-- Cat's head -->
+  <mxCell id="2" value="" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;fillColor=#FFE6CC;strokeColor=#000000;strokeWidth=2;" vertex="1" parent="1">
+    <mxGeometry x="300" y="150" width="120" height="120" as="geometry"/>
+  </mxCell>
+
+  <!-- Left ear -->
+  <mxCell id="3" value="" style="triangle;whiteSpace=wrap;html=1;fillColor=#FFE6CC;strokeColor=#000000;strokeWidth=2;rotation=30;" vertex="1" parent="1">
+    <mxGeometry x="280" y="120" width="50" height="60" as="geometry"/>
+  </mxCell>
+
+  <!-- Right ear -->
+  <mxCell id="4" value="" style="triangle;whiteSpace=wrap;html=1;fillColor=#FFE6CC;strokeColor=#000000;strokeWidth=2;rotation=-30;" vertex="1" parent="1">
+    <mxGeometry x="390" y="120" width="50" height="60" as="geometry"/>
+  </mxCell>
+
+  <!-- Left ear inner -->
+  <mxCell id="5" value="" style="triangle;whiteSpace=wrap;html=1;fillColor=#FFB6C1;strokeColor=none;rotation=30;" vertex="1" parent="1">
+    <mxGeometry x="290" y="135" width="30" height="35" as="geometry"/>
+  </mxCell>
+
+  <!-- Right ear inner -->
+  <mxCell id="6" value="" style="triangle;whiteSpace=wrap;html=1;fillColor=#FFB6C1;strokeColor=none;rotation=-30;" vertex="1" parent="1">
+    <mxGeometry x="400" y="135" width="30" height="35" as="geometry"/>
+  </mxCell>
+
+  <!-- Left eye -->
+  <mxCell id="7" value="" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;fillColor=#000000;strokeColor=#000000;" vertex="1" parent="1">
+    <mxGeometry x="325" y="185" width="15" height="15" as="geometry"/>
+  </mxCell>
+
+  <!-- Right eye -->
+  <mxCell id="8" value="" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;fillColor=#000000;strokeColor=#000000;" vertex="1" parent="1">
+    <mxGeometry x="380" y="185" width="15" height="15" as="geometry"/>
+  </mxCell>
+
+  <!-- Nose -->
+  <mxCell id="9" value="" style="triangle;whiteSpace=wrap;html=1;fillColor=#FFB6C1;strokeColor=#000000;strokeWidth=1;rotation=180;" vertex="1" parent="1">
+    <mxGeometry x="350" y="210" width="20" height="15" as="geometry"/>
+  </mxCell>
+
+  <!-- Mouth left -->
+  <mxCell id="10" value="" style="curved=1;endArrow=none;html=1;strokeColor=#000000;strokeWidth=2;exitX=0.5;exitY=1;exitDx=0;exitDy=0;" edge="1" parent="1">
+    <mxGeometry width="50" height="50" relative="1" as="geometry">
+      <mxPoint x="360" y="220" as="sourcePoint"/>
+      <mxPoint x="340" y="235" as="targetPoint"/>
+      <Array as="points">
+        <mxPoint x="355" y="230"/>
+      </Array>
+    </mxGeometry>
+  </mxCell>
+
+  <!-- Mouth right -->
+  <mxCell id="11" value="" style="curved=1;endArrow=none;html=1;strokeColor=#000000;strokeWidth=2;" edge="1" parent="1">
+    <mxGeometry width="50" height="50" relative="1" as="geometry">
+      <mxPoint x="360" y="220" as="sourcePoint"/>
+      <mxPoint x="380" y="235" as="targetPoint"/>
+      <Array as="points">
+        <mxPoint x="365" y="230"/>
+      </Array>
+    </mxGeometry>
+  </mxCell>
+
+  <!-- Left whisker 1 -->
+  <mxCell id="12" value="" style="endArrow=none;html=1;strokeColor=#000000;strokeWidth=1.5;" edge="1" parent="1">
+    <mxGeometry width="50" height="50" relative="1" as="geometry">
+      <mxPoint x="310" y="200" as="sourcePoint"/>
+      <mxPoint x="260" y="195" as="targetPoint"/>
+    </mxGeometry>
+  </mxCell>
+
+  <!-- Left whisker 2 -->
+  <mxCell id="13" value="" style="endArrow=none;html=1;strokeColor=#000000;strokeWidth=1.5;" edge="1" parent="1">
+    <mxGeometry width="50" height="50" relative="1" as="geometry">
+      <mxPoint x="310" y="210" as="sourcePoint"/>
+      <mxPoint x="260" y="210" as="targetPoint"/>
+    </mxGeometry>
+  </mxCell>
+
+  <!-- Left whisker 3 -->
+  <mxCell id="14" value="" style="endArrow=none;html=1;strokeColor=#000000;strokeWidth=1.5;" edge="1" parent="1">
+    <mxGeometry width="50" height="50" relative="1" as="geometry">
+      <mxPoint x="310" y="220" as="sourcePoint"/>
+      <mxPoint x="260" y="225" as="targetPoint"/>
+    </mxGeometry>
+  </mxCell>
+
+  <!-- Right whisker 1 -->
+  <mxCell id="15" value="" style="endArrow=none;html=1;strokeColor=#000000;strokeWidth=1.5;" edge="1" parent="1">
+    <mxGeometry width="50" height="50" relative="1" as="geometry">
+      <mxPoint x="410" y="200" as="sourcePoint"/>
+      <mxPoint x="460" y="195" as="targetPoint"/>
+    </mxGeometry>
+  </mxCell>
+
+  <!-- Right whisker 2 -->
+  <mxCell id="16" value="" style="endArrow=none;html=1;strokeColor=#000000;strokeWidth=1.5;" edge="1" parent="1">
+    <mxGeometry width="50" height="50" relative="1" as="geometry">
+      <mxPoint x="410" y="210" as="sourcePoint"/>
+      <mxPoint x="460" y="210" as="targetPoint"/>
+    </mxGeometry>
+  </mxCell>
+
+  <!-- Right whisker 3 -->
+  <mxCell id="17" value="" style="endArrow=none;html=1;strokeColor=#000000;strokeWidth=1.5;" edge="1" parent="1">
+    <mxGeometry width="50" height="50" relative="1" as="geometry">
+      <mxPoint x="410" y="220" as="sourcePoint"/>
+      <mxPoint x="460" y="225" as="targetPoint"/>
+    </mxGeometry>
+  </mxCell>
+
+  <!-- Body -->
+  <mxCell id="18" value="" style="ellipse;whiteSpace=wrap;html=1;fillColor=#FFE6CC;strokeColor=#000000;strokeWidth=2;" vertex="1" parent="1">
+    <mxGeometry x="285" y="250" width="150" height="180" as="geometry"/>
+  </mxCell>
+
+  <!-- Belly -->
+  <mxCell id="19" value="" style="ellipse;whiteSpace=wrap;html=1;fillColor=#FFFFFF;strokeColor=none;" vertex="1" parent="1">
+    <mxGeometry x="315" y="280" width="90" height="120" as="geometry"/>
+  </mxCell>
+
+  <!-- Left front paw -->
+  <mxCell id="20" value="" style="ellipse;whiteSpace=wrap;html=1;fillColor=#FFE6CC;strokeColor=#000000;strokeWidth=2;" vertex="1" parent="1">
+    <mxGeometry x="300" y="410" width="40" height="50" as="geometry"/>
+  </mxCell>
+
+  <!-- Right front paw -->
+  <mxCell id="21" value="" style="ellipse;whiteSpace=wrap;html=1;fillColor=#FFE6CC;strokeColor=#000000;strokeWidth=2;" vertex="1" parent="1">
+    <mxGeometry x="380" y="410" width="40" height="50" as="geometry"/>
+  </mxCell>
+
+  <!-- Tail -->
+  <mxCell id="22" value="" style="curved=1;endArrow=none;html=1;strokeColor=#000000;strokeWidth=3;fillColor=#FFE6CC;" edge="1" parent="1">
+    <mxGeometry width="50" height="50" relative="1" as="geometry">
+      <mxPoint x="285" y="340" as="sourcePoint"/>
+      <mxPoint x="240" y="260" as="targetPoint"/>
+      <Array as="points">
+        <mxPoint x="260" y="350"/>
+        <mxPoint x="240" y="320"/>
+        <mxPoint x="235" y="290"/>
+      </Array>
+    </mxGeometry>
+  </mxCell>
+
+</root>`,
+  },
+];
+
+export function findCachedResponse(
+  promptText: string,
+  hasImage: boolean
+): CachedResponse | undefined {
+  return CACHED_EXAMPLE_RESPONSES.find(
+    (c) => c.promptText === promptText && c.hasImage === hasImage && c.xml !== ''
+  );
+}
--- a/lib/utils.ts
+++ b/lib/utils.ts
@@ -306,6 +306,109 @@ export function replaceXMLParts(
  return result;
 }

+/**
+ * Validates draw.io XML structure for common issues
+ * @param xml - The XML string to validate
+ * @returns null if valid, error message string if invalid
+ */
+export function validateMxCellStructure(xml: string): string | null {
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(xml, "text/xml");
+
+  // Check for XML parsing errors (includes unescaped special characters)
+  const parseError = doc.querySelector('parsererror');
+  if (parseError) {
+    return `Invalid XML: The XML contains syntax errors (likely unescaped special characters like <, >, & in attribute values). Please escape special characters: use &lt; for <, &gt; for >, &amp; for &, &quot; for ". Regenerate the diagram with properly escaped values.`;
+  }
+
+  // Get all mxCell elements once for all validations
+  const allCells = doc.querySelectorAll('mxCell');
+
+  // Single pass: collect IDs, check for duplicates, nesting, orphans, and invalid parents
+  const cellIds = new Set<string>();
+  const duplicateIds: string[] = [];
+  const nestedCells: string[] = [];
+  const orphanCells: string[] = [];
+  const invalidParents: { id: string; parent: string }[] = [];
+  const edgesToValidate: { id: string; source: string | null; target: string | null }[] = [];
+
+  allCells.forEach(cell => {
+    const id = cell.getAttribute('id');
+    const parent = cell.getAttribute('parent');
+    const isEdge = cell.getAttribute('edge') === '1';
+
+    // Check for duplicate IDs
+    if (id) {
+      if (cellIds.has(id)) {
+        duplicateIds.push(id);
+      } else {
+        cellIds.add(id);
+      }
+    }
+
+    // Check for nested mxCell (parent element is also mxCell)
+    if (cell.parentElement?.tagName === 'mxCell') {
+      nestedCells.push(id || 'unknown');
+    }
+
+    // Check parent attribute (skip root cell id="0")
+    if (id !== '0') {
+      if (!parent) {
+        if (id) orphanCells.push(id);
+      } else {
+        // Store for later validation (after all IDs collected)
+        invalidParents.push({ id: id || 'unknown', parent });
+      }
+    }
+
+    // Collect edges for connection validation
+    if (isEdge) {
+      edgesToValidate.push({
+        id: id || 'unknown',
+        source: cell.getAttribute('source'),
+        target: cell.getAttribute('target')
+      });
+    }
+  });
+
+  // Return errors in priority order
+  if (nestedCells.length > 0) {
+    return `Invalid XML: Found nested mxCell elements (IDs: ${nestedCells.slice(0, 3).join(', ')}). All mxCell elements must be direct children of <root>, never nested inside other mxCell elements. Please regenerate the diagram with correct structure.`;
+  }
+
+  if (duplicateIds.length > 0) {
+    return `Invalid XML: Found duplicate cell IDs (${duplicateIds.slice(0, 3).join(', ')}). Each mxCell must have a unique ID. Please regenerate the diagram with unique IDs for all elements.`;
+  }
+
+  if (orphanCells.length > 0) {
+    return `Invalid XML: Found cells without parent attribute (IDs: ${orphanCells.slice(0, 3).join(', ')}). All mxCell elements (except id="0") must have a parent attribute. Please regenerate the diagram with proper parent references.`;
+  }
+
+  // Validate parent references (now that all IDs are collected)
+  const badParents = invalidParents.filter(p => !cellIds.has(p.parent));
+  if (badParents.length > 0) {
+    const details = badParents.slice(0, 3).map(p => `${p.id} (parent: ${p.parent})`).join(', ');
+    return `Invalid XML: Found cells with invalid parent references (${details}). Parent IDs must reference existing cells. Please regenerate the diagram with valid parent references.`;
+  }
+
+  // Validate edge connections
+  const invalidConnections: string[] = [];
+  edgesToValidate.forEach(edge => {
+    if (edge.source && !cellIds.has(edge.source)) {
+      invalidConnections.push(`${edge.id} (source: ${edge.source})`);
+    }
+    if (edge.target && !cellIds.has(edge.target)) {
+      invalidConnections.push(`${edge.id} (target: ${edge.target})`);
+    }
+  });
+
+  if (invalidConnections.length > 0) {
+    return `Invalid XML: Found edges with invalid source/target references (${invalidConnections.slice(0, 3).join(', ')}). Edge source and target must reference existing cell IDs. Please regenerate the diagram with valid edge connections.`;
+  }
+
+  return null;
+}
+
 export function extractDiagramXML(xml_svg_string: string): string {
  try {
    // 1. Parse the SVG string (using built-in DOMParser in a browser-like environment)
--- a/next.config.ts
+++ b/next.config.ts
@@ -2,6 +2,7 @@ import type { NextConfig } from "next";

 const nextConfig: NextConfig = {
  /* config options here */
+  output: 'standalone',
 };

 export default nextConfig;
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -9,13 +9,17 @@
        "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/deepseek": "^1.0.30",
        "@ai-sdk/google": "^2.0.0",
        "@ai-sdk/openai": "^2.0.19",
        "@ai-sdk/react": "^2.0.22",
+        "@langfuse/otel": "^4.4.4",
+        "@next/third-parties": "^16.0.6",
        "@openrouter/ai-sdk-provider": "^1.2.3",
+        "@opentelemetry/sdk-trace-node": "^2.2.0",
        "@radix-ui/react-dialog": "^1.1.6",
        "@radix-ui/react-scroll-area": "^1.2.3",
        "@radix-ui/react-slot": "^1.1.2",
@@ -31,6 +35,7 @@
        "next": "15.2.3",
        "ollama-ai-provider-v2": "^1.5.4",
        "pako": "^2.1.0",
+        "prism-react-renderer": "^2.4.1",
        "react": "^19.0.0",
        "react-dom": "^19.0.0",
        "react-drawio": "^1.0.3",
@@ -46,6 +51,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"
    }
--- a/public/animated_connectors.svg
+++ b/public/animated_connectors.svg
--- a/public/aws_demo.svg
+++ b/public/aws_demo.svg
--- a/public/azure_demo.svg
+++ b/public/azure_demo.svg
--- a/public/cat_demo.svg
+++ b/public/cat_demo.svg
--- a/public/gcp_demo.svg
+++ b/public/gcp_demo.svg
Author	SHA1	Message	Date
dayuan.jiang	d36bf127d9	fix: remove deprecated instrumentationHook (enabled by default in Next.js 15)	2025-12-04 00:15:56 +09:00
dayuan.jiang	30b598d960	feat: add optional Langfuse observability integration - Add session tracking with unique sessionId per conversation - Add user tracking via IP address (x-forwarded-for header) - Make telemetry conditional - only enabled if LANGFUSE_PUBLIC_KEY is set - Add environment variable validation in instrumentation.ts - Add sessionId validation (type check + 200 char limit) - Update env.example with Langfuse configuration docs - Remove unused langfuse-vercel and @vercel/otel packages	2025-12-04 00:13:42 +09:00
dayuan.jiang	d84edb529c	feat: integrate Langfuse for LLM observability - Add instrumentation.ts with Langfuse OpenTelemetry exporter - Enable experimental telemetry on streamText calls - Add instrumentationHook to Next.js config - Install required dependencies (@vercel/otel, langfuse-vercel, etc.)	2025-12-03 23:41:20 +09:00
Dayuan Jiang	39322c2793	fix: prevent duplicate history entries when edit_diagram tool is called (#64 ) - Add handleExportWithoutHistory function for fetching current diagram state without saving to history - Update onFetchChart to accept saveToHistory parameter (defaults to true) - edit_diagram tool now fetches with saveToHistory=false since it only needs the current state - Only the initial form submission saves to history as intended	2025-12-03 21:58:48 +09:00
Dayuan Jiang	110cccb09c	feat: refresh UI with new typography and edit diff display (#63 ) - Switch from Geist to Plus Jakarta Sans (body) and JetBrains Mono (code) - Add visual diff display for edit_diagram tool showing search/replace pairs - Update color palette to clean modern OKLCH-based scheme - Improve chat message display with better styling and animations - Add syntax-highlighted code blocks for XML/JSON output - Improve scrollbar and shadow utilities	2025-12-03 21:49:34 +09:00
Dayuan Jiang	5021076864	fix: use static sha- prefix for Docker tags and add Docker run instructions to README (#62 )	2025-12-03 21:15:25 +09:00
Dayuan Jiang	efdf4f2b90	chore: change clear button icon to trash bin (#61 )	2025-12-03 21:05:22 +09:00
Dayuan Jiang	45f74df349	feat: add save diagram to local file button (#60 ) - Add save button in chat input area with download icon - Create SaveDialog component for filename input - Export current diagram as .drawio file format - Support custom filename with default timestamp-based name Closes #53	2025-12-03 21:02:26 +09:00
Dayuan Jiang	a61d37c818	chore: add Google Analytics integration (#59 )	2025-12-03 20:35:31 +09:00
Dayuan Jiang	c0cd393baa	fix: validate XML before sending to draw.io to prevent setId errors (#56 ) - Add XML validation in handleDisplayChart before calling onDisplayChart - Only update previousXML ref when validation passes to prevent state desync - Add console error logging for failed validations Fixes #5	2025-12-03 20:11:50 +09:00
Dayuan Jiang	595f24857a	fix: show user-friendly error when model doesn't support images (#55 ) When models like DeepSeek (deepseek-chat, deepseek-reasoner) receive image inputs, they return a cryptic error about 'unknown variant image_url'. This change detects such errors and shows a clear message asking users to remove the image or switch to a vision-capable model. Fixes #42	2025-12-03 19:49:58 +09:00
Dayuan Jiang	33fed6fa9f	chore: add model switch notice and move sponsor button to about page (#52 ) - Remove sponsor iframe from chat panel header - Add notice about switching from Opus 4.5 to Haiku 4.5 due to high traffic - Add sponsor button next to Support & Contact section title - Update all i18n about pages (EN, CN, JA)	2025-12-03 16:47:45 +09:00
Dayuan Jiang	a8e627f1f8	feat: add XML structure guide to system prompt for smaller models (#51 ) - Add essential draw.io XML structure rules to system prompt - Include critical rules about mxCell nesting (all must be direct children of root) - Add shape/vertex and connector/edge examples with proper structure - Improve tool description for display_diagram with validation rules - Update xml_guide.md with better swimlane examples showing flat structure - Add client-side XML validation to catch nested mxCell errors early Helps address issues #40 (local Ollama models not working) and #39 (mxCell nesting errors)	2025-12-03 16:14:53 +09:00
Dayuan Jiang	c458947553	feat: add confirmation dialog for diagram history restore (#49 )	2025-12-03 14:04:29 +09:00
Dayuan Jiang	443a937370	fix: prevent duplicate diagram history entries on message send (#48 ) When sending a message, the history was being added twice because: 1. handleExport() triggers exportDiagram() which adds to history 2. AI responds and loadDiagram() is called, which internally triggers another export event in DrawIO, adding a duplicate entry Added expectHistoryExportRef flag to track user-initiated exports and only add to history when the export was explicitly requested.	2025-12-03 13:53:16 +09:00
Dayuan Jiang	3f5cdd807d	fix: prevent tool args from expanding chat width during streaming (#47 )	2025-12-03 13:45:14 +09:00
Dayuan Jiang	894740ba58	feat: add i18n about pages matching README structure (#46 ) - Redesign English about page to mirror README.md content - Add Chinese (/about/cn) and Japanese (/about/ja) versions - Include language switcher, features, examples with images - Add multi-provider support section and contact info	2025-12-03 13:36:36 +09:00
Dayuan Jiang	271f3b0f58	Merge pull request #44 from jianyun8023/dev Add Docker Support with Multi-stage Build	2025-12-03 09:02:23 +09:00
dayuan.jiang	bc0f767ad7	Merge main into dev, resolve conflicts	2025-12-03 08:59:46 +09:00
dayuan.jiang	61ef41addf	docs: add Docker badge to READMEs	2025-12-03 08:56:16 +09:00
Jianyun8023	5d38ed59eb	feat: add Docker support with multi-stage build	2025-12-02 21:58:06 +08:00
Dayuan Jiang	53754e627a	feat: add GitHub Sponsors button and i18n READMEs (#43 ) - Add GitHub Sponsors iframe button to chat panel header - Update README with badges and language switcher - Add Chinese README (README_CN.md) - Add Japanese README (README_JA.md) - Reorganize examples section in README	2025-12-02 22:53:31 +09:00
Dayuan Jiang	bca80c0856	Update GitHub Sponsors username in FUNDING.yml	2025-12-02 22:03:19 +09:00
Dayuan Jiang	e2adfb49aa	Merge pull request #38 from DayuanJiang/feat/add-deepseek-provider feat: add DeepSeek as AI provider	2025-12-02 11:59:35 +09:00
dayuan.jiang	45ab934288	feat: add DeepSeek as AI provider - Install @ai-sdk/deepseek package - Add DeepSeek provider support to lib/ai-providers.ts - Add DeepSeek configuration to env.example - Update README.md with DeepSeek in provider list - Support both default and custom base URL for DeepSeek	2025-12-02 11:52:09 +09:00
Dayuan Jiang	af3173623a	Merge pull request #36 from DayuanJiang/chore/remove-github-workflows chore: remove github workflows	2025-12-02 01:19:45 +09:00
dayuan.jiang	cd012f5e2f	chore: remove github workflows	2025-12-02 01:12:49 +09:00
Dan Zheng	d4fb635d98	fix: add customize anthropic baseURL (#28 ) * fix: add custom anthropic baseURL * feat: add baseURL support for all AI providers - Add GOOGLE_BASE_URL for Google Generative AI - Add AZURE_BASE_URL for Azure OpenAI - Add OLLAMA_BASE_URL support (was documented but not implemented) - Add OPENROUTER_BASE_URL for OpenRouter - Fix missing semicolon in Anthropic case - Update env.example with new environment variables Closes #20 --------- Co-authored-by: dayuan.jiang <jdy.toh@gmail.com>	2025-12-02 01:08:06 +09:00
Dayuan Jiang	14740e35a8	Update README with bug fix and star history section	2025-12-01 22:40:43 +09:00
Dayuan Jiang	5b31216917	feat: cache example prompt responses to save tokens (#34 ) - Add lib/cached-responses.ts with pre-generated XML for 4 example prompts - Modify chat API route to check cache before calling AI - Cache returns instant response (~0.26s) vs AI generation (~20-25s) - Add "(cached for instant response)" text to example panel - Cache only activates for first message with empty diagram	2025-12-01 14:07:50 +09:00
Dayuan Jiang	c7d0260328	feat: add Bedrock prompt caching for system and conversation messages (#32 ) * feat: add Bedrock prompt caching for system and conversation messages - Add cache point to system message (2558+ tokens cached) - Add cache point to last assistant message in conversation history - This caches the entire conversation prefix for subsequent requests - Reduces latency and costs for multi-turn conversations * refactor: remove duplicated system prompt	2025-12-01 10:43:33 +09:00
Dayuan Jiang	d2d4dd01cc	fix: filter out messages with empty content arrays for Bedrock API (#31 ) * fix: filter out messages with empty content arrays for Bedrock API The convertToModelMessages function from AI SDK can produce messages with empty content arrays when assistant messages have only tool call parts or when tool results aren't properly converted. Bedrock API rejects these with 400 errors. This fix filters out invalid messages before sending to the API. * 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.	2025-12-01 01:15:43 +09:00
Dayuan Jiang	b4679f6598	fix: increase maxDuration to 300s for Fluid Compute (#30 )	2025-12-01 00:46:40 +09:00
Dayuan Jiang	0d0d553e23	fix: correct anthropic beta header config for fine-grained tool streaming (#27 ) * fix: correct anthropic beta header config for fine-grained tool streaming - Use bedrock.anthropicBeta for Bedrock provider (not additionalModelRequestFields) - Use top-level headers for direct Anthropic API - Update @ai-sdk/amazon-bedrock to 3.0.62 - Add headers support to ModelConfig interface * fix: update @ai-sdk/amazon-bedrock to 3.0.62 for tool streaming support	2025-11-30 16:34:42 +09:00
Ming long Hu	6e6de1eba6	feat: add copy button to user messages in chat sidebar (#21 ) * Initial plan * Initial plan for adding copy button to user messages Co-authored-by: huminglong <63436986+huminglong@users.noreply.github.com> * Add copy button to user messages in chat sidebar Co-authored-by: huminglong <63436986+huminglong@users.noreply.github.com> * Refactor: extract userMessageText to avoid duplicate function calls Co-authored-by: huminglong <63436986+huminglong@users.noreply.github.com> * feat(ui): 增加消息复制功能支持非 HTTPS 环境优化复制消息到剪贴板的逻辑，增加对非 HTTPS 环境的降级处理，提升用户体验。 * fix(package): 添加 peer 属性以支持依赖关系 * chore(.gitignore): 添加 next 和 next-ai-draw-io@0.2.0 相关条目 * fix: improve copy button implementation - Fix copy button alignment (place left of user message) - Remove unused React import - Move getMessageTextContent outside component - Add error state with X icon for copy failures - Translate Chinese comments to English - Simplify copy function - Add missing semicolon - Remove accidental .gitignore entries --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: dayuan.jiang <jdy.toh@gmail.com>	2025-11-29 13:39:35 +09:00
dayuan.jiang	00af87edbe	fix: prevent duplicate PR review comments by tracking existing file:line	2025-11-29 12:55:53 +09:00
dayuan.jiang	468d6c0276	fix: require suggested fixes in PR review comments	2025-11-29 12:46:24 +09:00
dayuan.jiang	14f74b076f	fix: remove gh pr comment from allowed tools to force inline comments only	2025-11-29 12:38:35 +09:00
dayuan.jiang	78d9229ca3	fix: remove gh pr comment from allowed tools to force inline comments only	2025-11-29 12:36:35 +09:00
dayuan.jiang	d8e0a1daad	fix: enforce inline comments for all issues found - Explicitly require mcp inline comment tool for each issue - Clarify gh pr comment is only for final summary - Forbid dismissing issues as minor/harmless	2025-11-29 12:31:46 +09:00
Dayuan Jiang	32e75ab556	feat: expand PR review scope to catch more issues (#25 ) * feat: use pull_request_target to support fork PR reviews * feat: expand PR review scope to catch more issues - Add categories for scope creep, suspicious .gitignore additions, UI inconsistencies - Change from 'be very selective' to 'report ALL issues found' - Simplify DO NOT comment list to allow more actionable feedback	2025-11-29 12:22:21 +09:00
Dayuan Jiang	b87e3a2de9	feat: use pull_request_target to support fork PR reviews (#24 )	2025-11-29 11:14:49 +09:00
dayuan.jiang	b758f63d7f	feat: use pull_request_target to support fork PR reviews	2025-11-29 11:09:51 +09:00
Dayuan Jiang	b32d42d962	Merge pull request #23 from DayuanJiang/feature/claude-code-actions Feature/claude code actions	2025-11-29 01:50:27 +09:00
dayuan.jiang	603865fdb0	fix: add reopened trigger for pr-review workflow	2025-11-29 01:45:44 +09:00
dayuan.jiang	4cb4e187b3	Trigger PR review	2025-11-29 01:40:13 +09:00
Dayuan Jiang	b4d0c6c18b	Merge pull request #22 from DayuanJiang/feature/claude-code-actions Add Claude Code GitHub Actions with Bedrock and auto PR review	2025-11-29 01:32:06 +09:00
dayuan.jiang	c03c41d320	Run PR review on both opened and synchronize events	2025-11-29 01:29:25 +09:00
dayuan.jiang	9d248e25ad	Resolve/collapse comment threads when issues are fixed	2025-11-29 01:26:00 +09:00
dayuan.jiang	4f4aae0e39	Check previous comments and mark resolved if fixed	2025-11-29 01:25:15 +09:00
dayuan.jiang	b00579b257	Remove automatic comment cleanup - GitHub handles outdated comments	2025-11-29 01:23:01 +09:00
dayuan.jiang	caf7ffe56c	Clean up outdated review comments before new review	2025-11-29 01:21:44 +09:00
dayuan.jiang	50d16cbe47	Allow Claude to fetch AI SDK docs during PR review	2025-11-29 01:20:20 +09:00
dayuan.jiang	56167d363c	Add specific AI SDK patterns to PR review prompt	2025-11-29 01:18:25 +09:00
dayuan.jiang	3e2dbbb541	Improve PR review prompt: add project context, narrow scope to real bugs only	2025-11-29 01:14:36 +09:00
dayuan.jiang	efebcea3ba	Fix PR review: use correct params and enable inline comments	2025-11-29 00:58:02 +09:00
dayuan.jiang	68824bc951	Enable inline code review comments like Vercel bot	2025-11-29 00:52:57 +09:00
dayuan.jiang	794826550d	Use stable v1 instead of beta for claude-code-action	2025-11-29 00:44:58 +09:00
dayuan.jiang	de98cf60ae	Add Claude Code GitHub Actions with Bedrock and auto PR review	2025-11-29 00:29:56 +09:00
Dayuan Jiang	b3fc624e13	Merge pull request #16 from ylxmf2005/main feat: support OpenAI compatible llm	2025-11-22 09:52:30 +09:00
ylxmf	d2dd501f3f	feat: support OpenAI compatible llm	2025-11-21 17:03:47 +08:00
Dayuan Jiang	5964deeff7	Merge pull request #15 from DayuanJiang/docs/update-examples Docs/update examples	2025-11-17 20:47:00 +09:00
Dayuan Jiang	663e1c8c77	Update examples section in README.md	2025-11-17 19:35:55 +09:00
dayuan.jiang	455115935c	fix: Remove conflicting width attribute from colspan cell in README table The cell with colspan=2 should not have width=50% as it creates a layout conflict causing horizontal table spanning on GitHub.	2025-11-17 19:07:43 +09:00
Dayuan Jiang	8d36e0dfb0	Merge pull request #14 from DayuanJiang/docs/update-examples docs: Update examples with new prompts and demo images	2025-11-17 19:03:29 +09:00
Dayuan Jiang	60f4694752	Merge pull request #13 from DayuanJiang/fix/resize fix: Preserve state when resizing window to mobile size	2025-11-17 18:59:07 +09:00
dayuan.jiang	aa330f74b3	fix: Preserve state when resizing window to mobile size Change mobile warning from unmounting components to showing an overlay. This prevents losing diagram and chat state when window is resized.	2025-11-17 15:18:29 +09:00
dayuan.jiang	7a6a7eaf7c	docs: Update examples with new prompts and demo images - Add Examples section to README with 2-column grid layout - Include demo images for GCP, AWS, Azure, animated connectors, and cat - Update example panel buttons with clearer labels - Add animated connector example button - Add instruction for animated connectors in chat route	2025-11-17 15:12:16 +09:00
Dayuan Jiang	7518285e98	Merge pull request #12 from DayuanJiang/chore/fix-readme chore: Update README for demo site link and simplify multi-provider s…	2025-11-16 09:16:53 +09:00
dayuan.jiang	5c5da397df	chore: Update README for demo site link and simplify multi-provider support section	2025-11-16 09:16:02 +09:00
Dayuan Jiang	0385818b98	Merge pull request #11 from DayuanJiang/feature/seo-improvements Feature/seo improvements	2025-11-16 09:06:27 +09:00
dayuan.jiang	5e5c1fc31c	feat: Separate SEO content to /about page (best practice) - Remove header from main page for clean editor-only interface - Create /app/about/page.tsx with comprehensive SEO content (1000+ words) - Add About link next to 'Next-AI-Drawio' title in chat panel - Add GitHub icon link to /about page navigation - Update sitemap.ts to include /about page (priority: 0.8) SEO improvements following industry best practices: - Separate marketing content from app interface (Figma/Canva/Miro approach) - Server-rendered /about page for optimal crawlability - Clean URL structure for better internal linking - Multiple indexable pages for broader keyword coverage - Proper semantic HTML: H1, H2, H3, article, section tags - 1000+ words of keyword-rich content /about page includes: - AI diagram generator overview with value proposition - 6 detailed feature sections (AI creation, AWS diagrams, image replication, etc.) - 3 popular use cases (AWS architecture, flowcharts, system design) - Step-by-step usage guide (4 steps) - Benefits section (save time, precision, free, privacy) - Clear call-to-action with link back to editor - GitHub link in navigation for social proof This follows Google-approved architecture and avoids hidden content penalties.	2025-11-16 09:04:01 +09:00
dayuan.jiang	50b860bdea	fix: Update domain and improve SEO implementation - Update all URLs from vercel.app to next-ai-drawio.jiang.jp - Remove fake aggregateRating from JSON-LD (better SEO credibility) - Move JSON-LD script to <head> for better SEO crawler detection - Enhance JSON-LD description with specific features - Add 'free diagram generator' and 'online diagram maker' keywords - Improve Twitter Card description with call-to-action Addresses critical issues identified in SEO review: - Artificial rating data removed - JSON-LD placement improved - Domain consistency across all files	2025-11-16 08:41:49 +09:00
dayuan.jiang	533b3ccace	feat: Add comprehensive SEO improvements - Enhanced metadata with Open Graph and Twitter Card tags - Added robots.ts for search engine crawling directives - Added sitemap.ts for site structure - Improved image alt text for better accessibility and SEO - Added JSON-LD structured data (Schema.org SoftwareApplication) - Configured proper meta tags including keywords, authors, and robots settings - Set metadataBase for proper URL resolution	2025-11-16 08:36:13 +09:00
Dayuan Jiang	8084905711	chore: Add bug fix task for session timeout issue as todo Add a task to solve the bug for long sessions.	2025-11-15 15:37:44 +09:00
Dayuan Jiang	0dffe8cc20	Merge pull request #10 from DayuanJiang/chore/modify_readme chore: update readme	2025-11-15 15:35:50 +09:00