Explorar el Código

fix(chat): expand right dock width

Mochocyang hace 2 meses
padre
commit
117e499f7b

+ 4 - 6
src/components/layout/writing-workspace.tsx

@@ -1,6 +1,6 @@
 import { Suspense, lazy, useCallback, useEffect, useRef, useState } from "react"
 import { PreviewPanel } from "./preview-panel"
-import { clampChatHeight, clampChatWidth } from "@/lib/workspace-layout"
+import { clampChatHeight, clampChatWidth, getInitialChatWidth } from "@/lib/workspace-layout"
 import { useWikiStore } from "@/stores/wiki-store"
 import { shouldShowRightDockChat, shouldShowWritingChat } from "./chat-layout"
 
@@ -16,17 +16,15 @@ export function WritingWorkspace() {
   const chatExpanded = useWikiStore((s) => s.chatExpanded)
   const chatDockPosition = useWikiStore((s) => s.chatDockPosition)
   const [chatHeight, setChatHeight] = useState(260)
-  const [chatWidth, setChatWidth] = useState(360)
+  const [chatWidth, setChatWidth] = useState(() => getInitialChatWidth())
 
   useEffect(() => {
     const saved = Number(localStorage.getItem("lk-chat-height") ?? "260")
     if (Number.isFinite(saved) && saved > 0) {
       setChatHeight(clampChatHeight(saved))
     }
-    const savedWidth = Number(localStorage.getItem("lk-chat-right-width") ?? "360")
-    if (Number.isFinite(savedWidth) && savedWidth > 0) {
-      setChatWidth(clampChatWidth(savedWidth))
-    }
+    const savedWidth = Number(localStorage.getItem("lk-chat-right-width"))
+    setChatWidth(getInitialChatWidth(savedWidth))
   }, [])
 
   useEffect(() => {

+ 2 - 2
src/components/sources/sources-view.tsx

@@ -3,7 +3,7 @@ import { useTranslation } from "react-i18next"
 import { useWikiStore } from "@/stores/wiki-store"
 import { OutlineActionToolbar } from "@/components/sources/outline-action-toolbar"
 import { PreviewPanel } from "@/components/layout/preview-panel"
-import { clampChatHeight, clampChatWidth } from "@/lib/workspace-layout"
+import { clampChatHeight, clampChatWidth, getInitialChatWidth } from "@/lib/workspace-layout"
 import { useOutlineGenerationStore } from "@/stores/outline-generation-store"
 
 const OutlineChatPanel = lazy(async () => {
@@ -18,7 +18,7 @@ export function SourcesView() {
   const outlineChatOpen = useOutlineGenerationStore((s) => s.panelOpen)
   const setOutlineChatOpen = useOutlineGenerationStore((s) => s.setPanelOpen)
   const [chatHeight, setChatHeight] = useState(300)
-  const [chatWidth, setChatWidth] = useState(360)
+  const [chatWidth, setChatWidth] = useState(() => getInitialChatWidth())
   const [bulkIngestResult, setBulkIngestResult] = useState<string | null>(null)
   const containerRef = useRef<HTMLDivElement>(null)
   const resizingRef = useRef(false)

+ 28 - 2
src/lib/workspace-layout.ts

@@ -12,8 +12,34 @@ export function clampChatHeight(height: number): number {
   return Math.max(180, Math.min(520, height))
 }
 
-export function clampChatWidth(width: number): number {
-  return Math.max(280, Math.min(520, width))
+const CHAT_MIN_WIDTH = 280
+const CHAT_OLD_DEFAULT_WIDTH = 360
+export const CHAT_DOCK_DEFAULT_WIDTH = 640
+export const CHAT_DOCK_MAX_VIEWPORT_RATIO = 0.5
+
+function resolveViewportWidth(viewportWidth?: number): number {
+  if (typeof viewportWidth === "number" && Number.isFinite(viewportWidth) && viewportWidth > 0) {
+    return viewportWidth
+  }
+  if (typeof window !== "undefined" && Number.isFinite(window.innerWidth) && window.innerWidth > 0) {
+    return window.innerWidth
+  }
+  return 1040
+}
+
+export function getMaxChatWidth(viewportWidth?: number): number {
+  return Math.max(CHAT_MIN_WIDTH, Math.floor(resolveViewportWidth(viewportWidth) * CHAT_DOCK_MAX_VIEWPORT_RATIO))
+}
+
+export function clampChatWidth(width: number, viewportWidth?: number): number {
+  return Math.max(CHAT_MIN_WIDTH, Math.min(getMaxChatWidth(viewportWidth), width))
+}
+
+export function getInitialChatWidth(storedWidth?: number | null, viewportWidth?: number): number {
+  if (typeof storedWidth === "number" && Number.isFinite(storedWidth) && storedWidth > CHAT_OLD_DEFAULT_WIDTH) {
+    return clampChatWidth(storedWidth, viewportWidth)
+  }
+  return clampChatWidth(CHAT_DOCK_DEFAULT_WIDTH, viewportWidth)
 }
 
 export function shouldUseCompactChapterToolbar(width: number): boolean {