用React实现一个类 chatGPT 的交互式问答组件的方法详解

import React from 'react';
import { Chat, useMessage, EMessageType } from './chat';
export default function () {
  const { msgProps } = useMessage(
    (question, lastAnswer) => {
      return new Promise((resolve, reject) => {
        const { content, fileList } = question;
        setTimeout(() => {
          resolve({
            content:
              '\n\n' +
              (lastAnswer ? '## 我又想了一下 \n\n' : '') +
              content?.replace(/吗/g, '呢').replace(/你/g, '我') +
              '\n\n' +
              fileList.map((item) => item.name).join(' ') +
              '\n\n![lena](https://img1.baidu.com/it/u=2041864569,220923158&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=284)'
          });
        }, 2000);
      });
    },
    {
      uploadProps: {
        multiple: true
      },
      defaultMsgs: [
        {
          key: 1,
          type: EMessageType.AI,
          content: '快来和我对话吧',
          renderTools: () => null,
          isAnimation: false
        }
      ]
    }
  );
  return (
      <Chat {...msgProps} />
  );
}

import React, { useState } from 'react';
import { Chat, useMessage, EMessageType, IMessage } from './chat';
export default function () {
  const [options, setOptions] = useState<{ value: string }[]>([]);
  const handleSearch = (value: string) => {
    setOptions(!value ? [] : [{ value }, { value: value + value }, { value: value + value + value }]);
  };
  const { msgProps } = useMessage(
    (question, lastAnswer) => {
      return new Promise((resolve, reject) => {
        const { content } = question;
        setTimeout(() => {
          resolve({
            isAnimation: !!lastAnswer,
            content:
              '\n\n' +
              (lastAnswer ? '## 我又想了一下 \n\n' : '') +
              content?.replace(/吗/g, '呢').replace(/你/g, '我') +
              '\n\n![lena](https://img1.baidu.com/it/u=2041864569,220923158&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=284)'
          });
        }, 2000);
      });
    },
    {
      autoCompleteProps: {
        options,
        onSearch: handleSearch
      }
    }
  );
  return (
      <Chat {...msgProps} />
  );
}

import React from 'react';
import { Chat, useMessage, EMessageType, IMessage } from './chat';
export default function () {
  const { msgProps } = useMessage(
    (question, lastAnswer) => {
      return new Promise((resolve, reject) => {
        const { content } = question;
        setTimeout(() => {
          resolve({
            content:
              '\n\n' +
              (lastAnswer ? '## 我又想了一下 \n\n' : '') +
              content?.replace(/吗/g, '呢').replace(/你/g, '我') +
              '\n\n![lena](https://img1.baidu.com/it/u=2041864569,220923158&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=284)',
            renderTools: (msg: IMessage) => <div>点个赞吧</div>
          });
        }, 2000);
      });
    },
    {
      renderTools: (msg: IMessage) => <div>这里是自定义操作栏</div>,
      defaultMsgs: [
        {
          key: 1,
          type: EMessageType.AI,
          content: '快来和我对话吧',
          renderTools: () => null,
          isAnimation: false
        },
        {
          key: 2,
          type: EMessageType.AI,
          content: '支持每条消息独立设置操作栏',
          renderTools: (msg: IMessage) => <div>这里是消息独立操作栏</div>,
          isAnimation: false
        }
      ]
    }
  );
  return (
    <BixiProvider locale={enUS}>
      <Chat {...msgProps} />
    </BixiProvider>
  );
}

import React from 'react';
import { Chat, useMessage, EMessageType, IMessage } from './chat';
export default function () {
  const { msgProps } = useMessage(
    (question, lastAnswer) => {
      return new Promise((resolve, reject) => {
        const { content } = question;
        setTimeout(() => {
          resolve({
            content:
              '\n\n' +
              (lastAnswer ? '## 我又想了一下 \n\n' : '') +
              content?.replace(/吗/g, '呢').replace(/你/g, '我')
          });
        }, 2000);
      });
    },
    {
      renderAvatar: (msg: IMessage) => <>{msg.type === EMessageType.AI ? '人工智障' : '大帅比'}</>,
      defaultMsgs: [
        {
          key: 1,
          type: EMessageType.AI,
          content: '快来和我对话吧',
          renderTools: () => null,
          isAnimation: false
        },
        {
          key: 2,
          type: EMessageType.Self,
          content: '你真的是人工智能吗',
          isAnimation: false
        },
        {
          key: 3,
          type: EMessageType.AI,
          content: '支持每条消息单独设置头像',
          isAnimation: false
        }
      ]
    }
  );
  return (
      <Chat {...msgProps} />
  );
}

import React from 'react';
import { Chat, useMessage, EMessageType, IMessage } from './chat';
export default function () {
  const { msgProps } = useMessage(
    (question, lastAnswer) => {
      return new Promise((resolve, reject) => {
        const { content } = question;
        setTimeout(() => {
          resolve({
            content:
              '\n\n' +
              (lastAnswer ? '## 我又想了一下 \n\n' : '') +
              content?.replace(/吗/g, '呢').replace(/你/g, '我')
          });
        }, 2000);
      });
    },
    {
      recommendList: ['标题生成', '文章续写', '文章润色', '文章大纲', '朋友圈文案', '活动方案', '翻译', '演讲稿'],
      commonUseList: ['标题生成', '朋友圈文案'],
    }
  );
  return (
      <Chat {...msgProps} />
  );
}

import { useState, useCallback } from 'react';
import { IMessage, IChatProps, EMessageType, IQuestion } from './model';
import { uniqueId } from 'lodash-es';
type IUseMessageOption = Omit<IChatProps, 'onSend' | 'onRefresh' | 'loading' | 'messages'> & {
  defaultMsgs: IMessage[];
};
type IService = (msg: IQuestion, lastAnswer?: IMessage) => Promise<IMessage>;
export function useMessage(
  getMsg: IService,
  { defaultMsgs, ...props }: IUseMessageOption
): {
  msgProps: IChatProps;
} {
  const [messageList, setMessageList] = useState<IMessage[]>(defaultMsgs || []);
  const [loading, setLoading] = useState(false);
  const onRefresh = useCallback(
    (item: IMessage) => {
      const index = messageList.findIndex((msg) => msg.key === item.key);
      if (index < 1) return;
      const lastQuestion = messageList
        .slice(0, index)
        .reverse()
        .find((msg) => msg.type === EMessageType.Self);
      if (!lastQuestion) return;
      setLoading(true);
      getMsg(lastQuestion, messageList[index]).then((res) => {
        setLoading(false);
        const key = `${EMessageType.AI}-${uniqueId()}`;
        messageList[index] = { ...res, key, type: EMessageType.AI };
        setMessageList([...messageList]);
      });
    },
    [getMsg, messageList]
  );
  const onSend = useCallback(
    (msg: IQuestion) => {
      setLoading(true);
      setMessageList((list) => list.concat({ ...msg, key: `${EMessageType.Self}-${uniqueId()}`, type: EMessageType.Self }));
      getMsg(msg).then((res) => {
        setLoading(false);
        const key = `${EMessageType.AI}-${uniqueId()}`;
        setMessageList((list) => list.concat({ ...res, key, type: EMessageType.AI }));
      });
    },
    [getMsg]
  );
  return {
    msgProps: {
      messages: messageList,
      onRefresh,
      onSend,
      loading,
      ...props
    }
  };
}