copilot-toolbox-template3344/src/pages/test2/index.tsx

import { cacheGet, getUserInfo } from '@/utils/cacheUtil'
import { LoadingOutlined } from '@ant-design/icons'
import { CopilotKit, useCopilotChatInternal as useCopilotChat } from '@copilotkit/react-core'
import { Flex, Mentions, Spin } from 'antd'
import { useCallback, useState } from 'react'

const Chat: React.FC = () => {
  const [currentAppKey, setCurrentAppKey] = useState<string>('')
  const [newMessage, setNewMessage] = useState('')
  const { messages, sendMessage, setMessages, isLoading, reloadMessages, stopGeneration } = useCopilotChat()
  const callSendMessage = useCallback(
    async (message: string) => {
      await sendMessage({
        id: new Date().getTime() + '',
        role: 'user',
        content: message
      })
    },
    [sendMessage]
  )

  const handleSendMessage = useCallback(() => {
    // 提前存好本次的提问内容，重新生成的话直接从缓存中获取之前的提问内容
    let question: string = newMessage || ''
    const token = cacheGet('token')
    const tenantId = cacheGet('tenantId')
    let conversation_id = ''
    if (messages[1]?.id) {
      conversation_id = messages[1]?.id.split('_')[0]
    }
    const userInfo = getUserInfo()
    const difyJson = {
      inputs: {
        Token: token || '',
        tenantid: tenantId || '',
        query: question
      },
      appKey: currentAppKey,
      files: [],
      user: userInfo?.id || 'anonymous',
      query: question,
      conversation_id
    }
    // 设置好目前状态下的聊天列表数据，包含之前已经结束的沟通内容，以及本次用户的提问，本次AI的回答占位
    callSendMessage(JSON.stringify(difyJson))
    setNewMessage('')
  }, [callSendMessage, newMessage, currentAppKey])

  const handleParse = (jsonStr: string) => {
    let res = ''
    try {
      const parsed = JSON.parse(jsonStr)
      res = parsed?.query
    } catch (e) {}
    return res
  }

  // 换行
  const handleNewline = () => {
    setNewMessage(prevValue => `${prevValue}\n`)
  }
  const handleKeyDown = async (e: any) => {
    e.stopPropagation()
    const res = await cacheGet('sendMessage')
    if (e.key === 'Enter') {
      if (e.ctrlKey) {
        if (newMessage) {
          if (res === 'ctrlEnter') {
            handleSendMessage()
          } else {
            handleNewline()
          }
        }
      } else {
        if (res === 'Enter' || !res) {
          if (newMessage) {
            handleSendMessage()
          } else {
            setNewMessage('')
          }
        }
      }
    }
  }

  return (
    <>
      {messages.map((message, index) => {
        const userMessageId = message.id
        // 实际的会话消息
        return (
          <Flex key={index} vertical data-message-id={userMessageId}>
            {/* 用户提问 */}
            {message.role === 'user' && <Flex key={message.id}>{handleParse(message.content as string) ?? ''}</Flex>}

            {message.role === 'assistant' && (
              <div>
                <div
                  style={{
                    width: 'calc(100% - 20px)',
                    marginLeft: '20px'
                  }}
                >
                  <Flex>
                    {isLoading && !message.content && index === messages.length - 1 && (
                      <Flex>
                        <Spin indicator={<LoadingOutlined />} />
                        <span>检索中</span>
                      </Flex>
                    )}
                    {message.content ?? ''}
                  </Flex>
                  {message?.generativeUI?.()}
                </div>
              </div>
            )}
          </Flex>
        )
      })}
      <div className='p-4'>
        <Mentions
          autoFocus
          open={false}
          placeholder='请输入内容'
          rows={4}
          value={newMessage}
          maxLength={10000}
          onKeyDown={handleKeyDown}
          options={[]}
          onInput={e => {
            const value = (e.target as HTMLInputElement).value
            // 检查内容是否只包含空格或回车符
            if (/^\s*$/.test(value)) {
              setNewMessage('') // 如果只包含空格或回车符，清空输入框
            } else {
              setNewMessage(value) // 否则更新输入内容
            }
          }}
        />
      </div>
    </>
  )
}

const Test2: React.FC = () => {
  return (
    <CopilotKit
      runtimeUrl='/agui-api/copilotkit/dify'
      showDevConsole={false}
      // publicApiKey={'ck_pub_cc922145a5da9b8513bc10df473cd6f7'}
      agent='agentic_chat_metadata'
    >
      <Chat />
    </CopilotKit>
  )
}

export default Test2