NapCatQQ/napcat.webui/src/pages/dashboard/debug/websocket/index.tsx

import { Button } from '@heroui/button'
import { Card, CardBody } from '@heroui/card'
import { Input } from '@heroui/input'
import { useLocalStorage } from '@uidotdev/usehooks'
import { useCallback, useState } from 'react'
import toast from 'react-hot-toast'

import key from '@/const/key'

import OneBotMessageList from '@/components/onebot/message_list'
import OneBotSendModal from '@/components/onebot/send_modal'
import WSStatus from '@/components/onebot/ws_status'

import { useWebSocketDebug } from '@/hooks/use-websocket-debug'

export default function WSDebug() {
  const url = new URL(window.location.origin)
  url.port = '3001'
  url.protocol = 'ws:'
  const defaultWsUrl = url.href
  const [socketConfig, setSocketConfig] = useLocalStorage(key.wsDebugConfig, {
    url: defaultWsUrl,
    token: ''
  })
  const [inputUrl, setInputUrl] = useState(socketConfig.url)
  const [inputToken, setInputToken] = useState(socketConfig.token)

  const { sendMessage, readyState, FilterMessagesType, filteredMessages } =
    useWebSocketDebug(socketConfig.url, socketConfig.token)

  const handleConnect = useCallback(() => {
    if (!inputUrl.startsWith('ws://') && !inputUrl.startsWith('wss://')) {
      toast.error('WebSocket URL 不合法')
      return
    }
    setSocketConfig({
      url: inputUrl,
      token: inputToken
    })
  }, [inputUrl, inputToken])

  return (
    <>
      <title>Websocket调试 - NapCat WebUI</title>
      <div className="h-[calc(100vh-4rem)] overflow-hidden flex flex-col">
        <Card className="mx-2 mt-2 flex-shrink-0 bg-opacity-50 backdrop-blur-sm">
          <CardBody className="gap-2">
            <div className="grid gap-2 items-center md:grid-cols-5">
              <Input
                className="col-span-2"
                label="WebSocket URL"
                type="text"
                value={inputUrl}
                onChange={(e) => setInputUrl(e.target.value)}
                placeholder="输入 WebSocket URL"
              />
              <Input
                className="col-span-2"
                label="Token"
                type="text"
                value={inputToken}
                onChange={(e) => setInputToken(e.target.value)}
                placeholder="输入 Token"
              />
              <div className="flex-shrink-0 flex gap-2 col-span-2 md:col-span-1">
                <Button
                  color="danger"
                  onPress={handleConnect}
                  size="lg"
                  radius="full"
                  className="w-full md:w-auto"
                >
                  连接
                </Button>
              </div>
            </div>
            <div className="p-2 border border-default-100 bg-content1 bg-opacity-50 rounded-md dark:bg-[rgb(30,30,30)]">
              <div className="grid gap-2 md:grid-cols-5 items-center md:w-fit">
                <WSStatus state={readyState} />
                <div className="md:w-64 max-w-full col-span-2">
                  {FilterMessagesType}
                </div>
                <OneBotSendModal sendMessage={sendMessage} />
              </div>
            </div>
          </CardBody>
        </Card>

        <div className="flex-1 overflow-hidden">
          <OneBotMessageList messages={filteredMessages} />
        </div>
      </div>
    </>
  )
}