@vibe-forge/client 0.11.3 → 1.0.0

package/src/routes/ChatRoute.scss

@@ -1,6 +1,4 @@
 .chat-container {
-  --chat-content-max-width: 1040px;
-
   display: flex;
   flex-direction: column;
   flex: 1;
@@ -32,11 +30,18 @@
 .new-session-guide-wrapper {
   display: flex;
   justify-content: center;
+  width: 100%;
+  min-width: 0;
 }
 
 .chat-messages {
   flex: 1;
+  min-width: 0;
+  min-height: 0;
   overflow-y: auto;
+  overscroll-behavior-y: contain;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-gutter: stable both-edges;
   padding: 6px 12px 0;
   position: relative;
   opacity: 0;
@@ -52,7 +57,9 @@
   display: flex;
   flex-direction: column;
   gap: 6px;
+  min-width: 0;
   min-height: 100%;
+  padding-bottom: 8px;
 }
 
 .chat-turn {
@@ -208,6 +215,7 @@
   align-self: center;
   display: inline-flex;
   align-items: center;
+  flex-wrap: wrap;
   gap: 8px;
   margin: 0 auto;
   padding: 8px 14px;
@@ -221,7 +229,10 @@
   color: #2563eb;
   font-size: 13px;
   font-weight: 500;
-  box-shadow: 0 8px 24px rgba(59, 130, 246, .08);
+  line-height: 1.4;
+  max-width: 100%;
+  text-align: center;
+  box-shadow: none;
 
   .material-symbols-rounded {
     font-size: 16px;
@@ -232,6 +243,8 @@
   flex: 0;
   display: flex;
   flex-direction: column;
+  gap: 8px;
+  min-width: 0;
   justify-content: flex-end;
   transition:
     flex .4s cubic-bezier(.4, 0, .2, 1),
@@ -240,14 +253,15 @@
 
 .chat-composer-stack {
   flex: 0;
-  padding: 0 24px 24px;
+  min-width: 0;
+  padding: 0 12px max(8px, env(safe-area-inset-bottom));
 }
 
 .chat-composer-stack__inner {
-  width: min(100%, var(--chat-content-max-width));
-  margin: 0 auto;
+  width: 100%;
   display: flex;
   flex-direction: column;
+  min-width: 0;
 }
 
 .chat-composer-stack__inner > * {
@@ -277,20 +291,21 @@
 
 .scroll-bottom-btn {
   position: sticky;
-  bottom: 24px;
+  bottom: max(16px, env(safe-area-inset-bottom));
   left: 100%;
-  transform: translateX(-40px);
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
+  transform: translateX(-44px);
+  width: 36px;
+  height: 36px;
+  border-radius: 8px;
   background-color: var(--bg-color);
   border: 1px solid var(--border-color);
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1);
+  box-shadow: none;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   color: var(--sub-text-color, #6b7280);
+  touch-action: manipulation;
   z-index: 10;
 
   &:hover {
@@ -305,8 +320,16 @@
 
 .chat-settings-panel {
   flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
   overflow: auto;
-  padding: 20px 24px 24px;
+  padding: 6px 12px 12px;
+  box-sizing: border-box;
+}
+
+.chat-settings-panel > .session-settings-drawer {
+  width: 100%;
 }
 
 .chat-route__empty-state {
@@ -321,7 +344,83 @@
 }
 
 @media (max-width: 768px) {
+  .chat-container.is-new-session {
+    .new-session-guide-wrapper.is-compact-layout {
+      flex: 1;
+      min-height: 0;
+      align-items: stretch;
+      justify-content: flex-start;
+      overflow-y: auto;
+      overscroll-behavior-y: contain;
+      -webkit-overflow-scrolling: touch;
+      padding: max(8px, env(safe-area-inset-top))
+        max(12px, env(safe-area-inset-right)) 12px
+        max(12px, env(safe-area-inset-left));
+    }
+
+    .chat-composer-stack {
+      padding-top: 0;
+    }
+  }
+
+  .chat-messages {
+    padding: 6px max(12px, env(safe-area-inset-right)) 0
+      max(12px, env(safe-area-inset-left));
+  }
+
+  .chat-turn-summary {
+    gap: 8px;
+    font-size: 12px;
+
+    &::before,
+    &::after {
+      min-width: 18px;
+    }
+  }
+
+  .chat-turn-summary__content {
+    flex: 1;
+    justify-content: center;
+    flex-wrap: wrap;
+    row-gap: 4px;
+  }
+
+  .chat-turn-summary__meta {
+    flex-wrap: wrap;
+    justify-content: center;
+    row-gap: 2px;
+  }
+
+  .chat-turn-summary__time,
+  .chat-turn-summary__count {
+    white-space: normal;
+  }
+
+  .chat-turn-summary__count::before {
+    margin-right: 6px;
+  }
+
+  .chat-pending-session-banner {
+    width: min(100%, 320px);
+    padding: 8px 12px;
+    border-radius: 8px;
+  }
+
   .chat-composer-stack {
-    padding: 0 16px 16px;
+    padding: 0 max(12px, env(safe-area-inset-right))
+      max(8px, env(safe-area-inset-bottom))
+      max(12px, env(safe-area-inset-left));
+  }
+
+  .chat-settings-panel {
+    padding: 12px max(12px, env(safe-area-inset-right))
+      calc(16px + env(safe-area-inset-bottom))
+      max(12px, env(safe-area-inset-left));
+  }
+
+  .scroll-bottom-btn {
+    transform: translateX(-48px);
+    width: 40px;
+    height: 40px;
   }
 }

package/src/routes/ChatRoute.tsx

@@ -1,6 +1,7 @@
 import './ChatRoute.scss'
 
 import { Button, Empty } from 'antd'
+import { useSetAtom } from 'jotai'
 import { useEffect, useMemo, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useNavigate, useParams, useSearchParams } from 'react-router-dom'
@@ -17,6 +18,8 @@ import { buildChatHistoryStatusNotices } from '#~/components/chat/messages/build
 import { ChatTerminalView } from '#~/components/chat/terminal/ChatTerminalView.js'
 import { useChatSession } from '#~/hooks/chat/use-chat-session'
 import { useTerminalDockVisibility } from '#~/hooks/chat/use-terminal-dock-visibility'
+import { useResponsiveLayout } from '#~/hooks/use-responsive-layout'
+import { isMobileSidebarOpenAtom } from '#~/store/index'
 
 export function ChatRoute() {
   const { t } = useTranslation()
@@ -27,9 +30,7 @@ export function ChatRoute() {
     () => listSessions('active')
   )
   const session = sessionId == null ? undefined : sessionsRes?.sessions.find(item => item.id === sessionId)
-
   if (sessionId != null && isLoading) return null
-
   if (sessionId != null && session == null) {
     return (
       <div className='chat-route__empty-state'>
@@ -45,6 +46,9 @@ export function ChatRoute() {
 function ChatRouteView({ session }: { session?: Session }) {
   const { t } = useTranslation()
   const [searchParams] = useSearchParams()
+  const navigate = useNavigate()
+  const { isCompactLayout } = useResponsiveLayout()
+  const setIsMobileSidebarOpen = useSetAtom(isMobileSidebarOpenAtom)
   const {
     messages,
     sessionInfo,
@@ -99,9 +103,10 @@ function ChatRouteView({ session }: { session?: Session }) {
   const isEmptyNewSession = !session?.id && messages.length === 0 && historyStatusNotices.length === 0
   const resolvedActiveView = session?.id != null ? activeView : 'history'
   const shouldShowTerminal = session?.id != null && isTerminalOpen
-  const { isRendered: isTerminalRendered, isVisible: isTerminalVisible } = useTerminalDockVisibility(shouldShowTerminal)
+  const { isRendered: isTerminalRendered, isVisible: isTerminalVisible } = useTerminalDockVisibility(
+    shouldShowTerminal
+  )
   const handledDeepLinkTargetRef = useRef('')
-
   useEffect(() => {
     if (deepLinkTargetKey === '') {
       handledDeepLinkTargetRef.current = ''
@@ -112,31 +117,35 @@ function ChatRouteView({ session }: { session?: Session }) {
       }
     }
   }, [activeView, deepLinkTargetKey, setActiveView])
-
   return (
     <div
       className={`chat-container ${isReady ? 'ready' : ''} ${isEmptyNewSession ? 'is-new-session' : ''} ${
         shouldShowTerminal ? 'has-terminal' : ''
       }`}
     >
-      {session?.id && (
+      {(session?.id != null || isCompactLayout) && (
         <ChatHeader
           sessionInfo={sessionInfo}
-          sessionId={session.id}
-          sessionTitle={session.title}
-          sessionStatus={session.status}
-          isStarred={session.isStarred}
-          isArchived={session.isArchived}
-          tags={session.tags}
-          lastMessage={session.lastMessage}
-          lastUserMessage={session.lastUserMessage}
+          sessionId={session?.id}
+          sessionTitle={session?.title}
+          sessionStatus={session?.status}
+          isStarred={session?.isStarred}
+          isArchived={session?.isArchived}
+          tags={session?.tags}
+          lastMessage={session?.lastMessage}
+          lastUserMessage={session?.lastUserMessage}
           activeView={resolvedActiveView}
           isTerminalOpen={isTerminalOpen}
+          onCreateSession={() => {
+            void navigate('/')
+          }}
+          onOpenSidebar={() => {
+            setIsMobileSidebarOpen(true)
+          }}
           onViewChange={setActiveView}
           onToggleTerminal={() => setIsTerminalOpen(!isTerminalOpen)}
         />
       )}
-
       {resolvedActiveView === 'history' && (
         <ChatHistoryView
           isReady={isReady}
@@ -175,26 +184,11 @@ function ChatRouteView({ session }: { session?: Session }) {
           hasAvailableModels={hasAvailableModels}
         />
       )}
-
-      {resolvedActiveView === 'timeline' && (
-        <ChatTimelineView messages={messages} />
-      )}
-
-      {resolvedActiveView === 'settings' && session?.id && (
-        <ChatSettingsView
-          session={session}
-          sessionInfo={sessionInfo}
-          onClose={() => setActiveView('history')}
-        />
-      )}
-
-      {isTerminalRendered && session?.id && (
-        <ChatTerminalView
-          isOpen={isTerminalVisible}
-          sessionId={session.id}
-          onClose={() => setIsTerminalOpen(false)}
-        />
-      )}
+      {resolvedActiveView === 'timeline' && <ChatTimelineView messages={messages} />}
+      {resolvedActiveView === 'settings' && session?.id &&
+        <ChatSettingsView session={session} sessionInfo={sessionInfo} onClose={() => setActiveView('history')} />}
+      {isTerminalRendered && session?.id &&
+        <ChatTerminalView isOpen={isTerminalVisible} sessionId={session.id} onClose={() => setIsTerminalOpen(false)} />}
     </div>
   )
 }

package/src/store/index.ts

@@ -11,6 +11,8 @@ export const isSidebarResizingAtom = atom<boolean>(false)
 // 侧边栏是否折叠
 export const isSidebarCollapsedAtom = atom(false)
 
+export const isMobileSidebarOpenAtom = atom(false)
+
 // 当前选中的会话 ID (全局 UI 状态，用于控制高亮等)
 export const activeSessionIdAtom = atom<string | undefined>(undefined)
 

package/dist/assets/channel-CBULQbJz.js

@@ -1 +0,0 @@
-import{al as o,am as n}from"./mermaid.core-Cvn8Go4x.js";const l=(a,r)=>o.lang.round(n.parse(a)[r]);export{l as c};

package/dist/assets/clone-dkS7LczW.js

@@ -1 +0,0 @@
-import{a as r}from"./graph-CkHF299-.js";var a=4;function n(o){return r(o,a)}export{n as c};

package/dist/assets/flowDiagram-v2-4f6560a1-1miffU4x.js

@@ -1 +0,0 @@
-import{f as o,p as e}from"./flowDb-c6c81e3f-DD8Cx7_9.js";import{f as a,g as t}from"./styles-d45a18b0-BDcLLa65.js";import{ar as i}from"./mermaid.core-Cvn8Go4x.js";import"./graph-CkHF299-.js";import"./layout-CbViRb_b.js";import"./index-BHFpctk6.js";import"./index-5325376f-BzOVQPu-.js";import"./clone-dkS7LczW.js";import"./edges-96097737-CdSKqxZt.js";import"./createText-1719965b-Ca5dEwfo.js";import"./line-DBdBvv9D.js";import"./array-BKyUJesY.js";import"./path-CbwjOpE9.js";import"./channel-CBULQbJz.js";const n={parser:e,db:o,renderer:t,styles:a,init:r=>{r.flowchart||(r.flowchart={}),r.flowchart.arrowMarkerAbsolute=r.arrowMarkerAbsolute,i({flowchart:{arrowMarkerAbsolute:r.arrowMarkerAbsolute}}),t.setConf(r.flowchart),o.clear(),o.setGen("gen-2")}};export{n as diagram};