lan-chat-interface

一个功能丰富、易于使用的聊天界面组件库，基于 React 和 TypeScript 构建，支持实时聊天、Markdown 渲染、代码高亮等功能。

功能特点

- 📱 响应式设计：适配各种屏幕尺寸
- 💬 实时聊天：支持 Server-Sent Events (SSE) 实时消息推送
- 📝 Markdown 支持：渲染富文本消息内容
- 💻 代码高亮：支持多种编程语言的代码块高亮显示
- 📋 复制功能：一键复制代码块内容
- 🎨 自定义样式：基于 Tailwind CSS，易于定制主题
- 🔧 类型安全：完整的 TypeScript 类型定义

技术栈

- React - UI 框架
- TypeScript - 类型安全的 JavaScript
- Tailwind CSS - 实用优先的 CSS 框架
- tsup - TypeScript 构建工具
- react-markdown - Markdown 解析器
- react-syntax-highlighter - 代码高亮库
- Server-Sent Events (SSE) - 实时消息推送

安装

``bash npm install lan-chat-interface`

`使用示例`

`$3`

`tsx import React from "react"; import { ChatInterface } from "lan-chat-interface"; import "lan-chat-interface/styles.css";

const App: React.FC = () => { return (


              apiRoute="https://your-sse-endpoint.com/chat"
        method="POST"
        title="AI 聊天助手"
        initialMessage="你好，我是 AI 助手，有什么可以帮你？"
      />


  );
};

export default App;`

`$3`

`tsx import React from "react"; import { ChatInterface } from "lan-chat-interface"; import "lan-chat-interface/styles.css"; import { Message } from "lan-chat-interface/types";

const App: React.FC = () => { // 历史消息记录 const initialHistory: Message[] = [ { id: "1", role: "user", content: "你好，介绍一下自己", }, { id: "2", role: "assistant", content: "你好！我是一个基于人工智能的聊天助手，很高兴为您服务。", }, ];

return (


              apiRoute="https://your-sse-endpoint.com/chat"
        title="AI 聊天助手"
        initialHistory={initialHistory}
      />


  );
};

export default App;`

`$3`

`tsx import React from "react"; import { ChatInterface } from "lan-chat-interface"; import "lan-chat-interface/styles.css"; import { BodyBuilderFn } from "lan-chat-interface/types";

const App: React.FC = () => { // 自定义请求体构建函数 const customBodyBuilder: BodyBuilderFn = (payload) => { return { prompt: payload.currentMessage, conversation_history: payload.history.map((msg) => ({ role: msg.role, content: msg.content, })), temperature: 0.7, max_tokens: 500, }; };

return (


              apiRoute="https://your-sse-endpoint.com/chat"
        method="POST"
        title="AI 聊天助手"
        initialMessage="你好，我是 AI 助手，有什么可以帮你？"
        bodyBuilder={customBodyBuilder}
      />


  );
};

export default App;`

`$3`

`tsx import React from "react"; import { ChatInterface } from "lan-chat-interface"; import "lan-chat-interface/styles.css";

const App: React.FC = () => { return (


              apiRoute="https://your-sse-endpoint.com/chat"
        method="POST"
        title="我的专属 AI 助手"
        initialMessage="你好，我是你的专属 AI 助手，有什么可以帮你？"
        userAvatar="https://example.com/user-avatar.png"
        aiAvatar="https://example.com/ai-avatar.png"
        userName="用户"
        aiName="AI 助手"
        placeholder="请输入您的问题..."
      />


  );
};

export default App;`

`$3`

`tsx import React, { useState } from "react"; import { ChatInterface } from "lan-chat-interface"; import "lan-chat-interface/styles.css";

const App: React.FC = () => { const [isDisabled, setIsDisabled] = useState(false);

return (


      
                  onClick={() => setIsDisabled(!isDisabled)}
          className="px-4 py-2 bg-blue-500 text-white rounded"
        >
          {isDisabled ? "启用输入" : "禁用输入"}
        
      

              apiRoute="https://your-sse-endpoint.com/chat"
        method="POST"
        title="AI 聊天助手"
        initialMessage="你好，我是 AI 助手，有什么可以帮你？"
        disabled={isDisabled}
      />


  );
};

export default App;`

`组件说明`

`$3`

主聊天界面组件，包含消息列表和输入区域，内部集成了 SSE 实时通信功能。

#### 属性

| 属性名 | 类型 | 描述 | | ---------------- | ----------------- | ----------------------------------------- | |apiRoute | string| SSE 服务器接口地址 | |method | "GET" \| "POST"| 请求方法（默认：GET） | |initialMessage | string| 初始欢迎消息（可选） | |title | string| 聊天窗口标题（可选） | |className | string| 自定义样式类名（可选） | |initialHistory | Message[]| 初始历史消息记录（可选） | |bodyBuilder | BodyBuilderFn| 自定义请求体构建函数（可选） | |userAvatar | string| 用户头像 URL（可选） | |aiAvatar | string| AI 头像 URL（可选） | |userName | string| 用户名称（可选，默认："You"） | |aiName | string| AI 名称（可选，默认："AI Assistant"） | |disabled | boolean| 全局禁用输入（可选，默认：false） | |placeholder | string | 输入框占位符（可选，默认："输入消息..."） |

`$3`

单条消息组件。

#### 属性

| 属性名 | 类型 | 描述 | | ------------ | --------- | ------------------------------------- | |message | Message| 消息对象 | |userAvatar | string| 用户头像 URL（可选） | |aiAvatar | string| AI 头像 URL（可选） | |userName | string| 用户名称（可选，默认："You"） | |aiName | string | AI 名称（可选，默认："AI Assistant"） |

`$3`

代码块组件，支持语法高亮和复制功能。

#### 属性

| 属性名 | 类型 | 描述 | | ---------- | -------- | ---------------- | |code | string| 代码内容 | |language | string | 编程语言（可选） |

`$3`

聊天输入框组件。

#### 属性

| 属性名 | 类型 | 描述 | | ------------- | ----------------------------------------------------- | ----------------------------------- | |value | string| 输入框内容 | |onChange | (e: React.ChangeEvent) => void| 内容变化回调 | |onSend | () => void| 发送按钮点击回调 | |isLoading | boolean| 是否加载中（可选） | |disabled | boolean| 是否禁用输入（可选，默认：false） | |placeholder | string | 占位符（可选，默认："输入消息..."） |

`$3`

Markdown 渲染组件。

#### 属性

| 属性名 | 类型 | 描述 | | --------- | -------- | ------------- | |content | string | Markdown 内容 |

`自定义 Hooks`

`$3`

用于处理 Server-Sent Events 实时聊天的 Hook（内部使用）。

#### 说明

该 Hook 已被 ChatInterface 组件内部集成，通常不需要直接使用。如果需要自定义聊天逻辑，可以查看源代码实现。

`$3`

用于复制文本到剪贴板的 Hook。

#### 返回值

| 返回值 | 类型 | 描述 | | ----------------- | ------------------------------------ | ------------ | |copyToClipboard | (text: string) => Promise| 复制文本函数 | |isCopied | boolean | 是否已复制 |

`开发和构建`

`$3`

`bash npm install`

`$3`

`bash npm run dev`

`$3`

`bash npm run build`

`$3`

`bash npm run type-check`

`类型定义`

`$3`

`typescript interface Message { id: string; role: "user" | "assistant"; content: string; [key: string]: any; }`

`$3`

`typescript type BodyBuilderFn = (payload: { // 当前用户的消息内容 currentMessage: string; // 历史消息（包含id） history: Message[]; }) => any;``

许可证

MIT

lan-chat-interface

一个功能丰富、易于使用的聊天界面组件库，基于 React 和 TypeScript 构建，支持实时聊天、Markdown 渲染、代码高亮等功能。

功能特点

技术栈

安装

``bash npm install lan-chat-interface`

`使用示例`

`$3`

`tsx import React from "react"; import { ChatInterface } from "lan-chat-interface"; import "lan-chat-interface/styles.css";

const App: React.FC = () => { return (


              apiRoute="https://your-sse-endpoint.com/chat"
        method="POST"
        title="AI 聊天助手"
        initialMessage="你好，我是 AI 助手，有什么可以帮你？"
      />


  );
};

export default App;`

`$3`

`tsx import React from "react"; import { ChatInterface } from "lan-chat-interface"; import "lan-chat-interface/styles.css"; import { Message } from "lan-chat-interface/types";

return (


              apiRoute="https://your-sse-endpoint.com/chat"
        title="AI 聊天助手"
        initialHistory={initialHistory}
      />


  );
};

export default App;`

`$3`

`tsx import React from "react"; import { ChatInterface } from "lan-chat-interface"; import "lan-chat-interface/styles.css"; import { BodyBuilderFn } from "lan-chat-interface/types";

return (


              apiRoute="https://your-sse-endpoint.com/chat"
        method="POST"
        title="AI 聊天助手"
        initialMessage="你好，我是 AI 助手，有什么可以帮你？"
        bodyBuilder={customBodyBuilder}
      />


  );
};

export default App;`

`$3`

`tsx import React from "react"; import { ChatInterface } from "lan-chat-interface"; import "lan-chat-interface/styles.css";

const App: React.FC = () => { return (


              apiRoute="https://your-sse-endpoint.com/chat"
        method="POST"
        title="我的专属 AI 助手"
        initialMessage="你好，我是你的专属 AI 助手，有什么可以帮你？"
        userAvatar="https://example.com/user-avatar.png"
        aiAvatar="https://example.com/ai-avatar.png"
        userName="用户"
        aiName="AI 助手"
        placeholder="请输入您的问题..."
      />


  );
};

export default App;`

`$3`

`tsx import React, { useState } from "react"; import { ChatInterface } from "lan-chat-interface"; import "lan-chat-interface/styles.css";

const App: React.FC = () => { const [isDisabled, setIsDisabled] = useState(false);

return (


      
                  onClick={() => setIsDisabled(!isDisabled)}
          className="px-4 py-2 bg-blue-500 text-white rounded"
        >
          {isDisabled ? "启用输入" : "禁用输入"}
        
      

              apiRoute="https://your-sse-endpoint.com/chat"
        method="POST"
        title="AI 聊天助手"
        initialMessage="你好，我是 AI 助手，有什么可以帮你？"
        disabled={isDisabled}
      />


  );
};

export default App;`

`组件说明`

`$3`

主聊天界面组件，包含消息列表和输入区域，内部集成了 SSE 实时通信功能。

#### 属性

`$3`

单条消息组件。

#### 属性

`$3`

代码块组件，支持语法高亮和复制功能。

#### 属性

| 属性名 | 类型 | 描述 | | ---------- | -------- | ---------------- | |code | string| 代码内容 | |language | string | 编程语言（可选） |

`$3`

聊天输入框组件。

#### 属性

`$3`

Markdown 渲染组件。

#### 属性

| 属性名 | 类型 | 描述 | | --------- | -------- | ------------- | |content | string | Markdown 内容 |

`自定义 Hooks`

`$3`

用于处理 Server-Sent Events 实时聊天的 Hook（内部使用）。

#### 说明

该 Hook 已被 ChatInterface 组件内部集成，通常不需要直接使用。如果需要自定义聊天逻辑，可以查看源代码实现。

`$3`

用于复制文本到剪贴板的 Hook。

#### 返回值

`开发和构建`

`$3`

`bash npm install`

`$3`

`bash npm run dev`

`$3`

`bash npm run build`

`$3`

`bash npm run type-check`

`类型定义`

`$3`

`typescript interface Message { id: string; role: "user" | "assistant"; content: string; [key: string]: any; }`

`$3`

`typescript type BodyBuilderFn = (payload: { // 当前用户的消息内容 currentMessage: string; // 历史消息（包含id） history: Message[]; }) => any;``

许可证

MIT