HarmonyOS鸿蒙Next中Chat组件如何接入dify知识库模型

HarmonyOS鸿蒙Next中Chat组件如何接入dify知识库模型

//API版
import { Chat, ChatRole, ChatMessage } from '@changwei/chatui'
import {
  ChatCompletionSystemMessageParam,
  ChatCompletionUserMessageParam,
  IChatCompletionMessageParam,
  ChatCompletionChunk,
  OpenAI,
  ChatCompletion
} from '@changwei/openai'

@Component
struct ChatCompletionPage2 {
  private openaiClient: OpenAI = new OpenAI(
    "API-KEY",
    undefined,
    "Base URL"
  )
  private messages: IChatCompletionMessageParam[] = [new ChatCompletionSystemMessageParam("You are a helpful assistant.")]

  aboutToAppear() {
    // 初始化操作
  }

  build() {
    Row() {
      Column() {
        Chat({
          title: '',
          needTitleBar: true,
          welcomeMessage: '',
          userMessageBackgroundColor: Color.White,
          userMessageTextColor: Color.Black,
          botAvatar: $r('app.media.tb'),
          messageFontSize: 20,
          useMarkdown: true,
          needBackButton: false,
          submitButtonText: '发送',
          inputTextPlaceHolder: '请输入内容',
          inputTextColor: Color.Black,
          onSendMessage: (ctl, message) => {
            // 发送用户消息
            ctl.postMessage(new ChatMessage({ role: ChatRole.User, content: message.content }));
            // 显示回复等待动画
            ctl.setTyping(true);

            this.messages.push(
              new ChatCompletionUserMessageParam(message.content, message.name)
            );
            let streamMode = true;

            // 修改后的流式处理部分代码
            this.openaiClient.chat.completions.create({
              messages: this.messages,
              stream: streamMode,
              model: '模型名称'
            }).then(async (response: ChatCompletion | ChatCompletionChunk[] | string) => {
              if (streamMode) {
                let str = response as string;
                str = `[${str.replace(/\s*data\: \[DONE\]\s*/, '').replaceAll(/\s*data:\s*/g, ',').substring(1)}]`
                let chunks: ChatCompletionChunk[] = [];
                try {
                  chunks = JSON.parse(str);
                } catch (e) {
                  chunks = [];
                }
                let output = '';
                const assistantMsg = new ChatMessage({
                  role: ChatRole.Assistant,
                  content: ''
                });

                for (const chunk of chunks) {
                  const content = chunk.choices?.[0]?.delta?.content;
                  if (content) {
                    output += content;
                    assistantMsg.content = output;
                  }
                }
                ctl.postMessage(assistantMsg, true); // 更新消息内容
                ctl.setTyping(false);
              } else {
                const resp = response as ChatCompletion;
                ctl.postMessage(new ChatMessage({
                  role: ChatRole.Assistant,
                  content: Array.isArray(resp.choices[0]?.message?.content)
                    ? resp.choices[0].message.content.join(' ')
                    : resp.choices[0]?.message?.content ?? ''
                }));
                ctl.setTyping(false);
              }
            }).catch((error: Error) => {
              console.error('API Error:', error.message);
              ctl.setTyping(false);
            });
          }
        })
      }
    }
    .height('100%')
  }
}

export default ChatCompletionPage2