chore: 细节优化

QAbot-zh · Sep 6, 2023 · f350365 · f350365
1 parent 3e72896
commit f350365
Show file tree

Hide file tree

Showing 13 changed files with 1,234 additions and 544 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bingo",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "private": true,
   "scripts": {
     "dev": "cross-env DEBUG=bingo* next dev --hostname 0.0.0.0",
@@ -9,7 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@headlessui/react": "^1.7.15",
+    "@headlessui/react": "^1.7.17",
     "@radix-ui/react-alert-dialog": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.4",
     "@radix-ui/react-dropdown-menu": "^2.0.5",
@@ -18,36 +18,32 @@
     "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-tooltip": "^1.0.6",
-    "autoprefixer": "10.4.14",
-    "cheerio": "^1.0.0-rc.12",
+    "autoprefixer": "10.4.15",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
     "dayjs": "^1.11.9",
     "debug": "^4.3.4",
     "dotenv": "^16.3.1",
-    "eslint": "8.44.0",
-    "eslint-config-next": "13.4.9",
+    "eslint": "8.48.0",
+    "eslint-config-next": "13.4.19",
     "form-data": "^4.0.0",
-    "http-proxy-middleware": "^2.0.6",
-    "https-proxy-agent": "^7.0.1",
-    "i18next": "^22.5.0",
+    "i18next": "^23.4.6",
     "i18next-browser-languagedetector": "^7.0.2",
     "idb-keyval": "^6.2.1",
     "ifw": "^0.0.2",
-    "immer": "^9.0.19",
+    "immer": "^10.0.2",
     "inter-ui": "^3.19.3",
-    "jotai": "^2.2.1",
+    "jotai": "^2.4.1",
     "jotai-immer": "^0.2.0",
     "jotai-location": "^0.5.1",
     "js-base64": "^3.7.5",
     "lodash": "^4.17.21",
-    "lodash-es": "^4.17.21",
     "namestorage": "^1.3.0",
     "nanoid": "^4.0.2",
-    "next": "13.4.9",
-    "next-auth": "^4.22.3",
+    "next": "13.4.19",
+    "next-auth": "^4.23.1",
     "next-themes": "^0.2.1",
-    "postcss": "8.4.25",
+    "postcss": "8.4.29",
     "random-ip": "^0.0.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
@@ -56,10 +52,11 @@
     "react-markdown": "^8.0.7",
     "react-spinners": "^0.13.8",
     "react-syntax-highlighter": "^15.5.0",
-    "react-textarea-autosize": "^8.5.0",
+    "react-textarea-autosize": "^8.5.3",
     "react-viewport-list": "^7.1.1",
     "rehype-highlight": "^6.0.0",
-    "rehype-stringify": "^9.0.3",
+    "rehype-katex": "^6.0.3",
+    "rehype-stringify": "^10.0.0",
     "remark": "^14.0.3",
     "remark-breaks": "^3.0.3",
     "remark-gfm": "^3.0.1",
@@ -68,21 +65,20 @@
     "remark-rehype": "^10.1.0",
     "remark-supersub": "^1.0.0",
     "tailwind-merge": "^1.14.0",
-    "tailwind-scrollbar": "^3.0.4",
-    "tailwindcss": "3.3.2",
-    "typescript": "5.1.6",
+    "tailwind-scrollbar": "^3.0.5",
+    "tailwindcss": "3.3.3",
+    "typescript": "5.2.2",
     "websocket-as-promised": "^2.0.1",
     "ws": "^8.13.0"
   },
   "devDependencies": {
-    "@headlessui/tailwindcss": "^0.1.3",
+    "@headlessui/tailwindcss": "^0.2.0",
     "@svgr/webpack": "^8.1.0",
     "@types/debug": "^4.1.8",
     "@types/dom-speech-recognition": "^0.0.1",
-    "@types/lodash-es": "^4.17.7",
     "@types/md5": "^2.3.2",
-    "@types/node": "20.4.2",
-    "@types/react": "18.2.14",
+    "@types/node": "20.5.9",
+    "@types/react": "18.2.21",
     "@types/react-color": "^3.0.6",
     "@types/react-copy-to-clipboard": "^5.0.4",
     "@types/react-dom": "18.2.7",
@@ -92,6 +88,6 @@
     "@typescript-eslint/eslint-plugin": "^5.60.1",
     "@typescript-eslint/parser": "^5.60.1",
     "cross-env": "^7.0.3",
-    "sass": "^1.62.1"
+    "sass": "^1.66.1"
   }
 }
diff --git a/src/app/dark.scss b/src/app/dark.scss
@@ -279,6 +279,7 @@
     --cib-color-stroke-accent-secondary: #D2D0CE;
     --cib-color-fill-accent-secondary: rgba(255, 255, 255, 0.2);
     --cib-color-foreground-accent-secondary: #D2D0CE;
+    --cib-color-fill-accent-alt-primary: #00151A;
   }
 
   .balanced {
@@ -295,6 +296,7 @@
     --cib-color-stroke-accent-secondary: #A2B7F4;
     --cib-color-fill-accent-secondary: rgba(255, 255, 255, 0.2);
     --cib-color-foreground-accent-secondary: #A2B7F4;
+    --cib-color-fill-accent-alt-primary: #050F2E;
   }
 
   .global-background {

diff --git a/src/app/globals.scss b/src/app/globals.scss
@@ -4,6 +4,7 @@
 
 :root {
   --cib-comp-thread-name-border-radius: 3px;
+  --cib-comp-message-citation-border-radius: 3px;
   --arrow-start-offset: 16px;
   --cib-color-foreground-accent-primary: #75306C;
   --cib-color-foreground-accent-secondary: #692B61;
@@ -321,6 +322,7 @@
   --cib-color-fill-accent-secondary: #EEF9FC;
   --cib-color-stroke-accent-secondary: #006880;
   --cib-color-foreground-accent-secondary: #005E73;
+  --cib-color-fill-accent-alt-primary: #CAEEF6;
 }
 
 .balanced {
@@ -336,6 +338,7 @@
   --cib-color-fill-accent-secondary: #EFF3FF;
   --cib-color-stroke-accent-secondary: #174AE4;
   --cib-color-foreground-accent-secondary: #1543CD;
+  --cib-color-fill-accent-alt-primary: #D1DBFA;
 }
 
 .global-background {
@@ -587,13 +590,31 @@ body {
   box-shadow: var(--cib-shadow-card);
   border-radius: var(--cib-border-radius-extra-large);
   background: var(--cib-color-background-surface-card-primary);
-}
 
-.text-message {
   color: var(--cib-color-foreground-neutral-primary);
 
+  sup {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    vertical-align: top;
+    top: -1px;
+    margin: 0px 2px;
+    min-width: 14px;
+    height: 14px;
+    text-decoration-color: transparent;
+    outline: transparent solid 1px;
+    color: var(--cib-color-foreground-accent-primary);
+    background: var(--cib-color-fill-accent-alt-primary);
+    border-radius: var(--cib-comp-message-citation-border-radius);
+    font-size: var(--cib-type-caption2-strong-font-size);
+    line-height: var(--cib-type-caption2-strong-line-height);
+    font-weight: var(--cib-type-caption2-strong-font-weight);
+    font-variation-settings: var(--cib-type-caption2-strong-font-variation-settings);
+  }
+
   &.user {
-    align-items: flex-end;
     align-self: flex-end;
     margin-inline-end: unset;
     margin-inline-start: 80px;
@@ -629,6 +650,10 @@ body {
   }
 }
 
+.katex-html[aria-hidden="true"] {
+  display: none;
+}
+
 .chat-feedback {
   position: absolute;
   top: -36px;
@@ -669,7 +694,9 @@ body {
     line-height: var(--cib-type-body1-line-height);
     font-weight: var(--cib-type-body1-font-weight);
     font-variation-settings: var(--cib-type-body1-font-variation-settings);
-
+    &:hover::before {
+      opacity: 1;
+    }
     &::before {
       content: "";
       position: absolute;

diff --git a/src/components/chat-message.tsx b/src/components/chat-message.tsx
@@ -1,6 +1,10 @@
+'use client'
+
 import { useEffect } from 'react'
 import remarkGfm from 'remark-gfm'
 import remarkMath from 'remark-math'
+import rehypeKatex from 'rehype-katex'
+import rehypeHighlight from 'rehype-highlight';
 import supersub from 'remark-supersub'
 import remarkBreaks from 'remark-breaks'
 import { cn } from '@/lib/utils'
@@ -37,6 +41,16 @@ export function ChatMessage({ message, ...props }: ChatMessageProps) {
             linkTarget="_blank"
             className="prose break-words dark:prose-invert prose-p:leading-relaxed prose-pre:p-0"
             remarkPlugins={[remarkGfm, remarkMath, supersub, remarkBreaks]}
+            rehypePlugins={[
+              rehypeKatex,
+              [
+                rehypeHighlight,
+                {
+                  detect: false,
+                  ignoreMissing: true,
+                },
+              ],
+            ]}
             components={{
               img(obj) {
                 try {
@@ -56,16 +70,6 @@ export function ChatMessage({ message, ...props }: ChatMessageProps) {
                 return <p className="mb-2">{children}</p>
               },
               code({ node, inline, className, children, ...props }) {
-                if (children.length) {
-                  if (children[0] == '▍') {
-                    return (
-                      <span className="mt-1 animate-pulse cursor-default">▍</span>
-                    )
-                  }
-
-                  children[0] = (children[0] as string).replace('`▍`', '▍')
-                }
-
                 const match = /language-(\w+)/.exec(className || '')
 
                 if (inline) {

diff --git a/src/components/chat-notification.tsx b/src/components/chat-notification.tsx
@@ -1,5 +1,3 @@
-import { useEffect } from 'react'
-
 import IconWarning from '@/assets/images/warning.svg'
 import { ChatError, ErrorCode, ChatMessageModel } from '@/lib/bots/bing/types'
 import { ExternalLink } from './external-link'

diff --git a/src/components/settings.tsx b/src/components/settings.tsx
@@ -66,7 +66,7 @@ export function Settings() {
               </ExternalLink>
               ，然后再打开
               <ExternalLink href="https://www.bing.com/turing/captcha/challenge">Challenge 接口</ExternalLink>
-              右键 》检查。打开开发者工具，在网络里面找到 Create 接口 》右键复制》复制为 cURL(bash)，粘贴到此处，然后保存。
+              右键 》检查。打开开发者工具，在网络里面找到 Challenge 接口 》右键复制》复制为 cURL(bash)，粘贴到此处，然后保存。
               <div className="h-2" />
               图文示例：
               <ExternalLink href="https://github.com/weaigc/bingo#如何获取%20BING_HEADER">如何获取 BING_HEADER</ExternalLink>