MyApp - WinUI 3 Chat Application với Kiến trúc Plugin

Ứng dụng chat hiện đại với Ollama thông qua ngrok, sử dụng WinUI 3 và kiến trúc plugin.

✨ Features

• 🎨 Modern Fluent Design UI - Windows 11 style với WinUI 3
• 🔌 Plugin Architecture - Hot-swappable plugins
• 💉 Dependency Injection - Clean, testable code
• 🤖 Ollama Integration - Chat với AI models
• 🌐 Ngrok Support - Remote API access với bypass free tier warning
• 📝 Auto-save History - Lưu vào chat_history.txt (project root)
• 📂 Exit Dialog - 3 tùy chọn: Mở thư mục / Thoát / Hủy
• ⌨️ Multi-line Input - Shift+Enter xuống dòng, Enter gửi tin
• 🎨 Markdown Rendering - Hiển thị formatted text (bold, code, headers)
• 🟢 Success Dialog - Nút OK màu xanh cho UX tốt hơn

Cấu trúc Project

MyApp.sln
├─ MyApp.Core/                  # Contracts (interfaces)
│  ├─ IPlugin.cs
│  ├─ IChatBackend.cs
│  └─ IExitLogger.cs
│
├─ MyApp.WinUI3Host/            # WinUI 3 Application
│  ├─ App.xaml / App.xaml.cs
│  ├─ MainWindow.xaml / MainWindow.xaml.cs
│  ├─ Controls/
│  │  └─ MarkdownViewer.cs     # Custom markdown control
│  ├─ Models/ChatTurn.cs
│  ├─ Services/PluginLoader.cs
│  ├─ Themes/Generic.xaml       # Control templates
│  └─ appsettings.json
│
└─ Plugins/
   ├─ Backend.NgrokOllama/      # Plugin: Ollama API qua ngrok
   │  └─ NgrokOllamaBackend.cs  # Với ngrok-skip-browser-warning header
   └─ Logging.TextOnExit/       # Plugin: Lưu lịch sử khi thoát
      └─ TextExitLogger.cs      # Tự động tìm project root

Yêu cầu Hệ thống

• .NET 8.0 SDK trở lên
• Windows 10 version 1809 (build 17763) trở lên (hoặc Windows 11)
• Visual Studio 2022 (version 17.1+) với workload:
  • .NET Desktop Development
  • Windows App SDK
• Ollama (cài đặt local)
• ngrok (để expose Ollama API ra internet)

Hướng dẫn Build

Visual Studio (⭐ Khuyến nghị)

1. Mở MyApp.sln trong Visual Studio
2. Chọn Platform: x64 (KHÔNG chọn "Any CPU")
3. Build → Build Solution (Ctrl+Shift+B)
4. Right-click MyApp.WinUI3Host → Set as Startup Project  
5. Nhấn F5 để run

Lưu ý: WinUI 3 chỉ build được trong Visual Studio, không hỗ trợ dotnet build CLI tốt.

Hướng dẫn Chuẩn bị Backend

1. Cài đặt Ollama

Tải và cài đặt Ollama từ: https://ollama.ai

2. Khởi động Ollama Service

ollama serve

3. Pull Model (ví dụ: llama2)

# Nếu bạn có model gpt-oss:20b
ollama pull gpt-oss:20b

# Hoặc sử dụng model khác như llama2
ollama pull llama2

Lưu ý: Nếu dùng model khác, cập nhật file appsettings.json:

{
  "Ollama": {
    "Model": "llama2"  // Thay đổi tên model ở đây
  }
}

4. Expose qua ngrok

ngrok http 11434

Sau khi chạy, bạn sẽ thấy URL như:

Forwarding   https://xxxx-yyyy-11434.ngrok-free.app -> http://localhost:11434

Copy URL https này để dán vào ứng dụng.

Hướng dẫn Sử dụng

1. Khởi động ứng dụng

• Chạy từ Visual Studio (F5) hoặc double-click exe
• Cửa sổ WinUI 3 hiện đại xuất hiện

2. Cấu hình Ngrok URL

• Paste URL ngrok vào TextBox (ví dụ: https://xxxx-11434.ngrok-free.app)
• Click nút "Apply"
• Dialog "Success" xuất hiện với nút OK màu xanh 🟢
• Click OK để tiếp tục

3. Chat với Bot

Nhập tin nhắn:

• Gõ câu hỏi vào TextBox
• Enter - Gửi tin nhắn
• Shift+Enter - Xuống dòng mới (cho câu hỏi nhiều dòng)
• Click "Send" - Gửi tin nhắn

Xem phản hồi:

• Bot response hiển thị với Markdown formatting:
  • Bold text - **text**
  • Code blocks - `code`
  • Headers - # H1, ## H2
• Text được render đẹp mắt tự động

4. Thoát ứng dụng

Cách 1: Click nút Exit

• Click nút "Exit" (góc trên bên phải, bên cạnh nút Apply)

Cách 2: Click X hoặc Alt+F4

Exit Dialog hiển thị (nếu có lịch sử chat):

╔═══════════════════════════════════════════╗
║  💾 Lịch sử đã được lưu                   ║
║                                           ║
║  ✅ Đã lưu [số] tin nhắn                 ║
║                                           ║
║  📄 chat_history.txt                      ║
║  📁 C:\...\ChatBox\                       ║
║                                           ║
║  Cảm ơn bạn đã sử dụng!                  ║
║                                           ║
║  [ 📂 Mở thư mục ]  [ Thoát ]  [ Hủy ]   ║
╚═══════════════════════════════════════════╝

3 Tùy chọn:

• 📂 Mở thư mục - Mở File Explorer, highlight file → Thoát app
• Thoát - Đóng app ngay
• Hủy - Quay lại chat (không thoát)

📂 Chat History Location

Vị trí lưu file

File lịch sử chat được lưu tự động khi bạn thoát app:

📁 C:\Users\HP\Downloads\Test-CSharp\ChatBox\
   └─ 📄 chat_history.txt

(Thư mục gốc của project, cùng cấp với thư mục Plugins - tự động tìm kiếm)

Format file

===== Chat session @ 2025-10-10 14:30:00 =====
[14:30:05] You: Hello!
[14:30:05] Bot: Hi there! How can I help you?
[14:30:10] You: What is AI?
[14:30:10] Bot: AI stands for Artificial Intelligence...
---

Cấu hình (appsettings.json)

{
  "Ollama": {
    "Model": "gpt-oss:20b"  // Tên model Ollama
  },
  "Logging": {
    "TextOnExit": {
      "Path": "chat_history.txt"  // Tên file (sẽ lưu ở project root)
    }
  }
}

Kiến trúc Plugin

Cách hoạt động

1. PluginLoader quét thư mục PluginsBin
2. Load tất cả DLL, tìm class implement IPlugin
3. Gọi Register() để đăng ký service vào DI container
4. Host resolve IChatBackend và IExitLogger để sử dụng

Tính năng Plugin

Backend Plugin (NgrokOllama):

• Tự động thêm header ngrok-skip-browser-warning: true
• Timeout 60 giây
• Parse JSON response từ Ollama API
• Error handling user-friendly

Logger Plugin (TextOnExit):

• Tự động tìm project root (tìm file .sln hoặc thư mục Plugins)
• Append mode - không ghi đè
• Format timestamp rõ ràng

Thay thế Plugin

Để thay thế backend hoặc logger:

1. Tạo project mới implement IPlugin và interface tương ứng
2. Build thành DLL
3. Copy DLL vào thư mục PluginsBin (thay thế DLL cũ)
4. Restart ứng dụng - không cần sửa code Host

🎨 UI Features

Multi-line Input

• Shift+Enter - Xuống dòng mới
• Enter - Gửi tin nhắn
• MaxHeight: 120px - Tự động scroll
• TextWrapping - Wrap text tự động
• Paste text nhiều dòng hoạt động hoàn hảo

Markdown Rendering

Bot responses tự động render markdown:

• Bold: **text** → text
• Code: `code` → code (màu cam, font Consolas)
• Headers: # Title → Title (font lớn)
• Tables: Render bảng với box-drawing characters

  | Header 1 | Header 2 |
  |----------|----------|
  | Cell 1   | Cell 2   |
  

  → Hiển thị bảng đẹp với border ┌─┬─┐

Dialog Styles

• Success dialog: Nút OK màu xanh 🟢 (Primary button)
• Warning/Error: Nút OK trắng (Close button)
• Exit dialog: StackPanel với rich formatting

Xử lý Lỗi

"Failed to load required plugins"

• Kiểm tra thư mục PluginsBin có tồn tại không
• Kiểm tra 2 DLL plugin có trong PluginsBin không

"Vui lòng dán Ngrok URL và bấm Apply trước"

• Bạn chưa thiết lập URL ngrok
• Dán URL và click Apply trước khi gửi message

"Lỗi gọi API: ..."

• Kiểm tra ngrok có đang chạy không
• Kiểm tra Ollama service có đang chạy không (ollama serve)
• Kiểm tra URL ngrok có đúng không

Timeout sau 60 giây

• Model đang xử lý quá lâu
• Thử dùng model nhỏ hơn hoặc câu hỏi ngắn gọn hơn

Build Error với WinUI 3

• Chỉ build trong Visual Studio, không dùng dotnet build CLI
• Đảm bảo có Windows App SDK workload
• Platform phải là x64 hoặc ARM64, không phải Any CPU

Acceptance Criteria ✓

• Solution build OK (.NET 8, WinUI 3)
• UI Fluent Design hiển thị đúng
• Multi-line input với Shift+Enter
• Markdown rendering hoạt động
• Gửi/nhận message qua API ngrok (với bypass header)
• Success dialog có nút xanh
• Nút Exit hoạt động
• Exit dialog với 3 tùy chọn
• File txt lưu ở project root với lịch sử đầy đủ
• Thay plugin bằng cách đổi DLL không cần sửa Host
• Dependency Injection hoạt động
• Code sạch, có namespace đầy đủ

Tech Stack

• .NET 8.0 - Latest LTS
• WinUI 3 - Modern Windows UI
• Markdig - Markdown parsing library
• Microsoft.Extensions.Hosting - DI container
• System.Text.Json - JSON serialization

License

MIT License - Free to use and modify.

---

Build trong Visual Studio để tận dụng WinUI 3! 🚀