v0.0.1

spring ai的基本使用
2026-04-17 14:28:21 +08:00 · 2026-04-17 14:28:21 +08:00 · 3208efe280
commit 3208efe280
9 changed files with 913 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,38 @@
+target/
+!.mvn/wrapper/maven-wrapper.jar
+!**/src/main/**/target/
+!**/src/test/**/target/
+
+### IntelliJ IDEA ###
+.idea/modules.xml
+.idea/jarRepositories.xml
+.idea/compiler.xml
+.idea/libraries/
+*.iws
+*.iml
+*.ipr
+
+### Eclipse ###
+.apt_generated
+.classpath
+.factorypath
+.project
+.settings
+.springBeans
+.sts4-cache
+
+### NetBeans ###
+/nbproject/private/
+/nbbuild/
+/dist/
+/nbdist/
+/.nb-gradle/
+build/
+!**/src/main/**/build/
+!**/src/test/**/build/
+
+### VS Code ###
+.vscode/
+
+### Mac OS ###
+.DS_Store
--- a/README.md
+++ b/README.md
@ -0,0 +1,206 @@
+# Spring AI Demo
+
+> 🤖 一个简洁优雅的 Spring AI 对话演示项目，基于 Spring Boot 3.2.0 与 Spring AI 1.0.0-M3 构建，支持流式响应与 Markdown 渲染。
+
+[![Spring Boot](https://img.shields.io/badge/Spring%20Boot-3.2.0-brightgreen)](https://spring.io/projects/spring-boot)
+[![Spring AI](https://img.shields.io/badge/Spring%20AI-1.0.0--M3-blue)](https://spring.io/projects/spring-ai)
+[![JDK](https://img.shields.io/badge/JDK-17%2B-orange)](https://openjdk.org/)
+[![License](https://img.shields.io/badge/License-MIT-yellow)](LICENSE)
+
+## ✨ 特性
+
+- 🌐 **智能对话** - 基于 OpenAI/Ollama 的自然语言交互
+- 📡 **流式响应** - 实时逐字输出，体验流畅
+- 📝 **Markdown 支持** - 完整渲染代码块、表格、列表等格式
+- 👨‍💻 **代码高亮** - Highlight.js 自动语言检测与语法着色
+- 🖼️ **向量数据库** - Milvus 集成（预留 RAG 扩展能力）
+- 📔 **PDF 解析** - Apache PDFBox 文档处理支持
+- 🎨 **精美界面** - 深色主题响应式设计
+
+## 🚀 快速开始
+
+### 环境要求
+
+- JDK 17+
+- Maven 3.8+
+- [Ollama](https://ollama.ai/) 本地服务
+
+### 1. 安装 Ollama
+
+```bash
+# macOS/Linux
+curl -fsSL https://ollama.ai/install.sh | sh
+
+# 拉取模型
+ollama pull gpt-oss:120b-cloud
+
+# 启动服务 (默认端口 11434)
+ollama serve
+```
+
+### 2. 启动项目
+
+```bash
+mvn spring-boot:run
+```
+
+### 3. 访问应用
+
+- **Web 界面**: http://localhost:8080
+- **健康检查**: http://localhost:8080/api/chat/test
+
+## 🔧 技术栈
+
+### 后端
+
+| 组件 | 技术 | 版本 |
+|:---|:---|:---|
+| 基础框架 | Spring Boot | 3.2.0 |
+| AI 框架 | Spring AI | 1.0.0-M3 |
+| AI 模型 | OpenAI/Ollama | - |
+| 响应式编程 | Spring WebFlux | 3.2.0 |
+| 向量数据库 | Milvus Store | 1.0.0-M3 |
+| 文档处理 | Apache PDFBox | 2.0.29 |
+
+### 前端
+
+| 技术 | 用途 |
+|:---|:---|
+| HTML5 + CSS3 | 页面结构与样式 |
+| Marked.js | Markdown 解析渲染 |
+| Highlight.js | 代码语法高亮 |
+
+## 📁 项目结构
+
+```
+springAiDemo/
+├── src/
+│   └── main/
+│       ├── java/com/demo/
+│       │   ├── MyApplication.java          # Spring Boot 启动入口
+│       │   └── controller/
+│       │       └── ChatController.java       # AI 聊天 REST API
+│       └── resources/
+│           ├── application.yaml              # 应用配置
+│           └── static/                       # 前端静态资源
+│               ├── index.html                # 主页面
+│               ├── css/style.css             # 深色主题样式
+│               └── js/app.js                 # 流式响应逻辑
+├── pom.xml
+└── README.md
+```
+
+## 💬 API 文档
+
+### 端点列表
+
+| 方法 | 端点 | 描述 | 参数 |
+|:---|:---|:---|:---|
+| GET | `/api/chat/test` | 健康检查 | - |
+| GET | `/api/chat/ai` | 同步 AI 对话 | `msg` |
+| GET | `/api/chat/ai/stream` | 流式 AI 对话 | `msg` |
+
+### 请求示例
+
+**同步对话：**
+```bash
+curl "http://localhost:8080/api/chat/ai?msg=什么是Spring AI"
+```
+
+**流式对话：**
+```bash
+curl "http://localhost:8080/api/chat/ai/stream?msg=讲一个故事"
+```
+
+### 响应格式
+
+- **同步**: `text/plain` - 完整回复文本
+- **流式**: `text/html;charset=UTF-8` - Server-Sent Events 分块传输
+
+## 🎨 界面预览
+
+🧩 **现代化深色主题**
+- 渐变标题与毛玻璃效果
+- 流畅的消息气泡动画
+- Markdown 代码块高亮
+- 流式响应动画指示器
+
+📝 **Markdown 支持**
+- 代码块与行内代码
+- 加粗、斜体、删除线
+- 有序/无序列表
+- 引用块、表格、链接
+
+## 🛠️ 配置说明
+
+### 模型配置 (`application.yaml`)
+
+```yaml
+spring:
+  ai:
+    openai:
+      base-url: http://localhost:11434    # Ollama 服务地址
+      chat:
+        options:
+          model: gpt-oss:120b-cloud       # 当前模型
+          temperature: 0.7                # 生成温度
+```
+
+**支持模型**（需在 Ollama 中预先拉取）：
+- `gpt-oss:120b-cloud` - 默认模型
+- `kimi-k2.5:cloud` - Kimi 模型
+- `gemma4:e2b` - Google Gemma 模型
+
+## 🎬 架构图
+
+```
+┌─────────────┐     ┌──────────────────┐     ┌─────────────────┐
+│   Client    │────▶│ ChatController  │────▶│  ChatClient     │
+│  (HTTP)     │     │  (Spring MVC)    │     │  (Spring AI)    │
+└─────────────┘     └──────────────────┘     └────────┬────────┘
+                                                      │
+                                                      ▼
+                                            ┌─────────────────┐
+                                            │  Ollama/OpenAI  │
+                                            │  (LLM Provider) │
+                                            └─────────────────┘
+```
+
+## 📄 预留功能
+
+以下依赖已集成，可按需启用：
+
+- 🔍 **Milvus 向量数据库** - RAG 语义搜索
+- 📔 **PDF 文档解析** - 文档上传与处理
+- 🗨️ **Embedding 服务** - 文本向量化
+
+## 👷 已知限制
+
+1. 暂无对话历史持久化
+2. 暂未实现请求频率限制
+3. JUnit 版本较旧（3.8.1），建议升级至 JUnit 5
+
+## 📖 待办事项
+
+- [ ] 添加全局异常处理
+- [ ] 实现 RAG 文档问答
+- [ ] 对话历史存储
+- [ ] 动态模型切换 API
+- [ ] Docker 部署支持
+- [ ] 单元测试完善
+
+## 📤 更新日志
+
+### v1.0.0 (2026-04-17)
+- 🎉 初始版本发布
+- 支持流式 AI 对话
+- Markdown 渲染与代码高亮
+- 深色主题 Web 界面
+
+## 📗 License
+
+MIT © 2026 Spring AI Demo
+
+---
+
+🚀 **Made with Spring AI**
--- a/pom.xml
+++ b/pom.xml
@ -0,0 +1,118 @@
+<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
+  <modelVersion>4.0.0</modelVersion>
+
+  <groupId>org.example</groupId>
+  <artifactId>springAiDemo</artifactId>
+  <version>1.0-SNAPSHOT</version>
+  <packaging>jar</packaging>
+
+  <name>springAiDemo</name>
+  <url>http://maven.apache.org</url>
+
+  <parent>
+    <groupId>org.springframework.boot</groupId>
+    <artifactId>spring-boot-starter-parent</artifactId>
+    <version>3.2.0</version>
+    <relativePath/>
+  </parent>
+  <properties>
+    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
+  </properties>
+
+  <dependencies>
+    <!-- spring web 依赖 -->
+    <dependency>
+      <groupId>org.springframework.boot</groupId>
+      <artifactId>spring-boot-starter-web</artifactId>
+    </dependency>
+
+    <!--Spring AI Core -->
+    <dependency>
+      <groupId>org.springframework.ai</groupId>
+      <artifactId>spring-ai-openai-spring-boot-starter</artifactId>
+    </dependency>
+<!--    <dependency>-->
+<!--      <groupId>org.springframework.ai</groupId>-->
+<!--      <artifactId>spring-ai-ollama-spring-boot-starter</artifactId>-->
+<!--    </dependency>-->
+    <!--spring web 流式接口依赖 -->
+    <dependency>
+      <groupId>org.springframework.boot</groupId>
+      <artifactId>spring-boot-starter-webflux</artifactId>
+    </dependency>
+
+    <!--引入milvus和spring ai的集成包&ndash;&gt;-->
+    <dependency>
+      <groupId>org.springframework.ai</groupId>
+      <artifactId>spring-ai-milvus-store-spring-boot-starter</artifactId>
+    </dependency>
+
+<!--    &lt;!&ndash; milvus客户端 &ndash;&gt;-->
+<!--    <dependency>-->
+<!--      <groupId>io.milvus</groupId>-->
+<!--      <artifactId>milvus-sdk-java</artifactId>-->
+<!--      <version>2.3.4</version>-->
+<!--    </dependency>-->
+
+
+    <!-- spring中用于校验的包 -->
+    <dependency>
+      <groupId>org.springframework.boot</groupId>
+      <artifactId>spring-boot-starter-validation</artifactId>
+    </dependency>
+
+
+    <!--  增加处理pdf的相关依赖      -->
+    <dependency>
+      <groupId>org.apache.pdfbox</groupId>
+      <artifactId>pdfbox</artifactId>
+      <version>2.0.29</version>
+    </dependency>
+    <dependency>
+      <groupId>commons-fileupload</groupId>
+      <artifactId>commons-fileupload</artifactId>
+      <version>1.5</version>
+    </dependency>
+
+    <dependency>
+      <groupId>org.projectlombok</groupId>
+      <artifactId>lombok</artifactId>
+      <optional>true</optional>
+    </dependency>
+
+
+    <dependency>
+      <groupId>junit</groupId>
+      <artifactId>junit</artifactId>
+      <version>3.8.1</version>
+      <scope>test</scope>
+    </dependency>
+  </dependencies>
+
+
+  <dependencyManagement>
+    <dependencies>
+      <dependency>
+        <groupId>org.springframework.ai</groupId>
+        <artifactId>spring-ai-bom</artifactId>
+        <version>1.0.0-M3</version>
+        <type>pom</type>
+        <scope>import</scope>
+      </dependency>
+    </dependencies>
+  </dependencyManagement>
+
+  <repositories>
+    <repository>
+      <id>spring-milestones</id>
+      <name>Spring Milestones</name>
+      <url>https://repo.spring.io/milestone</url>
+      <snapshots>
+        <enabled>false</enabled>
+      </snapshots>
+    </repository>
+  </repositories>
+
+</project>
+
--- a/src/main/java/com/demo/MyApplication.java
+++ b/src/main/java/com/demo/MyApplication.java
@ -0,0 +1,10 @@
+package com.demo;
+
+import org.springframework.boot.SpringApplication;
+import org.springframework.boot.autoconfigure.SpringBootApplication;
+@SpringBootApplication
+public class MyApplication {
+    public static void main(String[] args) {
+        SpringApplication.run(MyApplication.class, args);
+    }
+}
--- a/src/main/java/com/demo/controller/ChatController.java
+++ b/src/main/java/com/demo/controller/ChatController.java
@ -0,0 +1,49 @@
+package com.demo.controller;
+
+import org.springframework.ai.chat.client.ChatClient;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RequestParam;
+import org.springframework.web.bind.annotation.RestController;
+import reactor.core.publisher.Flux;
+
+@RestController
+@RequestMapping("/api/chat")
+public class ChatController {
+
+    private final ChatClient chatClient;
+
+    public ChatController(ChatClient.Builder chatClientBuilder) {
+        this.chatClient = chatClientBuilder.build();
+    }
+
+    @GetMapping("/test")
+    public String test(){
+        return "hello world";
+    }
+
+    @GetMapping("/ai")
+    public String ai(@RequestParam(value = "msg",defaultValue = "你是谁")String msg) {
+        return this.chatClient
+                .prompt()
+                .user(msg)
+                .call()
+                .content();
+    }
+
+    /**
+     * 流式的聊天接口，要注意如果中文有乱码，就是编码得问题，需要添加produces = "text/html;charset=UTF-8
+     * @param msg
+     * @return
+     */
+    @GetMapping(value = "/ai/stream",produces = "text/html;charset=UTF-8")
+    public Flux<String> aistream(@RequestParam(value = "msg",defaultValue = "你是谁")String msg) {
+        return this.chatClient
+                .prompt()
+                .user(msg)
+                .stream()
+                .content();
+    }
+
+}
+
--- a/src/main/resources/application.yaml
+++ b/src/main/resources/application.yaml
@ -0,0 +1,29 @@
+server:
+  port: 8080
+
+spring:
+  ai:
+    openai:
+      api-key: ollama
+      base-url: http://localhost:11434
+      chat:
+        api-key: ollama
+        base-url: http://localhost:11434
+        options:
+          model: gpt-oss:120b-cloud
+#          model: kimi-k2.5:cloud
+#          model: gemma4:e2b
+#          max-tokens: 10000
+          temperature: 0.7
+#      embedding:
+#        api-key: ollama
+#        base-url: http://localhost:11434
+
+#spring:
+#  ai:
+#    ollama:
+#      base-url: http://localhost:11434
+#      chat:
+#        options:
+#          model: gemma4:e2b
+#          temperature: 0.7
--- a/src/main/resources/static/css/style.css
+++ b/src/main/resources/static/css/style.css
@ -0,0 +1,320 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+:root {
+    --primary: #6366f1;
+    --primary-hover: #4f46e5;
+    --bg-dark: #0f172a;
+    --bg-card: #1e293b;
+    --bg-input: #334155;
+    --text-primary: #f1f5f9;
+    --text-secondary: #94a3b8;
+    --border: #334155;
+    --user-bubble: #6366f1;
+    --ai-bubble: #334155;
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    background: var(--bg-dark);
+    color: var(--text-primary);
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.container {
+    width: 100%;
+    max-width: 800px;
+    height: 100vh;
+    max-height: 900px;
+    display: flex;
+    flex-direction: column;
+    padding: 20px;
+}
+
+.header {
+    text-align: center;
+    padding: 20px 0;
+}
+
+.header h1 {
+    font-size: 28px;
+    font-weight: 700;
+    background: linear-gradient(135deg, #6366f1, #a855f7);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+.subtitle {
+    color: var(--text-secondary);
+    font-size: 14px;
+    margin-top: 4px;
+}
+
+.chat-container {
+    flex: 1;
+    overflow-y: auto;
+    padding: 20px 0;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.welcome-message, .message {
+    display: flex;
+    gap: 12px;
+    animation: fadeIn 0.3s ease;
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+.message.user {
+    flex-direction: row-reverse;
+}
+
+.message-content {
+    max-width: 70%;
+    padding: 12px 16px;
+    border-radius: 16px;
+    line-height: 1.5;
+    font-size: 15px;
+}
+
+.ai-avatar {
+    width: 36px;
+    height: 36px;
+    background: linear-gradient(135deg, #6366f1, #a855f7);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+}
+
+.ai-avatar svg {
+    width: 20px;
+    height: 20px;
+    color: white;
+}
+
+.user-avatar {
+    width: 36px;
+    height: 36px;
+    background: var(--bg-input);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+}
+
+.user-avatar svg {
+    width: 18px;
+    height: 18px;
+    color: var(--text-secondary);
+}
+
+.message.user .message-content {
+    background: var(--user-bubble);
+    border-bottom-right-radius: 4px;
+}
+
+.message.ai .message-content {
+    background: var(--ai-bubble);
+    border-bottom-left-radius: 4px;
+}
+
+.input-container {
+    padding: 16px 0;
+    border-top: 1px solid var(--border);
+}
+
+.input-wrapper {
+    display: flex;
+    gap: 12px;
+    background: var(--bg-card);
+    border-radius: 24px;
+    padding: 6px;
+    border: 1px solid var(--border);
+    transition: border-color 0.2s;
+}
+
+.input-wrapper:focus-within {
+    border-color: var(--primary);
+}
+
+#messageInput {
+    flex: 1;
+    background: transparent;
+    border: none;
+    padding: 12px 16px;
+    font-size: 15px;
+    color: var(--text-primary);
+    outline: none;
+}
+
+#messageInput::placeholder {
+    color: var(--text-secondary);
+}
+
+.send-btn {
+    width: 44px;
+    height: 44px;
+    background: var(--primary);
+    border: none;
+    border-radius: 50%;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background 0.2s, transform 0.15s;
+    flex-shrink: 0;
+}
+
+.send-btn:hover {
+    background: var(--primary-hover);
+}
+
+.send-btn:active {
+    transform: scale(0.95);
+}
+
+.send-btn:disabled {
+    background: var(--bg-input);
+    cursor: not-allowed;
+    transform: none;
+}
+
+.send-btn svg {
+    width: 20px;
+    height: 20px;
+    color: white;
+}
+
+.stream-indicator {
+    display: none;
+    align-items: center;
+    gap: 8px;
+    padding: 12px 16px;
+    color: var(--text-secondary);
+    font-size: 13px;
+}
+
+.stream-indicator.active {
+    display: flex;
+}
+
+.dot {
+    width: 6px;
+    height: 6px;
+    background: var(--primary);
+    border-radius: 50%;
+    animation: bounce 1.4s infinite ease-in-out both;
+}
+
+.dot:nth-child(1) { animation-delay: -0.32s; }
+.dot:nth-child(2) { animation-delay: -0.16s; }
+
+@keyframes bounce {
+    0%, 80%, 100% { transform: scale(0); }
+    40% { transform: scale(1); }
+}
+
+::-webkit-scrollbar {
+    width: 6px;
+}
+
+::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--border);
+    border-radius: 3px;
+}
+
+.message-content {
+    word-wrap: break-word;
+}
+
+.message-content pre {
+    background: #0d1117;
+    border-radius: 8px;
+    padding: 12px;
+    margin: 8px 0;
+    overflow-x: auto;
+    font-size: 13px;
+}
+
+.message-content code {
+    background: #0d1117;
+    padding: 2px 6px;
+    border-radius: 4px;
+    font-family: 'Fira Code', Consolas, monospace;
+    font-size: 13px;
+}
+
+.message-content pre code {
+    background: transparent;
+    padding: 0;
+}
+
+.message-content p {
+    margin-bottom: 8px;
+}
+
+.message-content p:last-child {
+    margin-bottom: 0;
+}
+
+.message-content ul, .message-content ol {
+    padding-left: 20px;
+    margin: 8px 0;
+}
+
+.message-content blockquote {
+    border-left: 3px solid var(--primary);
+    padding-left: 12px;
+    margin: 8px 0;
+    color: var(--text-secondary);
+}
+
+.message-content a {
+    color: #818cf8;
+    text-decoration: none;
+}
+
+.message-content a:hover {
+    text-decoration: underline;
+}
+
+.message-content h1, .message-content h2, .message-content h3,
+.message-content h4, .message-content h5, .message-content h6 {
+    margin: 12px 0 8px;
+    font-weight: 600;
+}
+
+.message-content table {
+    border-collapse: collapse;
+    margin: 8px 0;
+    width: 100%;
+}
+
+.message-content th, .message-content td {
+    border: 1px solid var(--border);
+    padding: 6px 10px;
+    text-align: left;
+}
+
+.message-content th {
+    background: var(--bg-input);
+}
--- a/src/main/resources/static/index.html
+++ b/src/main/resources/static/index.html
@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Spring AI Chat</title>
+    <link rel="stylesheet" href="css/style.css">
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/github-dark.min.css">
+    <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/highlight.min.js"></script>
+</head>
+<script>
+    marked.setOptions({
+        highlight: function(code, lang) {
+            if (lang && hljs.getLanguage(lang)) {
+                return hljs.highlight(code, { language: lang }).value;
+            }
+            return hljs.highlightAuto(code).value;
+        }
+    });
+</script>
+<body>
+    <div class="container">
+        <header class="header">
+            <h1>Spring AI Chat</h1>
+            <p class="subtitle">基于 Spring AI 的智能对话助手</p>
+        </header>
+
+        <div class="chat-container" id="chatContainer">
+        </div>
+
+        <div class="input-container">
+            <div class="input-wrapper">
+                <input
+                    type="text"
+                    id="messageInput"
+                    placeholder="输入您的问题..."
+                    autocomplete="off"
+                >
+                <button id="sendBtn" class="send-btn">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z"/>
+                    </svg>
+                </button>
+            </div>
+            <div class="stream-indicator" id="streamIndicator">
+                <span class="dot"></span>
+                <span class="dot"></span>
+                <span class="dot"></span>
+                AI 正在思考中...
+            </div>
+        </div>
+    </div>
+
+    <script src="js/app.js"></script>
+</body>
+</html>
--- a/src/main/resources/static/js/app.js
+++ b/src/main/resources/static/js/app.js
@ -0,0 +1,86 @@
+const chatContainer = document.getElementById('chatContainer');
+const messageInput = document.getElementById('messageInput');
+const sendBtn = document.getElementById('sendBtn');
+const streamIndicator = document.getElementById('streamIndicator');
+
+let isStreaming = false;
+
+messageInput.addEventListener('keypress', (e) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        sendMessage();
+    }
+});
+
+sendBtn.addEventListener('click', sendMessage);
+
+async function sendMessage() {
+    const message = messageInput.value.trim();
+    if (!message || isStreaming) return;
+
+    addMessage(message, 'user');
+    messageInput.value = '';
+    isStreaming = true;
+    sendBtn.disabled = true;
+    streamIndicator.classList.add('active');
+
+    const aiMessageEl = addMessage('', 'ai');
+
+    try {
+        const response = await fetch(`/api/chat/ai/stream?msg=${encodeURIComponent(message)}`);
+
+        const reader = response.body.getReader();
+        const decoder = new TextDecoder();
+        let result = '';
+
+        while (true) {
+            const { done, value } = await reader.read();
+            if (done) break;
+            const chunk = decoder.decode(value);
+            result += chunk;
+            aiMessageEl.querySelector('.message-content').innerHTML = marked.parse(result);
+            chatContainer.scrollTop = chatContainer.scrollHeight;
+        }
+    } catch (error) {
+        aiMessageEl.querySelector('.message-content').textContent = '抱歉，发生了错误: ' + error.message;
+    } finally {
+        isStreaming = false;
+        sendBtn.disabled = false;
+        streamIndicator.classList.remove('active');
+    }
+}
+
+function addMessage(text, type) {
+    const messageDiv = document.createElement('div');
+    messageDiv.className = `message ${type}`;
+
+    const avatar = type === 'ai'
+        ? `<div class="ai-avatar">
+             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+               <path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 18a8 8 0 1 1 8-8 8 8 0 0 1-8 8z"/>
+               <circle cx="12" cy="12" r="3"/>
+               <path d="M12 2v4m0 12v4M2 12h4m12 0h4"/>
+             </svg>
+           </div>`
+        : `<div class="user-avatar">
+             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+               <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
+               <circle cx="12" cy="7" r="4"/>
+             </svg>
+           </div>`;
+
+    messageDiv.innerHTML = `
+        ${avatar}
+        <div class="message-content"><p>${escapeHtml(text)}</p></div>
+    `;
+
+    chatContainer.appendChild(messageDiv);
+    chatContainer.scrollTop = chatContainer.scrollHeight;
+    return messageDiv;
+}
+
+function escapeHtml(text) {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+}