lan-chat-interface

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) - 实时消息推送

安装

npm install lan-chat-interface

使用示例

基本聊天界面（带 SSE 支持）

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

const App: React.FC = () => {
  return (
    <div className="h-screen w-full">
      <ChatInterface
        apiRoute="https://your-sse-endpoint.com/chat"
        method="POST"
        title="AI 聊天助手"
        initialMessage="你好，我是 AI 助手，有什么可以帮你？"
      />
    </div>
  );
};

export default App;

带历史记录的聊天界面

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 (
    <div className="h-screen w-full">
      <ChatInterface
        apiRoute="https://your-sse-endpoint.com/chat"
        title="AI 聊天助手"
        initialHistory={initialHistory}
      />
    </div>
  );
};

export default App;

使用自定义请求体构建函数

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 (
    <div className="h-screen w-full">
      <ChatInterface
        apiRoute="https://your-sse-endpoint.com/chat"
        method="POST"
        title="AI 聊天助手"
        initialMessage="你好，我是 AI 助手，有什么可以帮你？"
        bodyBuilder={customBodyBuilder}
      />
    </div>
  );
};

export default App;

使用自定义头像、名称和占位符

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

const App: React.FC = () => {
  return (
    <div className="h-screen w-full">
      <ChatInterface
        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="请输入您的问题..."
      />
    </div>
  );
};

export default App;

使用禁用状态

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 (
    <div className="h-screen w-full">
      <div className="p-4 bg-gray-100">
        <button
          onClick={() => setIsDisabled(!isDisabled)}
          className="px-4 py-2 bg-blue-500 text-white rounded"
        >
          {isDisabled ? "启用输入" : "禁用输入"}
        </button>
      </div>
      <ChatInterface
        apiRoute="https://your-sse-endpoint.com/chat"
        method="POST"
        title="AI 聊天助手"
        initialMessage="你好，我是 AI 助手，有什么可以帮你？"
        disabled={isDisabled}
      />
    </div>
  );
};

export default App;

组件说明

ChatInterface

主聊天界面组件，包含消息列表和输入区域，内部集成了 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	输入框占位符（可选，默认："输入消息..."）

Message

单条消息组件。

属性

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

CodeBlock

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

属性

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

Input

聊天输入框组件。

属性

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

Markdown

Markdown 渲染组件。

属性

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

自定义 Hooks

useChatSSE

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

说明

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

useCopyToClipboard

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

返回值

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

开发和构建

安装依赖

npm install

开发模式

npm run dev

构建

npm run build

类型检查

npm run type-check

类型定义

Message

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

BodyBuilderFn

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

许可证

MIT