Upload folder using huggingface_hub

.dockerignore

@@ -0,0 +1,9 @@
+node_modules
+.next
+.git
+.gitignore
+*.md
+!README.md
+.env
+.env.*
+.DS_Store

.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

Dockerfile

@@ -0,0 +1,24 @@
+FROM node:18-alpine
+
+# Install system dependencies for PDF and OCR processing
+RUN apk add --no-cache \
+    poppler-utils \
+    tesseract-ocr \
+    tesseract-ocr-data-eng \
+    tesseract-ocr-data-ind
+
+WORKDIR /app
+
+# Copy package files and install dependencies
+COPY package*.json ./
+RUN npm ci
+
+# Copy source code and build
+COPY . .
+RUN npm run build
+
+# HF Spaces uses port 7860
+ENV PORT=7860
+EXPOSE 7860
+
+CMD ["npm", "start"]

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Romi Nur Ismanto
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,10 +1,423 @@
 ---
 title: Open Chatbot
-emoji: 🐨
-colorFrom: red
-colorTo: gray
+emoji: 🤖
+colorFrom: blue
+colorTo: purple
 sdk: docker
-pinned: false
+app_port: 7860
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+<div align="center">
+
+# <img src="public/icon.svg" width="40" height="40" alt="icon" /> Open Chatbot
+
+### Zero File Leakage AI Chatbot — Privacy by Design
+
+**Your documents never leave your server. Only text goes to the cloud.**
+
+This architectural approach adopts the principle of **Privacy by Design**, where all documents are processed locally on the user's server before interacting with AI models through an API. The original files — whether PDF, Word, Excel, or OCR-extracted text from images — are **never transmitted** to the AI provider. The system only sends parsed and sliced text segments structured as JSON. Only the textual content relevant for reasoning is transmitted to the API, without including raw files, full document structures, or any sensitive metadata.
+
+[![Next.js](https://img.shields.io/badge/Next.js-16-black?style=for-the-badge&logo=next.js)](https://nextjs.org/)
+[![React](https://img.shields.io/badge/React-19-61DAFB?style=for-the-badge&logo=react)](https://react.dev/)
+[![TypeScript](https://img.shields.io/badge/TypeScript-5-3178C6?style=for-the-badge&logo=typescript&logoColor=white)](https://www.typescriptlang.org/)
+[![AI SDK](https://img.shields.io/badge/AI_SDK-6-FF6B35?style=for-the-badge)](https://sdk.vercel.ai/)
+[![License](https://img.shields.io/badge/License-MIT-green?style=for-the-badge)](LICENSE)
+
+[The Problem](#-the-problem-document-data-leakage) · [The Solution](#-how-open-chatbot-solves-it) · [How It Works](#-how-it-works-technically) · [Quick Start](#-quick-start) · [Features](#-full-features)
+
+</div>
+
+---
+
+## 🚨 The Problem: Document Data Leakage
+
+Many companies and individuals want to leverage AI to analyze internal documents — financial reports, contracts, HR data, medical records, legal documents — but face serious risks:
+
+| Risk | Explanation |
+|------|------------|
+| **Files sent raw to cloud** | When uploading PDF/Word to ChatGPT, Claude, or other AI, the original file is sent to their servers |
+| **Binary files stored on AI servers** | `.pdf`, `.docx`, `.xlsx` files are stored temporarily or permanently on AI provider infrastructure |
+| **Metadata leakage** | Filenames, author info, revision history, hidden comments are all transmitted |
+| **No control** | Once a file is sent, you have no control over data retention and usage |
+| **Compliance violation** | Violates GDPR, HIPAA, SOC 2, or internal corporate policies |
+
+> **Real-world example:** You upload a Q4 financial report to ChatGPT. The 5MB PDF is sent in full to OpenAI's servers — including metadata, embedded images, hidden text, and revision history. You have no idea how long that file is retained.
+
+---
+
+## ✅ How Open Chatbot Solves It
+
+Open Chatbot uses a **Local Processing + Text-Only Inference** architecture that ensures original files never leave your infrastructure:
+
+```
+  YOUR INFRASTRUCTURE (On-Premise / VPS)              CLOUD (AI Provider)
+  ==========================================          =======================
+
+  📄 PDF  📝 DOCX  📊 XLSX  🖼️ Image              OpenAI / Claude /
+       |                                             DeepSeek API
+       v
+  +-----------------------+                          Only receives:
+  | LOCAL FILE PROCESSOR  |                          ✅ Sliced text (JSON)
+  | • PDF → pdftotext     |                          ✅ User questions
+  | • DOCX → mammoth      |     text JSON            ✅ System prompt
+  | • XLSX → SheetJS      | ─────────────────────►
+  | • Image → Tesseract   |   (max 30KB/file)       Never receives:
+  | • OCR scanned docs    |                          ❌ Original files (binary)
+  +-----------------------+                          ❌ Images / scans
+       |                                             ❌ Document metadata
+       v                                             ❌ Revision history
+  🗑️ File deleted from                               ❌ Hidden content
+     memory after                                    ❌ Embedded objects
+     text extraction
+```
+
+### Security Principles
+
+| Principle | Implementation |
+|-----------|---------------|
+| **Files never sent to AI** | Files are processed locally → only extracted text is transmitted |
+| **Text is sliced** | Each file is capped at max **30KB of text** before being sent as a JSON chunk |
+| **No server storage** | Files are buffered in memory, extracted, then **immediately deleted** from temp |
+| **Stateless API inference** | DeepSeek, OpenAI, Claude APIs do not store data from API calls |
+| **API keys in browser** | Keys stored in browser localStorage, never on the server |
+| **Zero binary transfer** | What's sent to AI: `{"role":"system","content":"text..."}` — not files |
+
+---
+
+## 🔬 How It Works Technically
+
+### 1. Upload & Local Processing
+
+When a user uploads a file, **all processing happens on your own server**:
+
+```
+POST /api/upload  →  FormData { files: [File] }
+                            |
+                            v
+               ┌─────────────────────┐
+               │  file-processor.ts  │
+               │                     │
+               │  PDF ──► pdftotext  │  CLI tool (poppler)
+               │  PDF ──► OCR       │  tesseract CLI (fallback for scanned docs)
+               │  DOCX ──► mammoth   │  npm library
+               │  DOC ──► word-ext   │  npm library
+               │  XLSX ──► SheetJS   │  npm library
+               │  IMG ──► tesseract  │  OCR engine
+               │  TXT ──► buffer     │  native Node.js
+               └─────────┬───────────┘
+                         │
+                         v
+               { id, filename, text, size }  ← JSON response
+                                               (text only, not the file)
+```
+
+**What happens in memory:**
+1. File is buffered as a `Buffer` in RAM
+2. Text is extracted by the appropriate library
+3. Buffer and temp files are **immediately deleted** after extraction
+4. Only a `string` of text is returned to the client
+
+### 2. Sending to AI Provider
+
+When the user sends a message, **only JSON text is sent to the AI API**:
+
+```typescript
+// What is ACTUALLY sent to the API (from chat/route.ts)
+{
+  "model": "deepseek-chat",
+  "system": "You are an AI assistant...\n\n=== File: report.pdf ===\nExtracted text here (max 30KB)...\n=== End File ===",
+  "messages": [
+    { "role": "user", "content": "Analyze this financial report" }
+  ],
+  "max_tokens": 8192,
+  "stream": true
+}
+```
+
+**Notice:**
+- There is no `file`, `attachment`, or `binary` in the payload
+- The `system` field contains **plain text** from extraction, not a file
+- Each file context is **truncated** to max 30,000 characters (`fc.text.slice(0, 30000)`)
+- Responses are streamed as `text-delta` chunks — not stored on the server
+
+### 3. Why AI Providers Don't Store Your Data
+
+| Provider | API Policy |
+|----------|-----------|
+| **OpenAI** | Data from API calls is **not used for training** and not permanently stored (unlike the ChatGPT web interface) |
+| **Anthropic** | API calls are **not stored** for model training. Limited retention for abuse monitoring only |
+| **DeepSeek** | API follows minimal data retention policy for inference |
+
+> **Note:** This applies to usage via **API** (which Open Chatbot uses), not via web interfaces (ChatGPT/Claude web). Web interfaces have different policies.
+
+---
+
+## 📊 Comparison: Open Chatbot vs Direct Upload to AI
+
+| Aspect | Upload to ChatGPT/Claude Web | Open Chatbot |
+|--------|------------------------------|-------------|
+| Original file sent to cloud | ✅ Yes, full file | ❌ No, text only |
+| Binary/images transmitted | ✅ Yes | ❌ No |
+| Document metadata transmitted | ✅ Yes (author, revisions) | ❌ No |
+| Data used for training | ⚠️ Possibly (depends on settings) | ❌ No (API mode) |
+| File stored on AI server | ⚠️ Temporarily/permanently | ❌ No file at all |
+| Data retention control | ❌ Minimal | ✅ Full (self-hosted) |
+| Compliance friendly | ⚠️ Requires review | ✅ Data stays on-premise |
+| Data size transmitted | Full file (MBs) | Text only (max 30KB/file) |
+
+---
+
+## 🚀 Quick Start
+
+### Prerequisites
+
+- **Node.js** 18+
+- An API key from at least one provider: [DeepSeek](https://platform.deepseek.com/), [OpenAI](https://platform.openai.com/), or [Anthropic](https://console.anthropic.com/)
+- *(Optional)* `poppler-utils` and `tesseract-ocr` for PDF OCR
+
+### Install & Run
+
+```bash
+# Clone the repository
+git clone https://github.com/romizone/chatbot-next.git
+cd chatbot-next
+
+# Install dependencies
+npm install
+
+# Start development server
+npm run dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) → click **Settings** → select a provider → enter your API key → start chatting!
+
+### Environment Variables (Optional)
+
+Create a `.env.local` file for server-side fallback keys:
+
+```env
+DEEPSEEK_API_KEY=sk-...
+OPENAI_API_KEY=sk-...
+ANTHROPIC_API_KEY=sk-ant-...
+```
+
+### Install OCR Tools (Optional, for scanned PDFs & images)
+
+```bash
+# macOS
+brew install poppler tesseract tesseract-lang
+
+# Ubuntu/Debian
+sudo apt install poppler-utils tesseract-ocr tesseract-ocr-eng
+
+# Windows (via chocolatey)
+choco install poppler tesseract
+```
+
+---
+
+## 🎯 Full Features
+
+### Multi-Provider AI Engine
+
+| Provider | Models | Max Output |
+|----------|--------|------------|
+| **DeepSeek** | DeepSeek Chat, DeepSeek Reasoner | 8K - 16K tokens |
+| **OpenAI** | GPT-4o, GPT-4o Mini, GPT-4.1, GPT-4.1 Mini | 16K - 32K tokens |
+| **Anthropic** | Claude Sonnet 4.5, Claude Haiku 4.5 | 8K - 16K tokens |
+
+### Local Document Processing
+
+| Format | Engine | Capability |
+|--------|--------|-----------|
+| PDF | `pdftotext` CLI + Tesseract OCR | Text extraction + OCR for scanned PDFs (max 20 pages) |
+| DOCX | `mammoth` | Full text and formatting extraction |
+| DOC | `word-extractor` | Legacy Word document support |
+| XLSX/XLS | `xlsx` (SheetJS) | Spreadsheet to structured text (CSV per sheet) |
+| CSV | `xlsx` (SheetJS) | Direct parsing |
+| Images | `tesseract` CLI | OCR: PNG, JPG, BMP, TIFF, WebP |
+| Text | Native `Buffer` | TXT, MD, JSON, XML, HTML, source code (20+ formats) |
+
+### Core Features
+
+- **Zero File Leakage** — Files processed locally, only text sent to AI via JSON
+- **Per-Provider API Keys** — Each provider has its own key slot in browser localStorage
+- **Real-time Connection Indicator** — Green/red status in sidebar
+- **Auto-Continue** — Detects truncated responses and automatically requests continuation
+- **LaTeX Math (KaTeX)** — Mathematical formula rendering: `$inline$` and `$$block$$`
+- **Syntax Highlighting** — Code blocks with language detection (Prism theme)
+- **Multi-Session** — Chat history with multiple sessions
+- **File Context Persistence** — File contexts preserved per session
+- **Responsive UI** — Collapsible sidebar, Tailwind CSS + Radix UI
+- **Streaming Response** — Real-time responses via Vercel AI SDK `streamText`
+
+---
+
+## 🏗️ Architecture
+
+```
+chatbot-next/
+├── src/
+│   ├── app/
+│   │   ├── api/
+│   │   │   ├── chat/route.ts          # Streaming chat endpoint (multi-provider)
+│   │   │   └── upload/route.ts        # Local file processing endpoint
+│   │   ├── layout.tsx
+│   │   └── page.tsx
+│   ├── components/
+│   │   ├── chat/
+│   │   │   ├── chat-page.tsx          # Main orchestrator
+│   │   │   ├── chat-area.tsx          # Message display area
+│   │   │   ├── chat-input.tsx         # Input with file upload
+│   │   │   ├── chat-message.tsx       # Message bubble
+│   │   │   ├── markdown-renderer.tsx  # Markdown + KaTeX + syntax highlight
+│   │   │   ├── settings-dialog.tsx    # Provider & API key settings
+│   │   │   ├── sidebar.tsx            # Session list + connection indicator
+│   │   │   └── welcome-screen.tsx     # Landing screen
+│   │   └── ui/                        # Radix UI primitives
+│   ├── hooks/
+│   │   └── use-chat-store.ts          # State management (localStorage)
+│   └── lib/
+│       ├── constants.ts               # Model list, system prompt, defaults
+│       ├── file-processor.ts          # Local document processing engine
+│       └── types.ts                   # TypeScript interfaces
+├── public/
+├── package.json
+└── README.md
+```
+
+### Data Flow
+
+```
+User uploads file ─────────────────────────────────────────────────
+       │
+       ▼
+POST /api/upload
+       │
+       ▼
+file-processor.ts ── [PDF → pdftotext] ── [DOCX → mammoth]
+       │              [XLSX → SheetJS]     [IMG → tesseract OCR]
+       │
+       ▼
+JSON response: { filename, text, size }    ← text only, file deleted
+       │
+       ▼
+Browser stores text in memory
+       │
+       ▼
+User sends message
+       │
+       ▼
+POST /api/chat ──► { messages, provider, model, apiKey, fileContexts }
+       │
+       ▼
+Build system prompt + file text (sliced max 30KB/file)
+       │
+       ▼
+streamText() to AI Provider ──► text-delta chunks ──► UI
+       │
+       ▼
+AI only receives JSON text, never file binaries
+```
+
+---
+
+## 🐳 Deployment
+
+### Self-Hosted (Recommended for Enterprise)
+
+For maximum data privacy, deploy on your own infrastructure:
+
+```bash
+npm run build
+npm start
+```
+
+### Docker
+
+```dockerfile
+FROM node:18-alpine
+
+# Install OCR tools (optional)
+RUN apk add --no-cache poppler-utils tesseract-ocr
+
+WORKDIR /app
+COPY package*.json ./
+RUN npm ci --only=production
+COPY . .
+RUN npm run build
+EXPOSE 3000
+CMD ["npm", "start"]
+```
+
+```bash
+docker build -t open-chatbot .
+docker run -p 3000:3000 open-chatbot
+```
+
+### Vercel
+
+```bash
+npx vercel
+```
+
+> **Note:** On Vercel (serverless), OCR features require the Tesseract binary which may not be available. Use Docker deployment for full OCR support.
+
+---
+
+## 🔒 Security Summary
+
+| Aspect | Detail |
+|--------|--------|
+| **File Processing** | 100% local on your server, files deleted after extraction |
+| **Data to AI Provider** | Plain text JSON chunks only (max 30KB/file) |
+| **API Keys** | Stored in browser localStorage, sent per-request via HTTPS |
+| **File Binaries** | Never sent to AI providers |
+| **Document Metadata** | Stripped during extraction — only text content |
+| **Temp Files** | Auto-cleanup after processing (using `finally` blocks) |
+| **Data Retention** | Chat history in browser localStorage only |
+| **Network Payload** | JSON `{ role, content }` — not multipart/form-data files |
+
+---
+
+## 🛠️ Tech Stack
+
+| Layer | Technology |
+|-------|-----------|
+| **Framework** | Next.js 16 (App Router, Turbopack) |
+| **UI** | React 19, Tailwind CSS 4, Radix UI, Lucide Icons |
+| **AI Integration** | Vercel AI SDK 6 (`streamText`, `createUIMessageStream`) |
+| **Document Processing** | pdftotext (poppler), mammoth, word-extractor, SheetJS, Tesseract |
+| **Math Rendering** | KaTeX, remark-math, rehype-katex |
+| **Code Highlighting** | react-syntax-highlighter (Prism) |
+| **Language** | TypeScript 5 (strict mode) |
+
+---
+
+## 🤝 Contributing
+
+Contributions are welcome! Feel free to submit a Pull Request.
+
+1. Fork the repository
+2. Create your feature branch (`git checkout -b feature/amazing-feature`)
+3. Commit your changes (`git commit -m 'feat: add amazing feature'`)
+4. Push to the branch (`git push origin feature/amazing-feature`)
+5. Open a Pull Request
+
+---
+
+## 📄 License
+
+This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.
+
+---
+
+<div align="center">
+
+**Built to prevent document data leakage when using AI.**
+
+Your files stay on your server. Only text goes to the cloud.
+
+Made with ❤️ by [Romi Nur Ismanto](https://github.com/romizone)
+
+</div>

components.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "rtl": false,
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "registries": {}
+}

eslint.config.mjs

@@ -0,0 +1,18 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+import nextTs from "eslint-config-next/typescript";
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  // Override default ignores of eslint-config-next.
+  globalIgnores([
+    // Default ignores of eslint-config-next:
+    ".next/**",
+    "out/**",
+    "build/**",
+    "next-env.d.ts",
+  ]),
+]);
+
+export default eslintConfig;

next.config.ts

@@ -0,0 +1,7 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+};
+
+export default nextConfig;

package.json

@@ -0,0 +1,51 @@
+{
+  "name": "chatbot-next",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint"
+  },
+  "dependencies": {
+    "@ai-sdk/anthropic": "^3.0.44",
+    "@ai-sdk/deepseek": "^2.0.20",
+    "@ai-sdk/openai": "^3.0.29",
+    "@ai-sdk/react": "^3.0.88",
+    "ai": "^6.0.86",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "katex": "^0.16.28",
+    "lucide-react": "^0.564.0",
+    "mammoth": "^1.11.0",
+    "next": "16.1.6",
+    "pdf-parse": "^2.4.5",
+    "radix-ui": "^1.4.3",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "react-markdown": "^10.1.0",
+    "react-syntax-highlighter": "^16.1.0",
+    "rehype-katex": "^7.0.1",
+    "remark-gfm": "^4.0.1",
+    "remark-math": "^6.0.0",
+    "tailwind-merge": "^3.4.0",
+    "tesseract.js": "^5.1.1",
+    "uuid": "^13.0.0",
+    "word-extractor": "^1.0.4",
+    "xlsx": "^0.18.5"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "@types/react-syntax-highlighter": "^15.5.13",
+    "@types/uuid": "^10.0.0",
+    "eslint": "^9",
+    "eslint-config-next": "16.1.6",
+    "shadcn": "^3.8.4",
+    "tailwindcss": "^4",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "^5"
+  }
+}

postcss.config.mjs

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;

src/app/api/chat/route.ts

@@ -0,0 +1,172 @@
+import { streamText, type UIMessage, convertToModelMessages, createUIMessageStream, createUIMessageStreamResponse } from "ai";
+import { createAnthropic } from "@ai-sdk/anthropic";
+import { createOpenAI } from "@ai-sdk/openai";
+import { createDeepSeek } from "@ai-sdk/deepseek";
+import { SYSTEM_PROMPT } from "@/lib/constants";
+
+export const maxDuration = 300;
+
+export async function POST(req: Request) {
+  try {
+    const body = await req.json();
+    const { messages, provider, model, apiKey, fileContexts } = body;
+
+    let systemPrompt = SYSTEM_PROMPT;
+
+    if (fileContexts && fileContexts.length > 0) {
+      const parts = fileContexts
+        .filter((fc: { error: string | null; text: string }) => !fc.error && fc.text)
+        .map((fc: { filename: string; text: string }) => {
+          const text = fc.text.length > 30000 ? fc.text.slice(0, 30000) : fc.text;
+          return `=== File: ${fc.filename} ===\n${text}\n=== End File ===`;
+        });
+
+      if (parts.length > 0) {
+        systemPrompt +=
+          "\n\nBerikut adalah isi file yang di-upload oleh user:\n\n" +
+          parts.join("\n\n");
+      }
+    }
+
+    const providerName = provider || "deepseek";
+    const modelName = model || "deepseek-chat";
+
+    console.log("[chat] provider:", providerName, "model:", modelName, "files:", fileContexts?.length ?? 0);
+
+    // Create provider instance per-request with API key from client (fallback to env var)
+    let modelInstance;
+    if (providerName === "deepseek") {
+      const key = apiKey || process.env.DEEPSEEK_API_KEY;
+      if (!key) {
+        return new Response(
+          JSON.stringify({ error: "DeepSeek API key belum diisi. Buka Pengaturan untuk memasukkan API key." }),
+          { status: 400, headers: { "Content-Type": "application/json" } }
+        );
+      }
+      const ds = createDeepSeek({ apiKey: key });
+      modelInstance = ds(modelName);
+    } else if (providerName === "openai") {
+      const key = apiKey || process.env.OPENAI_API_KEY;
+      if (!key) {
+        return new Response(
+          JSON.stringify({ error: "OpenAI API key belum diisi. Buka Pengaturan untuk memasukkan API key." }),
+          { status: 400, headers: { "Content-Type": "application/json" } }
+        );
+      }
+      const oai = createOpenAI({ apiKey: key });
+      modelInstance = oai(modelName);
+    } else {
+      const key = apiKey || process.env.CHATBOT_ANTHROPIC_API_KEY || process.env.ANTHROPIC_API_KEY;
+      if (!key) {
+        return new Response(
+          JSON.stringify({ error: "Claude API key belum diisi. Buka Pengaturan untuk memasukkan API key." }),
+          { status: 400, headers: { "Content-Type": "application/json" } }
+        );
+      }
+      const anth = createAnthropic({
+        baseURL: "https://api.anthropic.com/v1",
+        apiKey: key,
+      });
+      modelInstance = anth(modelName);
+    }
+
+    // Convert UIMessages to model messages
+    const modelMessages = await convertToModelMessages(
+      (messages || []) as UIMessage[]
+    );
+
+    // Max output tokens per model
+    const MAX_TOKENS: Record<string, number> = {
+      "deepseek-chat": 8192,
+      "deepseek-reasoner": 16384,
+      "gpt-4o": 16384,
+      "gpt-4o-mini": 16384,
+      "gpt-4.1": 32768,
+      "gpt-4.1-mini": 32768,
+      "claude-sonnet-4-5-20250929": 16384,
+      "claude-haiku-4-5-20251001": 8192,
+    };
+    const maxTokens = MAX_TOKENS[modelName] || 8192;
+
+    const result = streamText({
+      model: modelInstance,
+      system: systemPrompt,
+      messages: modelMessages,
+      maxOutputTokens: maxTokens,
+    });
+
+    // Wrap the stream: intercept chunks and inject [LANJUT] BEFORE finish-step
+    // when finishReason is "length" (token limit hit)
+    return createUIMessageStreamResponse({
+      stream: createUIMessageStream({
+        execute: async ({ writer }) => {
+          // Start resolving finishReason in parallel (resolves when generation completes)
+          const finishReasonPromise = result.finishReason;
+
+          const uiStream = result.toUIMessageStream();
+          const reader = uiStream.getReader();
+          type UIStreamChunk = Parameters<typeof writer.write>[0];
+          // Buffer: hold back finish-step/finish events so we can inject before them
+          const buffered: UIStreamChunk[] = [];
+          let foundFinishStep = false;
+          let lastTextId = "";
+
+          try {
+            while (true) {
+              const { done, value } = await reader.read();
+              if (done) break;
+
+              // Check if this chunk is a finish-step or finish event
+              const chunk = value as { type?: string; id?: string };
+              if (chunk.type === "finish-step" || chunk.type === "finish") {
+                buffered.push(value);
+                foundFinishStep = true;
+                continue;
+              }
+
+              // Track the id of the last text-delta for injection
+              if (chunk.type === "text-delta" && chunk.id) {
+                lastTextId = chunk.id;
+              }
+
+              // If we already found finish-step but get more chunks, flush buffer first
+              if (foundFinishStep) {
+                for (const b of buffered) writer.write(b);
+                buffered.length = 0;
+                foundFinishStep = false;
+              }
+
+              writer.write(value);
+            }
+          } finally {
+            reader.releaseLock();
+          }
+
+          // Now check finishReason and inject [LANJUT] BEFORE buffered finish events
+          const finishReason = await finishReasonPromise;
+          console.log("[chat] finishReason:", finishReason);
+
+          if (finishReason === "length" && lastTextId) {
+            // Inject [LANJUT] using the same text part id as the model's last delta
+            writer.write({
+              type: "text-delta",
+              delta: "\n\n[LANJUT]",
+              id: lastTextId,
+            } as UIStreamChunk);
+          }
+
+          // Flush remaining buffered finish events
+          for (const b of buffered) writer.write(b);
+        },
+      }),
+    });
+  } catch (error: unknown) {
+    console.error("Chat API Error:", error);
+    return new Response(
+      JSON.stringify({
+        error: error instanceof Error ? error.message : "Internal server error",
+      }),
+      { status: 500, headers: { "Content-Type": "application/json" } }
+    );
+  }
+}

src/app/api/upload/route.ts

@@ -0,0 +1,48 @@
+import { NextRequest, NextResponse } from "next/server";
+import { processFile } from "@/lib/file-processor";
+
+export async function POST(req: NextRequest) {
+  try {
+    const formData = await req.formData();
+    const files = formData.getAll("files") as File[];
+
+    if (!files || files.length === 0) {
+      return NextResponse.json({ error: "No files provided" }, { status: 400 });
+    }
+
+    const MAX_FILE_SIZE = 20 * 1024 * 1024; // 20MB per file
+    const MAX_FILES = 10;
+
+    if (files.length > MAX_FILES) {
+      return NextResponse.json(
+        { error: `Maksimum ${MAX_FILES} file per upload.` },
+        { status: 400 }
+      );
+    }
+
+    // Process files sequentially to avoid memory spikes from parallel large buffers
+    const results = [];
+    for (const file of files) {
+      if (file.size > MAX_FILE_SIZE) {
+        results.push({
+          id: crypto.randomUUID(),
+          filename: file.name,
+          extension: file.name.split(".").pop()?.toLowerCase() || "",
+          text: "",
+          error: `File '${file.name}' terlalu besar (${(file.size / 1024 / 1024).toFixed(1)}MB). Maksimum 20MB.`,
+          size: file.size,
+        });
+        continue;
+      }
+      const buffer = Buffer.from(await file.arrayBuffer());
+      results.push(await processFile(buffer, file.name));
+    }
+
+    return NextResponse.json({ files: results });
+  } catch (e: unknown) {
+    return NextResponse.json(
+      { error: e instanceof Error ? e.message : "Upload failed" },
+      { status: 500 }
+    );
+  }
+}

src/app/globals.css

@@ -0,0 +1,116 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-inter);
+  --font-mono: var(--font-geist-mono);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 12px);
+  --radius-4xl: calc(var(--radius) + 16px);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --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);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+  width: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #d1d5db;
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #9ca3af;
+}
+
+/* Hide scrollbar on sidebar */
+.overflow-y-auto {
+  scrollbar-width: thin;
+  scrollbar-color: #d1d5db transparent;
+}

src/app/layout.tsx

@@ -0,0 +1,27 @@
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import "./globals.css";
+
+const inter = Inter({
+  subsets: ["latin"],
+  variable: "--font-inter",
+});
+
+export const metadata: Metadata = {
+  title: "Open Chatbot",
+  description: "Open Chatbot — multi-provider AI assistant dengan analisis dokumen dan OCR",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="id">
+      <body className={`${inter.variable} font-sans antialiased`}>
+        {children}
+      </body>
+    </html>
+  );
+}

src/app/page.tsx

@@ -0,0 +1,5 @@
+import { ChatPage } from "@/components/chat/chat-page";
+
+export default function Home() {
+  return <ChatPage />;
+}

src/components/chat/chat-area.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { useRef, useEffect } from "react";
+import { ChatMessage } from "./chat-message";
+import { WelcomeScreen } from "./welcome-screen";
+import { Loader2 } from "lucide-react";
+
+interface Message {
+  id: string;
+  role: "user" | "assistant";
+  content: string;
+}
+
+interface Props {
+  messages: Message[];
+  isLoading: boolean;
+}
+
+export function ChatArea({ messages, isLoading }: Props) {
+  const bottomRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    bottomRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages, isLoading]);
+
+  return (
+    <div className="flex-1 overflow-y-auto">
+      <div className="max-w-[1088px] mx-auto px-5 py-6">
+        {messages.length === 0 ? (
+          <WelcomeScreen />
+        ) : (
+          <div className="space-y-6">
+            {messages.map((msg) => (
+              <ChatMessage
+                key={msg.id}
+                role={msg.role}
+                content={msg.content}
+              />
+            ))}
+            {isLoading &&
+              messages[messages.length - 1]?.role === "user" && (
+                <div className="flex gap-4 justify-start">
+                  <div className="w-8 h-8 rounded-full bg-gradient-to-br from-indigo-500 to-purple-500 flex items-center justify-center flex-shrink-0 mt-1">
+                    <Loader2 className="w-5 h-5 text-white animate-spin" />
+                  </div>
+                  <div className="flex items-center gap-1.5 py-2">
+                    <div className="w-2 h-2 rounded-full bg-gray-300 animate-bounce [animation-delay:0ms]" />
+                    <div className="w-2 h-2 rounded-full bg-gray-300 animate-bounce [animation-delay:150ms]" />
+                    <div className="w-2 h-2 rounded-full bg-gray-300 animate-bounce [animation-delay:300ms]" />
+                  </div>
+                </div>
+              )}
+          </div>
+        )}
+        <div ref={bottomRef} />
+      </div>
+    </div>
+  );
+}

src/components/chat/chat-input.tsx

@@ -0,0 +1,149 @@
+"use client";
+
+import { useRef, useState, useCallback } from "react";
+import { Paperclip, ArrowUp, Loader2 } from "lucide-react";
+import { ACCEPT_FILE_TYPES } from "@/lib/constants";
+import type { FileContext } from "@/lib/types";
+import { FilePreview } from "./file-preview";
+
+interface Props {
+  onSend: (message: string) => void;
+  onFilesUploaded: (files: FileContext[]) => void;
+  files: FileContext[];
+  onRemoveFile: (id: string) => void;
+  onClearFiles: () => void;
+  isLoading: boolean;
+  isUploading: boolean;
+  setIsUploading: (v: boolean) => void;
+}
+
+export function ChatInput({
+  onSend,
+  onFilesUploaded,
+  files,
+  onRemoveFile,
+  onClearFiles,
+  isLoading,
+  isUploading,
+  setIsUploading,
+}: Props) {
+  const [input, setInput] = useState("");
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const adjustHeight = useCallback(() => {
+    const textarea = textareaRef.current;
+    if (textarea) {
+      textarea.style.height = "auto";
+      textarea.style.height = Math.min(textarea.scrollHeight, 200) + "px";
+    }
+  }, []);
+
+  const handleSend = () => {
+    const trimmed = input.trim();
+    if (!trimmed || isLoading) return;
+    onSend(trimmed);
+    setInput("");
+    if (textareaRef.current) {
+      textareaRef.current.style.height = "auto";
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
+  };
+
+  const handleFileSelect = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const selectedFiles = e.target.files;
+    if (!selectedFiles || selectedFiles.length === 0) return;
+
+    setIsUploading(true);
+    try {
+      const formData = new FormData();
+      Array.from(selectedFiles).forEach((f) => formData.append("files", f));
+
+      const res = await fetch("/api/upload", { method: "POST", body: formData });
+      if (!res.ok) {
+        console.error("Upload failed with status:", res.status);
+        alert("Gagal mengupload file. Silakan coba lagi.");
+        return;
+      }
+      const data = await res.json();
+
+      if (data.files) {
+        onFilesUploaded(data.files);
+      }
+    } catch (err) {
+      console.error("Upload failed:", err);
+      alert("Gagal mengupload file. Periksa koneksi dan coba lagi.");
+    } finally {
+      setIsUploading(false);
+      if (fileInputRef.current) fileInputRef.current.value = "";
+    }
+  };
+
+  return (
+    <div className="w-full max-w-[1088px] mx-auto px-5 pb-4">
+      <div className="bg-white border border-gray-200 rounded-2xl shadow-sm">
+        <FilePreview files={files} onRemove={onRemoveFile} onClearAll={onClearFiles} />
+        <div className="flex items-end gap-2 px-3 py-3">
+          <button
+            type="button"
+            onClick={() => fileInputRef.current?.click()}
+            disabled={isUploading}
+            className="p-2 rounded-xl hover:bg-gray-100 text-gray-400 hover:text-gray-600 transition-colors flex-shrink-0 mb-0.5"
+            title="Attach file"
+          >
+            {isUploading ? (
+              <Loader2 className="w-5 h-5 animate-spin" />
+            ) : (
+              <Paperclip className="w-5 h-5" />
+            )}
+          </button>
+          <input
+            ref={fileInputRef}
+            type="file"
+            multiple
+            accept={ACCEPT_FILE_TYPES}
+            onChange={handleFileSelect}
+            className="hidden"
+          />
+          <textarea
+            ref={textareaRef}
+            value={input}
+            onChange={(e) => {
+              setInput(e.target.value);
+              adjustHeight();
+            }}
+            onKeyDown={handleKeyDown}
+            placeholder="Tulis pesan..."
+            rows={1}
+            className="flex-1 resize-none bg-transparent text-gray-900 placeholder-gray-400 text-[15px] leading-relaxed focus:outline-none max-h-[200px] py-1.5"
+          />
+          <button
+            type="button"
+            onClick={handleSend}
+            disabled={!input.trim() || isLoading}
+            className={`p-2 rounded-xl flex-shrink-0 mb-0.5 transition-colors ${
+              input.trim() && !isLoading
+                ? "bg-gray-900 text-white hover:bg-gray-700"
+                : "bg-gray-100 text-gray-300 cursor-not-allowed"
+            }`}
+          >
+            {isLoading ? (
+              <Loader2 className="w-5 h-5 animate-spin" />
+            ) : (
+              <ArrowUp className="w-5 h-5" />
+            )}
+          </button>
+        </div>
+      </div>
+      <p className="text-[11px] text-purple-900 text-center mt-2">
+        <strong>Open Chatbot dapat membuat kesalahan. Periksa informasi penting.</strong>
+      </p>
+    </div>
+  );
+}

src/components/chat/chat-message.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import { Bot, User } from "lucide-react";
+import { MarkdownRenderer } from "./markdown-renderer";
+
+interface Props {
+  role: "user" | "assistant";
+  content: string;
+}
+
+export function ChatMessage({ role, content }: Props) {
+  const isUser = role === "user";
+
+  return (
+    <div className={`flex gap-4 ${isUser ? "justify-end" : "justify-start"}`}>
+      {!isUser && (
+        <div className="w-8 h-8 rounded-full bg-gradient-to-br from-indigo-500 to-purple-500 flex items-center justify-center flex-shrink-0 mt-1">
+          <Bot className="w-5 h-5 text-white" />
+        </div>
+      )}
+      <div
+        className={`max-w-[90%] ${
+          isUser
+            ? "bg-gray-100 rounded-2xl rounded-tr-sm px-4 py-3 text-gray-900"
+            : "text-gray-900 py-1"
+        }`}
+      >
+        {isUser ? (
+          <p className="text-[15px] leading-relaxed whitespace-pre-wrap">{content}</p>
+        ) : (
+          <div className="text-[15px] leading-relaxed prose prose-sm max-w-none">
+            <MarkdownRenderer content={content} />
+          </div>
+        )}
+      </div>
+      {isUser && (
+        <div className="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center flex-shrink-0 mt-1">
+          <User className="w-5 h-5 text-white" />
+        </div>
+      )}
+    </div>
+  );
+}

src/components/chat/chat-page.tsx

@@ -0,0 +1,362 @@
+"use client";
+
+import { useState, useEffect, useCallback, useRef, useMemo } from "react";
+import { useChat } from "@ai-sdk/react";
+import { DefaultChatTransport } from "ai";
+import { useChatStore } from "@/hooks/use-chat-store";
+import type { FileContext } from "@/lib/types";
+import { Sidebar } from "./sidebar";
+import { ChatArea } from "./chat-area";
+import { ChatInput } from "./chat-input";
+import { SettingsDialog } from "./settings-dialog";
+
+function getTextFromParts(parts: { type: string; text?: string }[]): string {
+  return parts
+    .filter((p) => p.type === "text")
+    .map((p) => p.text ?? "")
+    .join("");
+}
+
+export function ChatPage() {
+  const {
+    sessions,
+    currentSessionId,
+    setCurrentSessionId,
+    settings,
+    updateSettings,
+    createSession,
+    deleteSession,
+    getMessages,
+    saveMessages,
+    getFileContexts,
+    saveFileContexts,
+    hydrated,
+  } = useChatStore();
+
+  const [files, setFiles] = useState<FileContext[]>([]);
+  const [isUploading, setIsUploading] = useState(false);
+  const [sidebarOpen, setSidebarOpen] = useState(true);
+  const [settingsOpen, setSettingsOpen] = useState(false);
+  const prevMessagesRef = useRef<string>("");
+  const saveMessagesRef = useRef(saveMessages);
+  saveMessagesRef.current = saveMessages;
+
+  // Always-current ref for files — synced every render
+  const filesRef = useRef<FileContext[]>(files);
+  filesRef.current = files;
+
+  // Refs for transport body — these are read asynchronously when body() is called
+  const settingsRef = useRef(settings);
+  settingsRef.current = settings;
+
+  // Pending files: set right before sendMessage, read by transport body()
+  const pendingFilesRef = useRef<FileContext[]>([]);
+
+  // Stored file contexts for the current session (persisted in localStorage)
+  const sessionFilesRef = useRef<FileContext[]>([]);
+
+  const saveFileContextsRef = useRef(saveFileContexts);
+  saveFileContextsRef.current = saveFileContexts;
+  const getFileContextsRef = useRef(getFileContexts);
+  getFileContextsRef.current = getFileContexts;
+
+  // Create transport ONCE — body is a function that reads refs at call time
+  const transport = useMemo(
+    () =>
+      new DefaultChatTransport({
+        api: "/api/chat",
+        body: () => {
+          // Merge: new uploaded files + stored session files (deduplicated by id)
+          // Only include files that have actual text content (skip restored-from-localStorage metadata-only files)
+          const newFiles = pendingFilesRef.current;
+          const storedFiles = sessionFilesRef.current;
+          const allFilesMap = new Map<string, FileContext>();
+          for (const f of storedFiles) if (f.text) allFilesMap.set(f.id, f);
+          for (const f of newFiles) if (f.text) allFilesMap.set(f.id, f);
+
+          // Clear pending after reading — prevents stale files on next message
+          // This is the safe place to clear (after body() has read the files),
+          // NOT in the session-switch useEffect (which races with body()).
+          pendingFilesRef.current = [];
+
+          const currentSettings = settingsRef.current;
+          return {
+            provider: currentSettings.provider,
+            model: currentSettings.model,
+            apiKey: currentSettings.apiKeys[currentSettings.provider] || "",
+            fileContexts: Array.from(allFilesMap.values()),
+          };
+        },
+      }),
+    []
+  );
+
+  const [chatError, setChatError] = useState<string | null>(null);
+
+  const {
+    messages,
+    setMessages,
+    sendMessage,
+    status,
+  } = useChat({
+    transport,
+    onError: (error) => {
+      console.error("[chat] error:", error);
+      // Try to extract JSON error message from response
+      const msg = error.message || "Terjadi kesalahan. Coba lagi.";
+      setChatError(msg);
+    },
+  });
+
+  const isLoading = status === "streaming" || status === "submitted";
+
+  const simpleMessages = useMemo(
+    () =>
+      messages
+        .filter((m) => m.role === "user" || m.role === "assistant")
+        .map((m) => ({
+          id: m.id,
+          role: m.role as "user" | "assistant",
+          content: getTextFromParts((m.parts || []) as { type: string; text?: string }[]),
+        })),
+    [messages]
+  );
+
+  const isNewSessionRef = useRef(false);
+
+  // Track expired files (restored from localStorage without text content)
+  const [expiredFileNames, setExpiredFileNames] = useState<string[]>([]);
+
+  useEffect(() => {
+    // DON'T clear pendingFilesRef here — it causes a race condition:
+    // handleSend() sets pendingFilesRef → createSession() changes currentSessionId →
+    // this effect fires and clears pendingFilesRef BEFORE transport.body() reads it.
+    // Instead, pendingFilesRef is cleared inside transport.body() after reading.
+    setExpiredFileNames([]);
+
+    if (currentSessionId && hydrated) {
+      if (isNewSessionRef.current) {
+        isNewSessionRef.current = false;
+        // Don't clear sessionFilesRef — handleSend() already populated it
+        // before calling createSession(), so clearing here would race.
+      } else {
+        const stored = getMessages(currentSessionId);
+        setMessages(
+          stored.map((m) => ({
+            id: m.id,
+            role: m.role,
+            parts: [{ type: "text" as const, text: m.content }],
+          }))
+        );
+        setFiles([]);
+        // Restore stored file contexts for this session
+        const restoredFiles = getFileContextsRef.current(currentSessionId);
+        sessionFilesRef.current = restoredFiles;
+        // Check if any restored files have lost their text content
+        const expired = restoredFiles.filter((f) => !f.text).map((f) => f.filename);
+        if (expired.length > 0) {
+          setExpiredFileNames(expired);
+        }
+      }
+    } else {
+      setMessages([]);
+      setFiles([]);
+      sessionFilesRef.current = [];
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentSessionId, hydrated]);
+
+  // Save messages: only when status is "ready" (not during streaming) to avoid
+  // localStorage thrashing on every text delta. Also save on unmount via ref.
+  useEffect(() => {
+    if (!currentSessionId || !hydrated) return;
+    if (status !== "ready") return; // Don't save during streaming
+    const serialized = JSON.stringify(simpleMessages);
+    if (serialized !== prevMessagesRef.current && simpleMessages.length > 0) {
+      prevMessagesRef.current = serialized;
+      saveMessagesRef.current(currentSessionId, simpleMessages);
+    }
+  }, [simpleMessages, currentSessionId, hydrated, status]);
+
+  // Auto-continue: detect truncated responses and auto-send "lanjutkan"
+  const autoContinueCountRef = useRef(0);
+
+  useEffect(() => {
+    if (status !== "ready" || simpleMessages.length === 0) return;
+    const lastMsg = simpleMessages[simpleMessages.length - 1];
+    if (lastMsg.role !== "assistant") return;
+
+    const content = lastMsg.content.trim();
+
+    // Primary: server appends "[LANJUT]" when finishReason === "length"
+    // This is the most reliable signal — trust it above all else.
+    const endsWithLanjut = content.endsWith("[LANJUT]");
+
+    // Secondary heuristics (only for edge cases where server marker might be missing):
+    // - Must be long enough to plausibly be truncated (> 2000 chars)
+    // - Must NOT end with natural sentence-ending punctuation or markdown closers
+    const lastLine = content.split("\n").pop() || "";
+    const naturalEnd = /[.!?。）)」】:：]$/.test(content) || /```$/.test(content) || content.endsWith("|");
+    const endsInTable = !naturalEnd && lastLine.includes("|") && content.length > 2000;
+    const isTruncatedMid = !naturalEnd && content.length > 2000 && !/\n$/.test(content);
+
+    const shouldContinue = endsWithLanjut || endsInTable || isTruncatedMid;
+
+    if (shouldContinue) {
+      // Max 5 auto-continues to prevent infinite loop
+      if (autoContinueCountRef.current >= 5) {
+        autoContinueCountRef.current = 0;
+        return;
+      }
+      autoContinueCountRef.current += 1;
+      const timer = setTimeout(() => {
+        sendMessage({ text: "lanjutkan" });
+      }, 800);
+      return () => clearTimeout(timer);
+    } else {
+      // Reset counter when response finishes naturally
+      autoContinueCountRef.current = 0;
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [status, simpleMessages]);
+
+  const handleSend = useCallback(
+    (content: string) => {
+      setChatError(null);
+      // Use ref (always current) instead of closure `files` which may be stale
+      const newFiles = [...filesRef.current];
+      pendingFilesRef.current = newFiles;
+
+      let sessionId = currentSessionId;
+      if (!sessionId) {
+        isNewSessionRef.current = true;
+        sessionId = createSession();
+      }
+
+      // If there are new files, merge with session files and persist
+      if (newFiles.length > 0) {
+        const merged = new Map<string, FileContext>();
+        for (const f of sessionFilesRef.current) merged.set(f.id, f);
+        for (const f of newFiles) merged.set(f.id, f);
+        sessionFilesRef.current = Array.from(merged.values());
+        saveFileContextsRef.current(sessionId, sessionFilesRef.current);
+      }
+
+      // sendMessage triggers transport.sendMessages which calls body()
+      // body() reads pendingFilesRef + sessionFilesRef at that point
+      sendMessage({ text: content });
+
+      // Clear UI files after send
+      setFiles([]);
+    },
+    [currentSessionId, createSession, sendMessage]
+  );
+
+  const handleNewChat = useCallback(() => {
+    setCurrentSessionId(null);
+    setMessages([]);
+    setFiles([]);
+    pendingFilesRef.current = [];
+    sessionFilesRef.current = [];
+  }, [setCurrentSessionId, setMessages]);
+
+  const handleSelectSession = useCallback(
+    (id: string) => {
+      setCurrentSessionId(id);
+    },
+    [setCurrentSessionId]
+  );
+
+  const handleRemoveFile = useCallback((id: string) => {
+    setFiles((prev) => prev.filter((f) => f.id !== id));
+  }, []);
+
+  const handleClearFiles = useCallback(() => {
+    setFiles([]);
+  }, []);
+
+  const handleFilesUploaded = useCallback((newFiles: FileContext[]) => {
+    setFiles((prev) => [...prev, ...newFiles]);
+  }, []);
+
+  if (!hydrated) {
+    return (
+      <div className="flex h-screen items-center justify-center bg-white">
+        <div className="w-8 h-8 border-2 border-gray-200 border-t-indigo-500 rounded-full animate-spin" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex h-screen bg-white">
+      <Sidebar
+        sessions={sessions}
+        currentSessionId={currentSessionId}
+        onSelectSession={handleSelectSession}
+        onNewChat={handleNewChat}
+        onDeleteSession={deleteSession}
+        onOpenSettings={() => setSettingsOpen(true)}
+        isOpen={sidebarOpen}
+        onToggle={() => setSidebarOpen(!sidebarOpen)}
+        settings={settings}
+      />
+
+      <div
+        className={`flex-1 flex flex-col transition-all duration-300 ${
+          sidebarOpen ? "ml-[280px]" : "ml-0"
+        }`}
+      >
+        <ChatArea
+          messages={simpleMessages}
+          isLoading={isLoading}
+        />
+        {chatError && (
+          <div className="max-w-[1088px] mx-auto px-5 w-full">
+            <div className="flex items-center gap-2 bg-red-50 border border-red-200 rounded-lg px-3 py-2 text-sm text-red-800 mb-2">
+              <span>{chatError}</span>
+              <button
+                onClick={() => setChatError(null)}
+                className="ml-auto text-red-400 hover:text-red-600 text-xs"
+              >
+                ✕
+              </button>
+            </div>
+          </div>
+        )}
+        {expiredFileNames.length > 0 && (
+          <div className="max-w-[1088px] mx-auto px-5 w-full">
+            <div className="flex items-center gap-2 bg-amber-50 border border-amber-200 rounded-lg px-3 py-2 text-sm text-amber-800 mb-2">
+              <span>⚠️</span>
+              <span>
+                File <strong>{expiredFileNames.join(", ")}</strong> perlu di-upload ulang untuk konteks penuh.
+              </span>
+              <button
+                onClick={() => setExpiredFileNames([])}
+                className="ml-auto text-amber-500 hover:text-amber-700 text-xs"
+              >
+                ✕
+              </button>
+            </div>
+          </div>
+        )}
+        <ChatInput
+          onSend={handleSend}
+          onFilesUploaded={handleFilesUploaded}
+          files={files}
+          onRemoveFile={handleRemoveFile}
+          onClearFiles={handleClearFiles}
+          isLoading={isLoading}
+          isUploading={isUploading}
+          setIsUploading={setIsUploading}
+        />
+      </div>
+
+      <SettingsDialog
+        open={settingsOpen}
+        onOpenChange={setSettingsOpen}
+        settings={settings}
+        onSettingsChange={updateSettings}
+      />
+    </div>
+  );
+}

src/components/chat/file-badge.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { X } from "lucide-react";
+import { BADGE_COLORS } from "@/lib/constants";
+import type { FileContext } from "@/lib/types";
+
+interface Props {
+  file: FileContext;
+  onRemove?: () => void;
+}
+
+export function FileBadge({ file, onRemove }: Props) {
+  const bgColor = BADGE_COLORS[file.extension] || "bg-gray-500";
+  const label = file.extension.toUpperCase().slice(0, 4);
+
+  return (
+    <div
+      className={`inline-flex items-center gap-2 bg-white border rounded-xl px-3 py-2 shadow-sm group ${file.error ? "border-red-300" : "border-gray-200"}`}
+      title={file.error || undefined}
+    >
+      <div
+        className={`w-9 h-9 rounded-lg flex items-center justify-center text-white text-xs font-bold ${file.error ? "bg-red-400" : bgColor}`}
+      >
+        {label}
+      </div>
+      <div className="min-w-0">
+        <div className="text-sm font-medium text-gray-900 truncate max-w-[140px]">
+          {file.filename}
+        </div>
+        <div className={`text-xs ${file.error ? "text-red-500" : "text-gray-400"}`}>
+          {file.error
+            ? "Error - hover untuk detail"
+            : `${(file.size / 1024).toFixed(1)} KB`}
+        </div>
+      </div>
+      {onRemove && (
+        <button
+          onClick={onRemove}
+          className="ml-1 p-0.5 rounded-full hover:bg-gray-100 text-gray-400 hover:text-gray-600 opacity-0 group-hover:opacity-100 transition-opacity"
+        >
+          <X className="w-3.5 h-3.5" />
+        </button>
+      )}
+    </div>
+  );
+}

src/components/chat/file-preview.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { FileBadge } from "./file-badge";
+import type { FileContext } from "@/lib/types";
+
+interface Props {
+  files: FileContext[];
+  onRemove: (id: string) => void;
+  onClearAll: () => void;
+}
+
+export function FilePreview({ files, onRemove, onClearAll }: Props) {
+  if (files.length === 0) return null;
+
+  return (
+    <div className="flex flex-wrap items-center gap-2 px-4 py-2">
+      {files.map((file) => (
+        <FileBadge
+          key={file.id}
+          file={file}
+          onRemove={() => onRemove(file.id)}
+        />
+      ))}
+      {files.length > 1 && (
+        <button
+          onClick={onClearAll}
+          className="text-xs text-gray-400 hover:text-gray-600 ml-1"
+        >
+          Hapus semua
+        </button>
+      )}
+    </div>
+  );
+}

src/components/chat/markdown-renderer.tsx

@@ -0,0 +1,132 @@
+"use client";
+
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import remarkMath from "remark-math";
+import rehypeKatex from "rehype-katex";
+import "katex/dist/katex.min.css";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import { oneLight } from "react-syntax-highlighter/dist/esm/styles/prism";
+
+interface Props {
+  content: string;
+}
+
+/**
+ * Pre-process content to normalize LaTeX delimiters for remark-math.
+ * Fallback: converts \[...\] → $$...$$ and \(...\) → $...$
+ * System prompt already instructs model to use $...$ and $$...$$.
+ */
+function preprocessLaTeX(content: string): string {
+  // Step 1: Convert \[...\] to $$...$$ (block math)
+  let result = content.replace(
+    /\\\[([\s\S]*?)\\\]/g,
+    (_match, inner) => `$$${inner}$$`
+  );
+
+  // Step 2: Convert \(...\) to $...$ (inline math)
+  result = result.replace(
+    /\\\(([\s\S]*?)\\\)/g,
+    (_match, inner) => `$${inner}$`
+  );
+
+  return result;
+}
+
+export function MarkdownRenderer({ content }: Props) {
+  const processed = preprocessLaTeX(content);
+  return (
+    <ReactMarkdown
+      remarkPlugins={[remarkGfm, remarkMath]}
+      rehypePlugins={[rehypeKatex]}
+      components={{
+        code({ className, children, ...props }) {
+          const match = /language-(\w+)/.exec(className || "");
+          const codeStr = String(children).replace(/\n$/, "");
+          // Block code: has language class OR contains newlines (fenced block without lang)
+          const isBlock = !!match || codeStr.includes("\n");
+          const language = match ? match[1] : "text";
+          return isBlock ? (
+            <div className="my-3 rounded-lg overflow-hidden border border-gray-200">
+              <div className="bg-gray-100 px-4 py-1.5 text-xs text-gray-500 font-mono border-b border-gray-200">
+                {language}
+              </div>
+              <SyntaxHighlighter
+                style={oneLight}
+                language={language}
+                PreTag="div"
+                customStyle={{
+                  margin: 0,
+                  padding: "1rem",
+                  fontSize: "13px",
+                  background: "#fafafa",
+                }}
+              >
+                {codeStr}
+              </SyntaxHighlighter>
+            </div>
+          ) : (
+            <code
+              className="bg-gray-100 text-gray-800 px-1.5 py-0.5 rounded text-sm font-mono"
+              {...props}
+            >
+              {children}
+            </code>
+          );
+        },
+        p({ children }) {
+          return <p className="mb-3 last:mb-0 leading-relaxed">{children}</p>;
+        },
+        ul({ children }) {
+          return <ul className="list-disc pl-6 mb-3 space-y-1">{children}</ul>;
+        },
+        ol({ children }) {
+          return <ol className="list-decimal pl-6 mb-3 space-y-1">{children}</ol>;
+        },
+        h1({ children }) {
+          return <h1 className="text-xl font-bold mb-3 mt-4">{children}</h1>;
+        },
+        h2({ children }) {
+          return <h2 className="text-lg font-bold mb-2 mt-3">{children}</h2>;
+        },
+        h3({ children }) {
+          return <h3 className="text-base font-semibold mb-2 mt-3">{children}</h3>;
+        },
+        table({ children }) {
+          return (
+            <div className="my-3 overflow-x-auto rounded-lg border border-gray-200 max-w-full">
+              <table className="w-max min-w-full text-sm">{children}</table>
+            </div>
+          );
+        },
+        th({ children }) {
+          return (
+            <th className="bg-gray-50 px-4 py-2 text-left font-medium text-gray-700 border-b">
+              {children}
+            </th>
+          );
+        },
+        td({ children }) {
+          return (
+            <td className="px-4 py-2 border-b border-gray-100">{children}</td>
+          );
+        },
+        img({ src, alt, ...props }) {
+          // Skip rendering if src is empty — prevents browser error
+          if (!src) return null;
+          // eslint-disable-next-line @next/next/no-img-element
+          return <img src={src} alt={alt || ""} className="max-w-full rounded my-2" {...props} />;
+        },
+        blockquote({ children }) {
+          return (
+            <blockquote className="border-l-4 border-gray-300 pl-4 my-3 text-gray-600 italic">
+              {children}
+            </blockquote>
+          );
+        },
+      }}
+    >
+      {processed}
+    </ReactMarkdown>
+  );
+}

src/components/chat/settings-dialog.tsx

@@ -0,0 +1,159 @@
+"use client";
+
+import { useState } from "react";
+import { Eye, EyeOff } from "lucide-react";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { ANTHROPIC_MODELS, OPENAI_MODELS, DEEPSEEK_MODELS } from "@/lib/constants";
+import type { AppSettings } from "@/lib/types";
+
+interface Props {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  settings: AppSettings;
+  onSettingsChange: (settings: AppSettings) => void;
+}
+
+const PROVIDER_LABELS: Record<string, string> = {
+  deepseek: "DeepSeek",
+  openai: "OpenAI",
+  anthropic: "Claude",
+};
+
+export function SettingsDialog({
+  open,
+  onOpenChange,
+  settings,
+  onSettingsChange,
+}: Props) {
+  const [showKey, setShowKey] = useState(false);
+
+  const models =
+    settings.provider === "anthropic"
+      ? ANTHROPIC_MODELS
+      : settings.provider === "deepseek"
+        ? DEEPSEEK_MODELS
+        : OPENAI_MODELS;
+
+  const currentKey = settings.apiKeys[settings.provider] || "";
+
+  const handleKeyChange = (value: string) => {
+    onSettingsChange({
+      ...settings,
+      apiKeys: {
+        ...settings.apiKeys,
+        [settings.provider]: value,
+      },
+    });
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[420px]">
+        <DialogHeader>
+          <DialogTitle>Pengaturan</DialogTitle>
+        </DialogHeader>
+
+        <div className="space-y-5 mt-2">
+          {/* Provider */}
+          <div>
+            <label className="text-sm font-medium text-gray-700 block mb-2">
+              Provider
+            </label>
+            <div className="grid grid-cols-3 gap-2">
+              {(["deepseek", "openai", "anthropic"] as const).map((p) => {
+                const hasKey = !!(settings.apiKeys[p]);
+                return (
+                  <button
+                    key={p}
+                    onClick={() => {
+                      const newModels =
+                        p === "anthropic"
+                          ? ANTHROPIC_MODELS
+                          : p === "deepseek"
+                            ? DEEPSEEK_MODELS
+                            : OPENAI_MODELS;
+                      onSettingsChange({
+                        ...settings,
+                        provider: p,
+                        model: newModels[0].id,
+                      });
+                      setShowKey(false);
+                    }}
+                    className={`relative px-4 py-2.5 rounded-xl text-sm font-medium transition-colors ${
+                      settings.provider === p
+                        ? "bg-gray-900 text-white"
+                        : "bg-gray-100 text-gray-600 hover:bg-gray-200"
+                    }`}
+                  >
+                    {PROVIDER_LABELS[p]}
+                    {/* Key status dot */}
+                    <span
+                      className={`absolute top-1.5 right-1.5 w-2 h-2 rounded-full ${
+                        hasKey ? "bg-green-400" : "bg-red-400"
+                      }`}
+                    />
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+
+          {/* API Key */}
+          <div>
+            <label className="text-sm font-medium text-gray-700 block mb-2">
+              API Key — {PROVIDER_LABELS[settings.provider]}
+            </label>
+            <div className="relative">
+              <input
+                type={showKey ? "text" : "password"}
+                value={currentKey}
+                onChange={(e) => handleKeyChange(e.target.value)}
+                placeholder={`Masukkan ${PROVIDER_LABELS[settings.provider]} API key...`}
+                className="w-full px-4 py-2.5 pr-10 rounded-xl border border-gray-200 bg-gray-50 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
+              />
+              <button
+                type="button"
+                onClick={() => setShowKey(!showKey)}
+                className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
+              >
+                {showKey ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+              </button>
+            </div>
+            <p className="text-xs text-gray-400 mt-1.5">
+              Key disimpan di browser. Tidak dikirim ke server lain.
+            </p>
+          </div>
+
+          {/* Model */}
+          <div>
+            <label className="text-sm font-medium text-gray-700 block mb-2">
+              Model
+            </label>
+            <div className="space-y-2">
+              {models.map((m) => (
+                <button
+                  key={m.id}
+                  onClick={() =>
+                    onSettingsChange({ ...settings, model: m.id })
+                  }
+                  className={`w-full text-left px-4 py-3 rounded-xl text-sm transition-colors ${
+                    settings.model === m.id
+                      ? "bg-indigo-50 border-2 border-indigo-500 text-indigo-700 font-medium"
+                      : "bg-gray-50 border-2 border-transparent text-gray-600 hover:bg-gray-100"
+                  }`}
+                >
+                  {m.name}
+                </button>
+              ))}
+            </div>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

src/components/chat/sidebar.tsx

@@ -0,0 +1,160 @@
+"use client";
+
+import { Bot, Plus, Settings, Trash2, MessageSquare, PanelLeftClose, PanelLeft, Zap, ZapOff } from "lucide-react";
+import type { ChatSession, AppSettings } from "@/lib/types";
+import { ANTHROPIC_MODELS, OPENAI_MODELS, DEEPSEEK_MODELS } from "@/lib/constants";
+
+const PROVIDER_LABELS: Record<string, string> = {
+  deepseek: "DeepSeek",
+  openai: "OpenAI",
+  anthropic: "Claude",
+};
+
+interface Props {
+  sessions: ChatSession[];
+  currentSessionId: string | null;
+  onSelectSession: (id: string) => void;
+  onNewChat: () => void;
+  onDeleteSession: (id: string) => void;
+  onOpenSettings: () => void;
+  isOpen: boolean;
+  onToggle: () => void;
+  settings: AppSettings;
+}
+
+export function Sidebar({
+  sessions,
+  currentSessionId,
+  onSelectSession,
+  onNewChat,
+  onDeleteSession,
+  onOpenSettings,
+  isOpen,
+  onToggle,
+  settings,
+}: Props) {
+  const hasKey = !!(settings.apiKeys[settings.provider]);
+  const providerLabel = PROVIDER_LABELS[settings.provider] || settings.provider;
+  const allModels = settings.provider === "anthropic"
+    ? ANTHROPIC_MODELS
+    : settings.provider === "deepseek"
+      ? DEEPSEEK_MODELS
+      : OPENAI_MODELS;
+  const modelLabel = allModels.find((m) => m.id === settings.model)?.name || settings.model;
+  return (
+    <>
+      {/* Toggle button when sidebar is closed */}
+      {!isOpen && (
+        <button
+          onClick={onToggle}
+          className="fixed top-4 left-4 z-50 p-2 rounded-xl bg-white border border-gray-200 shadow-sm hover:bg-gray-50 transition-colors"
+        >
+          <PanelLeft className="w-5 h-5 text-gray-600" />
+        </button>
+      )}
+
+      {/* Sidebar */}
+      <div
+        className={`fixed inset-y-0 left-0 z-40 w-[280px] bg-gray-50 border-r border-gray-200 flex flex-col transition-transform duration-300 ${
+          isOpen ? "translate-x-0" : "-translate-x-full"
+        }`}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between px-4 py-4 border-b border-gray-200">
+          <div className="flex items-center gap-2">
+            <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-indigo-500 to-purple-500 flex items-center justify-center">
+              <Bot className="w-5 h-5 text-white" />
+            </div>
+            <span className="font-semibold text-gray-900 text-sm">
+              Open Chatbot
+            </span>
+          </div>
+          <button
+            onClick={onToggle}
+            className="p-1.5 rounded-lg hover:bg-gray-200 text-gray-500 transition-colors"
+          >
+            <PanelLeftClose className="w-5 h-5" />
+          </button>
+        </div>
+
+        {/* API connection indicator */}
+        <button
+          onClick={onOpenSettings}
+          className={`mx-3 mt-3 flex items-center gap-2.5 px-3 py-2 rounded-xl text-xs transition-colors ${
+            hasKey
+              ? "bg-emerald-50 border border-emerald-200 text-emerald-700 hover:bg-emerald-100"
+              : "bg-red-50 border border-red-200 text-red-600 hover:bg-red-100"
+          }`}
+        >
+          {hasKey ? (
+            <Zap className="w-3.5 h-3.5 flex-shrink-0" />
+          ) : (
+            <ZapOff className="w-3.5 h-3.5 flex-shrink-0" />
+          )}
+          <div className="flex flex-col items-start min-w-0">
+            <span className="font-medium">
+              {hasKey ? `Terhubung — ${providerLabel}` : "Tidak terhubung"}
+            </span>
+            <span className={`truncate w-full ${hasKey ? "text-emerald-500" : "text-red-400"}`}>
+              {hasKey ? modelLabel : "API key belum diisi"}
+            </span>
+          </div>
+        </button>
+
+        {/* New chat button */}
+        <div className="px-3 py-3">
+          <button
+            onClick={onNewChat}
+            className="w-full flex items-center gap-2 px-3 py-2.5 rounded-xl border border-gray-200 bg-white hover:bg-gray-100 text-gray-700 text-sm font-medium transition-colors"
+          >
+            <Plus className="w-4 h-4" />
+            Chat Baru
+          </button>
+        </div>
+
+        {/* Chat history */}
+        <div className="flex-1 overflow-y-auto px-3 space-y-1">
+          {sessions.length === 0 && (
+            <p className="text-xs text-gray-400 text-center mt-8">
+              Belum ada riwayat chat
+            </p>
+          )}
+          {sessions.map((session) => (
+            <div
+              key={session.id}
+              className={`group flex items-center gap-2 px-3 py-2.5 rounded-xl cursor-pointer transition-colors ${
+                currentSessionId === session.id
+                  ? "bg-gray-200 text-gray-900"
+                  : "hover:bg-gray-100 text-gray-600"
+              }`}
+              onClick={() => onSelectSession(session.id)}
+            >
+              <MessageSquare className="w-4 h-4 flex-shrink-0" />
+              <span className="text-sm truncate flex-1">{session.title}</span>
+              <button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onDeleteSession(session.id);
+                }}
+                className="p-1 rounded-lg hover:bg-gray-300 text-gray-400 hover:text-red-500 opacity-0 group-hover:opacity-100 transition-all"
+              >
+                <Trash2 className="w-3.5 h-3.5" />
+              </button>
+            </div>
+          ))}
+        </div>
+
+        {/* Settings button */}
+        <div className="px-3 py-3 border-t border-gray-200">
+          <button
+            onClick={onOpenSettings}
+            className="w-full flex items-center gap-2 px-3 py-2.5 rounded-xl hover:bg-gray-100 text-gray-600 text-sm transition-colors"
+          >
+            <Settings className="w-4 h-4" />
+            Pengaturan
+          </button>
+        </div>
+      </div>
+    </>
+  );
+}

src/components/chat/welcome-screen.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { Bot } from "lucide-react";
+
+export function WelcomeScreen() {
+  return (
+    <div className="flex flex-col items-center justify-center min-h-[50vh] text-center select-none">
+      <div className="w-14 h-14 rounded-full bg-gradient-to-br from-indigo-500 to-purple-500 flex items-center justify-center mb-5 shadow-lg">
+        <Bot className="w-8 h-8 text-white" />
+      </div>
+      <h1 className="text-2xl font-semibold text-gray-900 mb-1">
+        Open Chatbot
+      </h1>
+      <p className="text-[15px] text-gray-400">
+        Ada yang bisa saya bantu hari ini?
+      </p>
+    </div>
+  );
+}

src/components/ui/avatar.tsx

@@ -0,0 +1,109 @@
+"use client"
+
+import * as React from "react"
+import { Avatar as AvatarPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Avatar({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root> & {
+  size?: "default" | "sm" | "lg"
+}) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      data-size={size}
+      className={cn(
+        "group/avatar relative flex size-8 shrink-0 overflow-hidden rounded-full select-none data-[size=lg]:size-10 data-[size=sm]:size-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarImage({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn("aspect-square size-full", className)}
+      {...props}
+    />
+  )
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        "bg-muted text-muted-foreground flex size-full items-center justify-center rounded-full text-sm group-data-[size=sm]/avatar:text-xs",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarBadge({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="avatar-badge"
+      className={cn(
+        "bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full ring-2 select-none",
+        "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
+        "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
+        "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="avatar-group"
+      className={cn(
+        "*:data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarGroupCount({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="avatar-group-count"
+      className={cn(
+        "bg-muted text-muted-foreground ring-background relative flex size-8 shrink-0 items-center justify-center rounded-full text-sm ring-2 group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Avatar,
+  AvatarImage,
+  AvatarFallback,
+  AvatarBadge,
+  AvatarGroup,
+  AvatarGroupCount,
+}

src/components/ui/badge.tsx

@@ -0,0 +1,48 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-full border border-transparent px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+        ghost: "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 [a&]:hover:underline",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot.Root : "span"
+
+  return (
+    <Comp
+      data-slot="badge"
+      data-variant={variant}
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }

src/components/ui/button.tsx

@@ -0,0 +1,64 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot.Root : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }

src/components/ui/dialog.tsx

@@ -0,0 +1,158 @@
+"use client"
+
+import * as React from "react"
+import { XIcon } from "lucide-react"
+import { Dialog as DialogPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 outline-none sm:max-w-lg",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+          >
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({
+  className,
+  showCloseButton = false,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {showCloseButton && (
+        <DialogPrimitive.Close asChild>
+          <Button variant="outline">Close</Button>
+        </DialogPrimitive.Close>
+      )}
+    </div>
+  )
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-lg leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}

src/components/ui/scroll-area.tsx

@@ -0,0 +1,58 @@
+"use client"
+
+import * as React from "react"
+import { ScrollArea as ScrollAreaPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function ScrollArea({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
+  return (
+    <ScrollAreaPrimitive.Root
+      data-slot="scroll-area"
+      className={cn("relative", className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport
+        data-slot="scroll-area-viewport"
+        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+      >
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  )
+}
+
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
+  return (
+    <ScrollAreaPrimitive.ScrollAreaScrollbar
+      data-slot="scroll-area-scrollbar"
+      orientation={orientation}
+      className={cn(
+        "flex touch-none p-px transition-colors select-none",
+        orientation === "vertical" &&
+          "h-full w-2.5 border-l border-l-transparent",
+        orientation === "horizontal" &&
+          "h-2.5 flex-col border-t border-t-transparent",
+        className
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.ScrollAreaThumb
+        data-slot="scroll-area-thumb"
+        className="bg-border relative flex-1 rounded-full"
+      />
+    </ScrollAreaPrimitive.ScrollAreaScrollbar>
+  )
+}
+
+export { ScrollArea, ScrollBar }

src/components/ui/separator.tsx

@@ -0,0 +1,28 @@
+"use client"
+
+import * as React from "react"
+import { Separator as SeparatorPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }

src/components/ui/sheet.tsx

@@ -0,0 +1,143 @@
+"use client"
+
+import * as React from "react"
+import { XIcon } from "lucide-react"
+import { Dialog as SheetPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />
+}
+
+function SheetTrigger({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
+}
+
+function SheetClose({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Close>) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
+}
+
+function SheetPortal({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
+}
+
+function SheetOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
+  return (
+    <SheetPrimitive.Overlay
+      data-slot="sheet-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Content> & {
+  side?: "top" | "right" | "bottom" | "left"
+  showCloseButton?: boolean
+}) {
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Content
+        data-slot="sheet-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+          side === "right" &&
+            "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
+          side === "left" &&
+            "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+          side === "top" &&
+            "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
+          side === "bottom" &&
+            "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
+            <XIcon className="size-4" />
+            <span className="sr-only">Close</span>
+          </SheetPrimitive.Close>
+        )}
+      </SheetPrimitive.Content>
+    </SheetPortal>
+  )
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn("flex flex-col gap-1.5 p-4", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Title>) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn("text-foreground font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Description>) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}

src/components/ui/textarea.tsx

@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }

src/components/ui/tooltip.tsx

@@ -0,0 +1,57 @@
+"use client"
+
+import * as React from "react"
+import { Tooltip as TooltipPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

src/hooks/use-chat-store.ts

@@ -0,0 +1,191 @@
+"use client";
+
+import { useState, useCallback, useEffect, useRef, useSyncExternalStore } from "react";
+import type { ChatSession, AppSettings, FileContext } from "@/lib/types";
+import { DEFAULT_SETTINGS } from "@/lib/constants";
+import { v4 as uuid } from "uuid";
+
+const SESSIONS_KEY = "chatbot-sessions";
+const MESSAGES_PREFIX = "chatbot-msgs-";
+const FILES_PREFIX = "chatbot-files-";
+const SETTINGS_KEY = "chatbot-settings";
+
+export interface StoredMessage {
+  id: string;
+  role: "user" | "assistant";
+  content: string;
+}
+
+function readLocalStorage<T>(key: string, fallback: T): T {
+  if (typeof window === "undefined") return fallback;
+  try {
+    const stored = localStorage.getItem(key);
+    return stored ? JSON.parse(stored) : fallback;
+  } catch {
+    return fallback;
+  }
+}
+
+function readSettings(): AppSettings {
+  const stored = readLocalStorage<AppSettings | null>(SETTINGS_KEY, null);
+  if (!stored) return DEFAULT_SETTINGS;
+  // Deep merge: preserves user choices while adding new fields from defaults
+  return {
+    ...DEFAULT_SETTINGS,
+    ...stored,
+    apiKeys: {
+      ...DEFAULT_SETTINGS.apiKeys,
+      ...(stored.apiKeys || {}),
+    },
+  };
+}
+
+// SSR-safe hydration detection using useSyncExternalStore
+const emptySubscribe = () => () => {};
+const getClientSnapshot = () => true;
+const getServerSnapshot = () => false;
+
+function useHydrated(): boolean {
+  return useSyncExternalStore(emptySubscribe, getClientSnapshot, getServerSnapshot);
+}
+
+export function useChatStore() {
+  const [sessions, setSessions] = useState<ChatSession[]>(() => readLocalStorage(SESSIONS_KEY, []));
+  const [currentSessionId, setCurrentSessionId] = useState<string | null>(null);
+  const [settings, setSettings] = useState<AppSettings>(() => readSettings());
+  const hydrated = useHydrated();
+
+  // Persist sessions (skip first render to avoid writing hydrated state back)
+  const sessionsInitRef = useRef(false);
+  useEffect(() => {
+    if (!sessionsInitRef.current) {
+      sessionsInitRef.current = true;
+      return;
+    }
+    try {
+      localStorage.setItem(SESSIONS_KEY, JSON.stringify(sessions));
+    } catch {
+      console.warn("[store] Failed to persist sessions to localStorage (quota?)");
+    }
+  }, [sessions]);
+
+  // Persist settings
+  const settingsInitRef = useRef(false);
+  useEffect(() => {
+    if (!settingsInitRef.current) {
+      settingsInitRef.current = true;
+      return;
+    }
+    try {
+      localStorage.setItem(SETTINGS_KEY, JSON.stringify(settings));
+    } catch {
+      console.warn("[store] Failed to persist settings to localStorage (quota?)");
+    }
+  }, [settings]);
+
+  const createSession = useCallback((): string => {
+    const id = uuid();
+    const session: ChatSession = {
+      id,
+      title: "Chat Baru",
+      createdAt: new Date().toISOString(),
+      updatedAt: new Date().toISOString(),
+    };
+    setSessions((prev) => [session, ...prev]);
+    setCurrentSessionId(id);
+    return id;
+  }, []);
+
+  const deleteSession = useCallback(
+    (id: string) => {
+      setSessions((prev) => prev.filter((s) => s.id !== id));
+      localStorage.removeItem(MESSAGES_PREFIX + id);
+      localStorage.removeItem(FILES_PREFIX + id);
+      if (currentSessionId === id) {
+        setCurrentSessionId(null);
+      }
+    },
+    [currentSessionId]
+  );
+
+  const updateSessionTitle = useCallback((id: string, title: string) => {
+    setSessions((prev) => {
+      const session = prev.find((s) => s.id === id);
+      // Skip update if title is already the same — prevents infinite re-render loop
+      if (session && session.title === title) return prev;
+      return prev.map((s) =>
+        s.id === id ? { ...s, title, updatedAt: new Date().toISOString() } : s
+      );
+    });
+  }, []);
+
+  const getMessages = useCallback((sessionId: string): StoredMessage[] => {
+    try {
+      const stored = localStorage.getItem(MESSAGES_PREFIX + sessionId);
+      return stored ? JSON.parse(stored) : [];
+    } catch {
+      return [];
+    }
+  }, []);
+
+  const saveFileContexts = useCallback((sessionId: string, files: FileContext[]) => {
+    if (files.length > 0) {
+      try {
+        // Only save metadata (no text) — text is too large for localStorage.
+        // Files restored from localStorage will have empty text and need re-upload for full context.
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const metadata = files.map(({ text: _t, ...rest }) => ({
+          ...rest,
+          text: "",
+        }));
+        localStorage.setItem(FILES_PREFIX + sessionId, JSON.stringify(metadata));
+      } catch {
+        console.warn("[store] Failed to persist file contexts to localStorage (quota?)");
+      }
+    }
+  }, []);
+
+  const getFileContexts = useCallback((sessionId: string): FileContext[] => {
+    try {
+      const stored = localStorage.getItem(FILES_PREFIX + sessionId);
+      return stored ? JSON.parse(stored) : [];
+    } catch {
+      return [];
+    }
+  }, []);
+
+  const saveMessages = useCallback((sessionId: string, messages: StoredMessage[]) => {
+    try {
+      localStorage.setItem(MESSAGES_PREFIX + sessionId, JSON.stringify(messages));
+    } catch {
+      console.warn("[store] Failed to persist messages to localStorage (quota?)");
+    }
+    // Update title from first user message
+    if (messages.length >= 1) {
+      const firstUserMsg = messages.find((m) => m.role === "user");
+      if (firstUserMsg) {
+        const title = firstUserMsg.content.slice(0, 50) + (firstUserMsg.content.length > 50 ? "..." : "");
+        updateSessionTitle(sessionId, title);
+      }
+    }
+  }, [updateSessionTitle]);
+
+  const updateSettings = useCallback((newSettings: AppSettings) => {
+    setSettings(newSettings);
+  }, []);
+
+  return {
+    sessions,
+    currentSessionId,
+    setCurrentSessionId,
+    settings,
+    updateSettings,
+    createSession,
+    deleteSession,
+    getMessages,
+    saveMessages,
+    getFileContexts,
+    saveFileContexts,
+    hydrated,
+  };
+}

src/lib/constants.ts

@@ -0,0 +1,71 @@
+export const SUPPORTED_EXTENSIONS = [
+  "pdf", "doc", "docx", "xlsx", "xls", "csv",
+  "png", "jpg", "jpeg", "bmp", "tiff", "tif", "webp",
+  "txt", "md", "json", "xml", "html", "log", "py", "js", "ts", "java", "c", "cpp",
+];
+
+export const IMAGE_EXTENSIONS = ["png", "jpg", "jpeg", "bmp", "tiff", "tif", "webp"];
+export const TEXT_EXTENSIONS = ["txt", "md", "json", "xml", "html", "log", "py", "js", "ts", "java", "c", "cpp"];
+
+export const ACCEPT_FILE_TYPES =
+  ".pdf,.doc,.docx,.xlsx,.xls,.csv,.png,.jpg,.jpeg,.bmp,.tiff,.tif,.webp,.txt,.md,.json,.xml,.html,.log,.py,.js,.ts,.java,.c,.cpp";
+
+export const ANTHROPIC_MODELS = [
+  { id: "claude-sonnet-4-5-20250929", name: "Claude Sonnet 4.5" },
+  { id: "claude-haiku-4-5-20251001", name: "Claude Haiku 4.5" },
+];
+
+export const OPENAI_MODELS = [
+  { id: "gpt-4o", name: "GPT-4o" },
+  { id: "gpt-4o-mini", name: "GPT-4o Mini" },
+  { id: "gpt-4.1", name: "GPT-4.1" },
+  { id: "gpt-4.1-mini", name: "GPT-4.1 Mini" },
+];
+
+export const DEEPSEEK_MODELS = [
+  { id: "deepseek-chat", name: "DeepSeek Chat" },
+  { id: "deepseek-reasoner", name: "DeepSeek Reasoner" },
+];
+
+export const SYSTEM_PROMPT = `Kamu adalah asisten AI bernama Open Chatbot yang membantu menganalisis dokumen dan menjawab pertanyaan. Jawab dalam bahasa yang sama dengan pertanyaan user.
+
+PENTING: Jawaban kamu memiliki batas panjang. Jika membuat tabel perbandingan, buat ringkas dan padat. Gunakan singkatan jika perlu. Jika tabel terlalu panjang, bagi menjadi beberapa bagian dan selesaikan bagian pertama dulu. Di akhir, tulis "[LANJUT]" jika masih ada bagian yang belum disampaikan, sehingga user bisa meminta kelanjutannya.
+
+FORMAT MATEMATIKA: Saat menulis rumus atau ekspresi matematika, SELALU gunakan format LaTeX dengan delimiter:
+- Inline math: $rumus$ (contoh: $x^2 + y^2 = z^2$)
+- Block/display math: $$rumus$$ (contoh: $$\\sum_{i=1}^{n} i = \\frac{n(n+1)}{2}$$)
+JANGAN pernah menulis LaTeX tanpa delimiter $ atau $$. JANGAN gunakan \\[...\\] atau \\(...\\).`;
+
+export const DEFAULT_SETTINGS = {
+  provider: "deepseek" as const,
+  model: "deepseek-chat",
+  apiKeys: {
+    openai: "",
+    anthropic: "",
+    deepseek: "",
+  },
+};
+
+export const BADGE_COLORS: Record<string, string> = {
+  pdf: "bg-red-500",
+  docx: "bg-blue-500",
+  doc: "bg-blue-500",
+  xlsx: "bg-green-500",
+  xls: "bg-green-500",
+  csv: "bg-amber-500",
+  png: "bg-purple-500",
+  jpg: "bg-purple-500",
+  jpeg: "bg-purple-500",
+  bmp: "bg-purple-500",
+  tiff: "bg-purple-500",
+  tif: "bg-purple-500",
+  webp: "bg-purple-500",
+  txt: "bg-gray-500",
+  md: "bg-gray-500",
+  json: "bg-gray-600",
+  xml: "bg-gray-600",
+  html: "bg-orange-500",
+  py: "bg-yellow-600",
+  js: "bg-yellow-500",
+  ts: "bg-blue-600",
+};

src/lib/file-processor.ts

@@ -0,0 +1,258 @@
+/* eslint-disable @typescript-eslint/no-require-imports */
+import { IMAGE_EXTENSIONS, TEXT_EXTENSIONS, SUPPORTED_EXTENSIONS } from "./constants";
+import type { FileContext } from "./types";
+import { v4 as uuidv4 } from "uuid";
+
+function getExtension(filename: string): string {
+  const parts = filename.split(".");
+  return parts.length > 1 ? parts.pop()!.toLowerCase() : "";
+}
+
+export async function processFile(
+  buffer: Buffer,
+  filename: string
+): Promise<FileContext> {
+  const ext = getExtension(filename);
+  const result: FileContext = {
+    id: uuidv4(),
+    filename,
+    extension: ext,
+    text: "",
+    error: null,
+    size: buffer.length,
+  };
+
+  if (!SUPPORTED_EXTENSIONS.includes(ext)) {
+    result.error = `Format '.${ext}' belum didukung.`;
+    return result;
+  }
+
+  try {
+    if (ext === "pdf") {
+      result.text = await processPdf(buffer);
+    } else if (ext === "doc") {
+      result.text = await processDoc(buffer);
+    } else if (ext === "docx") {
+      result.text = await processDocx(buffer);
+    } else if (ext === "xlsx" || ext === "xls") {
+      result.text = processExcel(buffer);
+    } else if (ext === "csv") {
+      result.text = processCsv(buffer);
+    } else if (IMAGE_EXTENSIONS.includes(ext)) {
+      result.text = await processImage(buffer);
+    } else if (TEXT_EXTENSIONS.includes(ext)) {
+      result.text = processText(buffer);
+    } else {
+      result.text = processText(buffer);
+    }
+  } catch (e: unknown) {
+    result.error = `Error memproses '${filename}': ${e instanceof Error ? e.message : String(e)}`;
+  }
+
+  return result;
+}
+
+async function processPdf(buffer: Buffer): Promise<string> {
+  const { writeFile, readFile } = require("fs/promises");
+  const { mkdtemp, rm } = require("fs/promises");
+  const { tmpdir } = require("os");
+  const path = require("path");
+  const { execFile } = require("child_process");
+
+  // Step 1: Try fast text extraction with pdftotext CLI (poppler)
+  const tmpDir = await mkdtemp(path.join(tmpdir(), "pdf-txt-"));
+  const pdfPath = path.join(tmpDir, "input.pdf");
+  const txtPath = path.join(tmpDir, "output.txt");
+
+  try {
+    await writeFile(pdfPath, buffer);
+
+    await new Promise<void>((resolve, reject) => {
+      execFile(
+        "pdftotext",
+        ["-layout", pdfPath, txtPath],
+        { timeout: 15000 },
+        (error: Error | null) => {
+          if (error) reject(error);
+          else resolve();
+        }
+      );
+    });
+
+    const text = (await readFile(txtPath, "utf-8")).trim();
+    console.log(`[pdf] pdftotext extracted ${text.length} chars`);
+
+    if (text.length > 50) {
+      return text;
+    }
+  } catch (e) {
+    console.log(`[pdf] pdftotext failed: ${e instanceof Error ? e.message : String(e)}`);
+  } finally {
+    await rm(tmpDir, { recursive: true, force: true }).catch(() => {});
+  }
+
+  // Step 2: Fallback — convert PDF pages to images with pdftoppm, then OCR
+  console.log("[pdf] Text extraction empty, starting OCR fallback...");
+  return await ocrPdf(buffer);
+}
+
+async function ocrPdf(buffer: Buffer): Promise<string> {
+  const { writeFile, readFile, readdir } = require("fs/promises");
+  const { mkdtemp, rm } = require("fs/promises");
+  const { tmpdir } = require("os");
+  const path = require("path");
+  const { execFile } = require("child_process");
+
+  const tmpDir = await mkdtemp(path.join(tmpdir(), "pdf-ocr-"));
+  const pdfPath = path.join(tmpDir, "input.pdf");
+
+  try {
+    await writeFile(pdfPath, buffer);
+
+    // Convert PDF to PNG images using pdftoppm (poppler)
+    // Always limit to 20 pages max to avoid excessive processing
+    const args = ["-png", "-r", "300", "-l", "20", pdfPath, path.join(tmpDir, "page")];
+    await new Promise<void>((resolve, reject) => {
+      execFile(
+        "pdftoppm",
+        args,
+        { timeout: 120000 },
+        (error: Error | null) => {
+          if (error) reject(error);
+          else resolve();
+        }
+      );
+    });
+
+    // Find all generated page images
+    const files = await readdir(tmpDir);
+    const pageFiles = files
+      .filter((f: string) => f.startsWith("page") && f.endsWith(".png"))
+      .sort();
+
+    if (pageFiles.length === 0) {
+      return "(PDF berisi gambar tapi tidak dapat di-OCR)";
+    }
+
+    // OCR each page
+    const results: string[] = [];
+    for (const pageFile of pageFiles) {
+      const imgPath = path.join(tmpDir, pageFile);
+      const ocrBase = path.join(tmpDir, `ocr-${pageFile}`);
+      const ocrPath = ocrBase + ".txt";
+
+      try {
+        await new Promise<void>((resolve, reject) => {
+          execFile(
+            "tesseract",
+            [imgPath, ocrBase, "-l", "eng+ind"],
+            { timeout: 60000 },
+            (error: Error | null) => {
+              if (error) reject(error);
+              else resolve();
+            }
+          );
+        });
+
+        const pageText = await readFile(ocrPath, "utf-8");
+        if (pageText.trim()) {
+          results.push(`--- Halaman ${results.length + 1} ---\n${pageText.trim()}`);
+        }
+      } catch {
+        // Skip pages that fail OCR
+      }
+    }
+
+    return results.length > 0
+      ? results.join("\n\n")
+      : "(PDF berisi gambar tapi tidak dapat di-OCR)";
+  } finally {
+    // Clean up temp directory
+    await rm(tmpDir, { recursive: true, force: true }).catch(() => {});
+  }
+}
+
+async function processDoc(buffer: Buffer): Promise<string> {
+  const { writeFile, unlink } = require("fs/promises");
+  const { tmpdir } = require("os");
+  const path = require("path");
+  const tmpPath = path.join(tmpdir(), `doc-${uuidv4()}.doc`);
+  try {
+    await writeFile(tmpPath, buffer);
+    const WordExtractor = require("word-extractor");
+    const extractor = new WordExtractor();
+    const doc = await extractor.extract(tmpPath);
+    return doc.getBody().trim();
+  } finally {
+    await unlink(tmpPath).catch(() => {});
+  }
+}
+
+async function processDocx(buffer: Buffer): Promise<string> {
+  const mammoth = await import("mammoth");
+  const result = await mammoth.extractRawText({ buffer });
+  return result.value.trim();
+}
+
+function processExcel(buffer: Buffer): string {
+  const XLSX = require("xlsx");
+  const workbook = XLSX.read(buffer, { type: "buffer" });
+  const texts: string[] = [];
+
+  for (const sheetName of workbook.SheetNames) {
+    const sheet = workbook.Sheets[sheetName];
+    const csv = XLSX.utils.sheet_to_csv(sheet);
+    texts.push(`--- Sheet: ${sheetName} ---\n${csv}`);
+  }
+
+  return texts.join("\n\n");
+}
+
+function processCsv(buffer: Buffer): string {
+  const XLSX = require("xlsx");
+  const workbook = XLSX.read(buffer, { type: "buffer" });
+  const sheet = workbook.Sheets[workbook.SheetNames[0]];
+  return XLSX.utils.sheet_to_csv(sheet);
+}
+
+async function processImage(buffer: Buffer): Promise<string> {
+  const { writeFile, readFile, unlink } = require("fs/promises");
+  const { tmpdir } = require("os");
+  const path = require("path");
+  const { execFile } = require("child_process");
+
+  const inputPath = path.join(tmpdir(), `ocr-${uuidv4()}`);
+  const outputBase = path.join(tmpdir(), `ocr-out-${uuidv4()}`);
+  const outputPath = outputBase + ".txt";
+
+  try {
+    await writeFile(inputPath, buffer);
+
+    // Use system tesseract CLI — avoids Turbopack module resolution issues
+    await new Promise<void>((resolve, reject) => {
+      execFile(
+        "tesseract",
+        [inputPath, outputBase, "-l", "eng+ind"],
+        { timeout: 60000 },
+        (error: Error | null) => {
+          if (error) reject(error);
+          else resolve();
+        }
+      );
+    });
+
+    const text = await readFile(outputPath, "utf-8");
+    return text.trim();
+  } finally {
+    await unlink(inputPath).catch(() => {});
+    await unlink(outputPath).catch(() => {});
+  }
+}
+
+function processText(buffer: Buffer): string {
+  try {
+    return buffer.toString("utf-8");
+  } catch {
+    return buffer.toString("latin1");
+  }
+}

src/lib/types.ts

@@ -0,0 +1,25 @@
+export interface FileContext {
+  id: string;
+  filename: string;
+  extension: string;
+  text: string;
+  error: string | null;
+  size: number;
+}
+
+export interface ChatSession {
+  id: string;
+  title: string;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface AppSettings {
+  provider: "anthropic" | "openai" | "deepseek";
+  model: string;
+  apiKeys: {
+    openai: string;
+    anthropic: string;
+    deepseek: string;
+  };
+}

src/lib/utils.ts

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

tsconfig.json

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