Ai-chat-react NPM

React AI Chat Component

npm.io npm.io

这是一个用于与大模型进行聊天交互的 React 组件。该组件允许用户输入文本，将其发送到大模型进行处理，并显示模型的回复。它适用于创建交互式聊天界面，可以轻松集成到任何 React 应用中。需要与 Vercel AI SDK 中的 useChat 钩子一起食用。

功能特点

纯 ui 组件，状态和逻辑都在 Vercel AI SDK 中的 useChat 钩子中
cssinjs 组件由 styled-components 组成，使用者可通过 styled-components 和 utils.getClassName 轻松定制组件内所有样式
可插拔设计，通过 utils.setComponent 轻松更换某个内部组件
可通过 utils.setSlot 在预先定义好的地方插入自己的组件

开始使用

安装

首先，确保项目中已经安装了 React 和 ai。然后，将此组件添加到你的项目中

npm install ai-chat-react

或者，如果你使用 yarn

yarn add ai-chat-react

示例代码

下面是一个如何在你的 React 应用中使用 AIChatComponent 的简单示例：

import React from 'react';
import AIChatComponent from 'ai-chat-react'
import { useChat } from 'ai/react';

const Index = () => {
    const chat = useChat();
    return <AIChatComponent {...chat}/>
};

export default Index;

结合使用 styled-compoennt 和 utils/getClassName 定制样式的示例：

import React from 'react';
import AIChatComponent， { utils } from 'ai-chat-react'
import styled from 'styled-components';
import { useChat } from 'ai/react';

const ChatContainer = styled.div`
    .${utils.getClassName('SendButton')} {
        color: red;
    }
`
const Index = () => {
    const chat = useChat();
    return <ChatContainer>
        <AIChatComponent {...chat}/>
    </ChatContainer>
};

export default Index;

使用 utils/setComponent 更换内部组件的示例：

import React from 'react';
import AIChatComponent, {utils} from 'ai-chat-react'
import { useChat } from 'ai/react';
utils.setComponent('Avatar', () => <span>A</span>)

const Index = () => {
    const chat = useChat();
    return <AIChatComponent {...chat}/>
};

export default Index;

使用 utils/setSlot 添加功能的示例：

import React from 'react';
import AIChatComponent, {utils} from 'ai-chat-react'
import { useChat } from 'ai/react';
utils.setSlot('BetweenMessageBoxAndChatInputBox', ({isLoading}) => isLoading ? (<span>loading...</span>)) : null

const Index = () => {
    const chat = useChat();
    return <AIChatComponent {...chat}/>
};

export default Index;

在 nextjs 中的示例：

import React, { memo } from 'react';
import dynamic from 'next/dynamic';
import styled from 'styled-components';
import { useChat } from 'ai/react';

// 因为是异步渲染，所以使用 utils 功能也在 dynamic 中做，在外面使用 utils getClassname 功能会因为还没渲染导致拿不到对应的 classname
const ChatgptComponent = dynamic(() => import("ai-chat-react").then(C => {
  C.utils.setSlot('BetweenMessageBoxAndChatInputBox', () => (<span style={{ color: 'black' }}>BetweenMessageBoxAndChatInputBox</span>));
  const ModalContent = styled.div`
    position: fixed;
    right: 70px;
    bottom: 50px;
    background-color: #fff;
    padding: 20px 10px 30px 10px;
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1001;
    width: 500px;
    height: calc(100vh - 100px);
    .${C.utils.getClassName('AvatarContainer')} {
        color: #333;
    }
`;
const ModalContentTitle = styled.div`
  color: #333;
  padding-bottom: 4px;
  margin-bottom: 4px;
  border-bottom: 1px solid #d6d5d5;
  font-weight: bold;
`;
  return ({...chat}: React.ComponentProps<typeof C.default>) => (
    <ModalContent>
        <ModalContentTitle>与 qianjie 聊天</ModalContentTitle>
        {typeof document !== "undefined" && (
          <C.default {...chat}/>
        )}
    </ModalContent>
  );
}), {ssr: false});
const MemoChatgptComponent = memo(ChatgptComponent);

const Index = () => {
    const chat = useChat();
    return <MemoChatgptComponent {...chat}/>
};

export default Index;