@vibe-forge/client 2.0.1 → 3.0.0-alpha.0

package/src/routes/ChatRoute.scss

@@ -267,71 +267,80 @@
   }
 }
 
+.sender-container {
+  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),
+    padding-bottom .4s cubic-bezier(.4, 0, .2, 1);
+}
+
 .chat-thinking-indicator {
-  align-self: stretch;
   display: flex;
-  justify-content: center;
-  padding: 4px 0 2px;
+  justify-content: flex-start;
+  padding: 0;
   min-width: 0;
+  width: 100%;
 }
 
 .chat-thinking-indicator__text {
   display: inline-flex;
   align-items: center;
-  max-width: 100%;
-  font-size: 13px;
-  line-height: 1.45;
-  font-weight: 500;
-  letter-spacing: .02em;
+  justify-content: flex-start;
+  position: relative;
+  isolation: isolate;
+  overflow: hidden;
+  max-width: min(90%, 100%);
+  font-size: 14px;
+  line-height: 1.6;
+  font-weight: 400;
   white-space: nowrap;
-  color: color-mix(in srgb, var(--sub-text-color) 88%, var(--text-color) 12%);
-  background-image: linear-gradient(
-    90deg,
-    color-mix(in srgb, var(--sub-text-color) 88%, var(--text-color) 12%) 0%,
-    color-mix(in srgb, var(--sub-text-color) 88%, var(--text-color) 12%) 34%,
-    color-mix(in srgb, var(--text-color) 88%, white 12%) 50%,
-    color-mix(in srgb, var(--sub-text-color) 88%, var(--text-color) 12%) 66%,
-    color-mix(in srgb, var(--sub-text-color) 88%, var(--text-color) 12%) 100%
+  text-align: left;
+  color: var(--text-color);
+}
+
+.chat-thinking-indicator__text::after {
+  content: '';
+  position: absolute;
+  inset: -1px -20%;
+  border-radius: 999px;
+  pointer-events: none;
+  background: linear-gradient(
+    100deg,
+    transparent 18%,
+    rgba(255, 255, 255, 0) 34%,
+    rgba(255, 255, 255, .08) 42%,
+    rgba(255, 255, 255, .82) 50%,
+    rgba(255, 255, 255, .08) 58%,
+    rgba(255, 255, 255, 0) 66%,
+    transparent 82%
   );
-  background-size: 220% 100%;
-  background-position: 120% 50%;
-  background-repeat: no-repeat;
-  -webkit-background-clip: text;
-  background-clip: text;
-  color: transparent;
-  -webkit-text-fill-color: transparent;
-  animation: chat-thinking-indicator-shimmer 1.7s linear infinite;
+  mix-blend-mode: screen;
+  transform: translate3d(-180%, 0, 0);
+  animation: chat-thinking-indicator-scan 2s ease-in-out infinite;
 }
 
-@keyframes chat-thinking-indicator-shimmer {
+@keyframes chat-thinking-indicator-scan {
   from {
-    background-position: 120% 50%;
+    transform: translate3d(-180%, 0, 0);
   }
 
   to {
-    background-position: -120% 50%;
+    transform: translate3d(180%, 0, 0);
   }
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .chat-thinking-indicator__text {
+  .chat-thinking-indicator__text::after {
     animation: none;
-    background-position: 50% 50%;
+    opacity: 0;
   }
 }
 
-.sender-container {
-  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),
-    padding-bottom .4s cubic-bezier(.4, 0, .2, 1);
-}
-
 .chat-composer-stack {
   flex: 0;
   min-width: 0;
@@ -498,10 +507,6 @@
     border-radius: 8px;
   }
 
-  .chat-thinking-indicator__text {
-    font-size: 12px;
-  }
-
   .chat-composer-stack {
     padding: 0 max(12px, env(safe-area-inset-right))
       calc(

package/src/store/index.ts

@@ -18,10 +18,100 @@ export const activeSessionIdAtom = atom<string | undefined>(undefined)
 
 // 主题模式: 'light' | 'dark' | 'system'
 export type ThemeMode = 'light' | 'dark' | 'system'
-export const themeAtom = atom<ThemeMode>(
-  (localStorage.getItem('theme') as ThemeMode) || 'system'
+
+const THEME_STORAGE_KEY = 'theme'
+
+const isThemeMode = (value: string): value is ThemeMode => {
+  return value === 'light' || value === 'dark' || value === 'system'
+}
+
+const getStoredThemeMode = (): ThemeMode => {
+  try {
+    const raw = localStorage.getItem(THEME_STORAGE_KEY)
+    if (raw != null && isThemeMode(raw)) {
+      return raw
+    }
+  } catch {}
+
+  return 'system'
+}
+
+const themeBaseAtom = atom<ThemeMode>(getStoredThemeMode())
+
+export const themeAtom = atom(
+  get => get(themeBaseAtom),
+  (_get, set, value: ThemeMode) => {
+    const nextValue = isThemeMode(value)
+      ? value
+      : 'system'
+
+    set(themeBaseAtom, nextValue)
+
+    try {
+      localStorage.setItem(THEME_STORAGE_KEY, nextValue)
+    } catch {}
+  }
 )
 
+const getStoredBoolean = (key: string, defaultValue: boolean) => {
+  try {
+    const raw = localStorage.getItem(key)
+    if (raw === 'true') return true
+    if (raw === 'false') return false
+  } catch {}
+
+  return defaultValue
+}
+
+const createStoredBooleanAtom = (storageKey: string, defaultValue: boolean) => {
+  const baseAtom = atom<boolean>(getStoredBoolean(storageKey, defaultValue))
+
+  return atom(
+    get => get(baseAtom),
+    (_get, set, value: boolean) => {
+      const nextValue = value === true
+      set(baseAtom, nextValue)
+
+      try {
+        localStorage.setItem(storageKey, String(nextValue))
+      } catch {}
+    }
+  )
+}
+
+const getStoredNonNegativeInteger = (key: string, defaultValue: number) => {
+  try {
+    const raw = localStorage.getItem(key)
+    if (raw == null || raw.trim() === '') return defaultValue
+
+    const parsed = Number(raw)
+    if (Number.isInteger(parsed) && parsed >= 0) {
+      return parsed
+    }
+  } catch {}
+
+  return defaultValue
+}
+
+const createStoredNonNegativeIntegerAtom = (storageKey: string, defaultValue: number) => {
+  const baseAtom = atom<number>(getStoredNonNegativeInteger(storageKey, defaultValue))
+
+  return atom(
+    get => get(baseAtom),
+    (_get, set, value: number) => {
+      const nextValue = Number.isInteger(value) && value >= 0
+        ? value
+        : defaultValue
+
+      set(baseAtom, nextValue)
+
+      try {
+        localStorage.setItem(storageKey, String(nextValue))
+      } catch {}
+    }
+  )
+}
+
 export type SenderHeaderDisplayMode = 'expanded' | 'collapsed'
 
 const SENDER_HEADER_DISPLAY_STORAGE_KEY = 'vf_sender_header_default_display'
@@ -62,4 +152,22 @@ export const senderHeaderDisplayAtom = atom(
   }
 )
 
-export const showAnnouncementsAtom = atom(true)
+const SHOW_ANNOUNCEMENTS_STORAGE_KEY = 'vf_show_announcements'
+const SHOW_NEW_SESSION_STARTER_LIST_STORAGE_KEY = 'vf_show_new_session_starter_list'
+const SESSION_LIST_SEARCH_THRESHOLD_STORAGE_KEY = 'vf_session_list_search_threshold'
+const DEFAULT_SESSION_LIST_SEARCH_THRESHOLD = 5
+
+export const showAnnouncementsAtom = createStoredBooleanAtom(
+  SHOW_ANNOUNCEMENTS_STORAGE_KEY,
+  true
+)
+
+export const showNewSessionStarterListAtom = createStoredBooleanAtom(
+  SHOW_NEW_SESSION_STARTER_LIST_STORAGE_KEY,
+  true
+)
+
+export const sessionListSearchThresholdAtom = createStoredNonNegativeIntegerAtom(
+  SESSION_LIST_SEARCH_THRESHOLD_STORAGE_KEY,
+  DEFAULT_SESSION_LIST_SEARCH_THRESHOLD
+)

package/dist/assets/channel-C6LTxxLg.js

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

package/dist/assets/clone-CG6ZcokX.js

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

package/dist/assets/flowDiagram-v2-4f6560a1-CSZTI7GQ.js

@@ -1 +0,0 @@
-import{f as o,p as e}from"./flowDb-c6c81e3f-CoPw_R-Q.js";import{f as a,g as t}from"./styles-d45a18b0-B24zVoK3.js";import{ar as i}from"./mermaid.core-BhdbV0mr.js";import"./graph-DuC4kt4I.js";import"./layout-QKUiDNJK.js";import"./index-DeQLT67a.js";import"./index-5325376f-rnz0GXAT.js";import"./clone-CG6ZcokX.js";import"./edges-96097737-CNHoXVrD.js";import"./createText-1719965b-9YwvWMdV.js";import"./line-CeP3XWjD.js";import"./array-BKyUJesY.js";import"./path-CbwjOpE9.js";import"./channel-C6LTxxLg.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};