feat: 新版webui

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

@@ -0,0 +1,92 @@
+import { Button } from '@heroui/button'
+import { Card, CardBody } from '@heroui/card'
+import { Input } from '@heroui/input'
+import { useCallback, useState } from 'react'
+import toast from 'react-hot-toast'
+
+import ChatInputModal from '@/components/chat_input/modal'
+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).href
+  const defaultWsUrl = url.replace('http', 'ws').replace(':6099', ':3000')
+  const [socketConfig, setSocketConfig] = useState({
+    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} />
+                <ChatInputModal />
+              </div>
+            </div>
+          </CardBody>
+        </Card>
+
+        <div className="flex-1 overflow-hidden">
+          <OneBotMessageList messages={filteredMessages} />
+        </div>
+      </div>
+    </>
+  )
+}