support 2 type of scroll behavior with proper settings

autoqa/checklist.md

@@ -3,7 +3,7 @@
 ## A. Initial update / migration Data check
 
 Before testing, set-up the following in the old version to make sure that we can see the data is properly migrated:
-- [ ] Changing appearance / theme to something that is obviously different from default set-up 
+- [ ] Changing Interface / theme to something that is obviously different from default set-up 
 - [ ] Ensure there are a few chat threads
 - [ ] Ensure there are a few favourites / star threads 
 - [ ] Ensure there are 2 model downloaded 
@@ -23,7 +23,7 @@ Before testing, set-up the following in the old version to make sure that we can
 	- [ ] Can resume chat in threads with the previous context 
 - [ ] Assistants
 - Settings:
-	- [ ] Appearance 
+	- [ ] Interface 
 	- [ ] MCP Servers 
 	- [ ] Local API Server 
 	- [ ] HTTPS Proxy
@@ -56,7 +56,7 @@ Before testing, set-up the following in the old version to make sure that we can
 - [ ] Ensure `Community` links work and point to the correct website 
 - [ ] Ensure the `Check for Updates` function detect the correct latest version 
 - [ ] [ENG] Create a folder with un-standard character as title (e.g. Chinese character) => change the `App data` location to that folder => test that model is still able to load and run properly.
-#### In `Appearance`:
+#### In `Interface`:
 - [ ] Toggle between different `Theme` options to check that they change accordingly and that all elements of the UI are legible with the right contrast:
 	- [ ] Light 
 	- [ ] Dark 
@@ -73,7 +73,7 @@ Before testing, set-up the following in the old version to make sure that we can
 		- [ ] Ensure that when this value is changed, there is no broken UI caused by it
 	- [ ] Code Block
 	- [ ] Show Line Numbers
-- [ENG] Ensure that when click on `Reset` in the `Appearance` section, it reset back to the default values
+- [ENG] Ensure that when click on `Reset` in the `Interface` section, it reset back to the default values
 - [ENG] Ensure that when click on `Reset` in the `Code Block` section, it reset back to the default values
 
 #### In `Model Providers`:
@@ -205,7 +205,7 @@ Ensure that the following section information show up for hardware
 	- [ ] Model option (except if the model / model provider has been deleted or disabled)
 - [ ] User can send message with different type of text content (e.g text, emoji, ...)
 - [ ] When request model to generate a markdown table, the table is correctly formatted as returned from the model.
-- [ ] When model generate code, ensure that the code snippets is properly formatted according to the `Appearance -> Code Block` setting.
+- [ ] When model generate code, ensure that the code snippets is properly formatted according to the `Interface -> Code Block` setting.
 - [ ] Users can edit their old message and and user can regenerate the answer based on the new message
 - [ ] User can click `Copy` to copy the model response
 - [ ] User can click `Delete` to delete either the user message or the model response.
@@ -231,7 +231,7 @@ In `Settings -> General`:
 	- [ ] All threads deleted
 	- [ ] All Assistant deleted except for default Jan Assistant
 	- [ ] `App Data` location is reset back to default path
-	- [ ] Appearance reset
+	- [ ] Interface reset
 	- [ ] Model Providers information all reset
 		- [ ] Llama.cpp setting reset
 		- [ ] API keys cleared
@@ -261,4 +261,4 @@ In `Settings -> General`:
 # II. After release
 - [ ] Check that the App Updater works and user can update to the latest release without any problem
 - [ ] App restarts after the user finished an update
-- [ ] Repeat section `A. Initial update / migration Data check` above to verify that update is done correctly on live version
+- [ ] Repeat section `A. Initial update / migration Data check` above to verify that update is done correctly on live version

docs/src/pages/docs/desktop/server-settings.mdx

@@ -88,14 +88,14 @@ If your computer gets very hot, consider using smaller models or reducing GPU la
 
 ## Personalization
 
-### Visual Appearance
+### Visual Interface
 
-Customize Jan's look at **Settings** > **Appearance**:
+Customize Jan's look at **Settings** > **Interface**:
 - **Theme**: Choose light or dark mode
 - **Colors**: Pick your preferred color scheme
 - **Code highlighting**: Adjust syntax colors for programming discussions
 
-![Appearance](./_assets/settings-04.png)
+![Interface](./_assets/settings-04.png)
 
 ### Writing Assistance
 

docs/src/pages/docs/desktop/settings.mdx

@@ -83,11 +83,11 @@ Monitor and manage system resources at **Settings > Hardware**:
 
 ## Preferences
 
-### Appearance & Theme
+### Interface & Theme
 Control the visual theme of Jan's interface with any color combo you'd like. You can also control the color use in the code blocks.
 
 <br/>
-![Appearance](./_assets/settings-04.png)
+![Interface](./_assets/settings-04.png)
 <br/>
 
 ### Spell Check

tests/checklist.md

@@ -3,7 +3,7 @@
 ## A. Initial update / migration Data check
 
 Before testing, set-up the following in the old version to make sure that we can see the data is properly migrated:
-- [ ] Changing appearance / theme to something that is obviously different from default set-up 
+- [ ] Changing Interface / theme to something that is obviously different from default set-up 
 - [ ] Ensure there are a few chat threads
 - [ ] Ensure there are a few favourites / star threads 
 - [ ] Ensure there are 2 model downloaded 
@@ -23,7 +23,7 @@ Before testing, set-up the following in the old version to make sure that we can
 	- [ ] Can resume chat in threads with the previous context 
 - [ ] Assistants
 - Settings:
-	- [ ] Appearance 
+	- [ ] Interface 
 	- [ ] MCP Servers 
 	- [ ] Local API Server 
 	- [ ] HTTPS Proxy
@@ -56,7 +56,7 @@ Before testing, set-up the following in the old version to make sure that we can
 - [ ] Ensure `Community` links work and point to the correct website 
 - [ ] Ensure the `Check for Updates` function detect the correct latest version 
 - [ ] [ENG] Create a folder with un-standard character as title (e.g. Chinese character) => change the `App data` location to that folder => test that model is still able to load and run properly.
-#### In `Appearance`:
+#### In `Interface`:
 - [ ] Toggle between different `Theme` options to check that they change accordingly and that all elements of the UI are legible with the right contrast:
 	- [ ] Light 
 	- [ ] Dark 
@@ -74,7 +74,7 @@ Before testing, set-up the following in the old version to make sure that we can
 	- [ ] Code Block
 	- [ ] Show Line Numbers
 - [ ] [0.7.0] Compact Token Counter will show token counter in side chat input when toggle, if not it will show a small token counter below the chat input
-- [ ] [ENG] Ensure that when click on `Reset` in the `Appearance` section, it reset back to the default values
+- [ ] [ENG] Ensure that when click on `Reset` in the `Interface` section, it reset back to the default values
 - [ ] [ENG] Ensure that when click on `Reset` in the `Code Block` section, it reset back to the default values
 
 #### In `Model Providers`:
@@ -228,7 +228,7 @@ Ensure that the following section information show up for hardware
 	- [ ] Model option (except if the model / model provider has been deleted or disabled)
 - [ ] User can send message with different type of text content (e.g text, emoji, ...)
 - [ ] When request model to generate a markdown table, the table is correctly formatted as returned from the model.
-- [ ] When model generate code, ensure that the code snippets is properly formatted according to the `Appearance -> Code Block` setting.
+- [ ] When model generate code, ensure that the code snippets is properly formatted according to the `Interface -> Code Block` setting.
 - [ ] [0.7.0] LaTeX formulas now render correctly in chat. Both inline \(...\) and block \[...\] formats are supported. Code blocks and HTML tags are not affected
 - [ ] Users can edit their old message and user can regenerate the answer based on the new message
 - [ ] User can click `Copy` to copy the model response
@@ -269,7 +269,7 @@ In `Settings -> General`:
 	- [ ] All threads deleted
 	- [ ] All Assistant deleted except for default Jan Assistant
 	- [ ] `App Data` location is reset back to default path
-	- [ ] Appearance reset
+	- [ ] Interface reset
 	- [ ] Model Providers information all reset
 		- [ ] Llama.cpp setting reset
 		- [ ] API keys cleared
@@ -299,4 +299,4 @@ In `Settings -> General`:
 # II. After release
 - [ ] Check that the App Updater works and user can update to the latest release without any problem
 - [ ] App restarts after the user finished an update
-- [ ] Repeat section `A. Initial update / migration Data check` above to verify that update is done correctly on live version
+- [ ] Repeat section `A. Initial update / migration Data check` above to verify that update is done correctly on live version

web-app/src/constants/localStorage.ts

@@ -5,7 +5,7 @@ export const localStorageKey = {
   theme: 'theme',
   modelProvider: 'model-provider',
   modelSources: 'model-sources',
-  settingAppearance: 'setting-appearance',
+  settingInterface: 'setting-interface',
   settingGeneral: 'setting-general',
   settingCodeBlock: 'setting-code-block',
   settingLocalApiServer: 'setting-local-api-server',

web-app/src/constants/routes.ts

@@ -11,7 +11,7 @@ export const route = {
     providers: '/settings/providers/$providerName',
     general: '/settings/general',
     attachments: '/settings/attachments',
-    appearance: '/settings/appearance',
+    interface: '/settings/interface',
     privacy: '/settings/privacy',
     shortcuts: '/settings/shortcuts',
     extensions: '/settings/extensions',

web-app/src/constants/threadScroll.ts

@@ -0,0 +1,33 @@
+export const THREAD_SCROLL_BEHAVIOR = {
+  // FLOW: "chatgpt" behavior (keep viewport anchored to the latest user message)
+  FLOW: 'flow',
+  // STICKY: auto-follow streaming replies
+  STICKY: 'sticky',
+} as const
+
+export type ThreadScrollBehavior =
+  (typeof THREAD_SCROLL_BEHAVIOR)[keyof typeof THREAD_SCROLL_BEHAVIOR]
+
+export const DEFAULT_THREAD_SCROLL_BEHAVIOR =
+  THREAD_SCROLL_BEHAVIOR.FLOW
+
+export const threadScrollBehaviorOptions: Array<{
+  value: ThreadScrollBehavior
+  translationKey: string
+}> = [
+  {
+    value: THREAD_SCROLL_BEHAVIOR.FLOW,
+    translationKey: 'settings:interface.threadScrollFlowTitle',
+  },
+  {
+    value: THREAD_SCROLL_BEHAVIOR.STICKY,
+    translationKey: 'settings:interface.threadScrollStickyTitle',
+  },
+]
+
+export const isThreadScrollBehavior = (
+  value: unknown
+): value is ThreadScrollBehavior =>
+  value === THREAD_SCROLL_BEHAVIOR.FLOW ||
+  value === THREAD_SCROLL_BEHAVIOR.STICKY
+

web-app/src/containers/ChatWidthSwitcher.tsx

@@ -1,11 +1,11 @@
-import { Skeleton } from '@/components/ui/skeleton'
-import { useAppearance } from '@/hooks/useAppearance'
+import { Skeleton } from '@/components/ui/skeleton'
+import { useInterfaceSettings } from '@/hooks/useInterfaceSettings'
 import { cn } from '@/lib/utils'
 import { IconCircleCheckFilled } from '@tabler/icons-react'
 import { useTranslation } from '@/i18n/react-i18next-compat'
 
 export function ChatWidthSwitcher() {
-  const { chatWidth, setChatWidth } = useAppearance()
+  const { chatWidth, setChatWidth } = useInterfaceSettings()
   const { t } = useTranslation()
 
   return (

web-app/src/containers/ColorPickerAppAccentColor.tsx

@@ -1,4 +1,4 @@
-import { useAppearance, isDefaultColorAccent } from '@/hooks/useAppearance'
+import { useInterfaceSettings, isDefaultColorAccent } from '@/hooks/useInterfaceSettings'
 import { cn } from '@/lib/utils'
 import { RgbaColor, RgbaColorPicker } from 'react-colorful'
 import { IconColorPicker } from '@tabler/icons-react'
@@ -9,7 +9,7 @@ import {
 } from '@/components/ui/dropdown-menu'
 
 export function ColorPickerAppAccentColor() {
-  const { appAccentBgColor, setAppAccentBgColor } = useAppearance()
+  const { appAccentBgColor, setAppAccentBgColor } = useInterfaceSettings()
 
   const predefineAppAccentBgColor: RgbaColor[] = [
     {

web-app/src/containers/ColorPickerAppBgColor.tsx

@@ -1,4 +1,4 @@
-import { useAppearance, useBlurSupport } from '@/hooks/useAppearance'
+import { useInterfaceSettings, useBlurSupport } from '@/hooks/useInterfaceSettings'
 import { cn } from '@/lib/utils'
 import { RgbaColor, RgbaColorPicker } from 'react-colorful'
 import { IconColorPicker } from '@tabler/icons-react'
@@ -11,7 +11,7 @@ import { useTranslation } from '@/i18n/react-i18next-compat'
 import { useTheme } from '@/hooks/useTheme'
 
 export function ColorPickerAppBgColor() {
-  const { appBgColor, setAppBgColor } = useAppearance()
+  const { appBgColor, setAppBgColor } = useInterfaceSettings()
   const { isDark } = useTheme()
   const { t } = useTranslation()
   const showAlphaSlider = useBlurSupport()

web-app/src/containers/ColorPickerAppDestructiveColor.tsx

@@ -1,4 +1,4 @@
-import { useAppearance, isDefaultColorDestructive } from '@/hooks/useAppearance'
+import { useInterfaceSettings, isDefaultColorDestructive } from '@/hooks/useInterfaceSettings'
 import { cn } from '@/lib/utils'
 import { RgbaColor, RgbaColorPicker } from 'react-colorful'
 import { IconColorPicker } from '@tabler/icons-react'
@@ -10,7 +10,7 @@ import {
 import { useTheme } from '@/hooks/useTheme'
 
 export function ColorPickerAppDestructiveColor() {
-  const { appDestructiveBgColor, setAppDestructiveBgColor } = useAppearance()
+  const { appDestructiveBgColor, setAppDestructiveBgColor } = useInterfaceSettings()
   const { isDark } = useTheme()
 
   const predefineAppDestructiveBgColor: RgbaColor[] = [

web-app/src/containers/ColorPickerAppMainView.tsx

@@ -1,4 +1,4 @@
-import { useAppearance, isDefaultColorMainView } from '@/hooks/useAppearance'
+import { useInterfaceSettings, isDefaultColorMainView } from '@/hooks/useInterfaceSettings'
 import { cn } from '@/lib/utils'
 import { RgbaColor, RgbaColorPicker } from 'react-colorful'
 import { IconColorPicker } from '@tabler/icons-react'
@@ -10,7 +10,7 @@ import {
 import { useTheme } from '@/hooks/useTheme'
 
 export function ColorPickerAppMainView() {
-  const { appMainViewBgColor, setAppMainViewBgColor } = useAppearance()
+  const { appMainViewBgColor, setAppMainViewBgColor } = useInterfaceSettings()
   const { isDark } = useTheme()
 
   const predefineAppMainViewBgColor: RgbaColor[] = [

web-app/src/containers/ColorPickerAppPrimaryColor.tsx

@@ -1,4 +1,4 @@
-import { useAppearance, isDefaultColorPrimary } from '@/hooks/useAppearance'
+import { useInterfaceSettings, isDefaultColorPrimary } from '@/hooks/useInterfaceSettings'
 import { cn } from '@/lib/utils'
 import { RgbaColor, RgbaColorPicker } from 'react-colorful'
 import { IconColorPicker } from '@tabler/icons-react'
@@ -9,7 +9,7 @@ import {
 } from '@/components/ui/dropdown-menu'
 
 export function ColorPickerAppPrimaryColor() {
-  const { appPrimaryBgColor, setAppPrimaryBgColor } = useAppearance()
+  const { appPrimaryBgColor, setAppPrimaryBgColor } = useInterfaceSettings()
 
   const predefineappPrimaryBgColor: RgbaColor[] = [
     {

web-app/src/containers/FontSizeSwitcher.tsx

@@ -1,15 +1,15 @@
-import {
+import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
-import { fontSizeOptions, useAppearance } from '@/hooks/useAppearance'
+import { fontSizeOptions, useInterfaceSettings } from '@/hooks/useInterfaceSettings'
 import { cn } from '@/lib/utils'
 import { useTranslation } from '@/i18n/react-i18next-compat'
 
 export function FontSizeSwitcher() {
-  const { fontSize, setFontSize } = useAppearance()
+  const { fontSize, setFontSize } = useInterfaceSettings()
   const { t } = useTranslation()
 
   return (

web-app/src/containers/ScrollToBottom.tsx

@@ -1,9 +1,9 @@
-import { useThreadScrolling } from '@/hooks/useThreadScrolling'
+import { useThreadScrolling } from '@/hooks/useThreadScrolling'
 import { memo } from 'react'
 import { GenerateResponseButton } from './GenerateResponseButton'
 import { useMessages } from '@/hooks/useMessages'
 import { useShallow } from 'zustand/react/shallow'
-import { useAppearance } from '@/hooks/useAppearance'
+import { useInterfaceSettings } from '@/hooks/useInterfaceSettings'
 import { cn } from '@/lib/utils'
 import { ArrowDown } from 'lucide-react'
 import { useTranslation } from '@/i18n/react-i18next-compat'
@@ -17,7 +17,7 @@ const ScrollToBottom = ({
   scrollContainerRef: React.RefObject<HTMLDivElement | null>
 }) => {
   const { t } = useTranslation()
-  const appMainViewBgColor = useAppearance((state) => state.appMainViewBgColor)
+  const appMainViewBgColor = useInterfaceSettings((state) => state.appMainViewBgColor)
   const { showScrollToBottomBtn, scrollToBottom } =
     useThreadScrolling(threadId, scrollContainerRef)
   const { messages } = useMessages(

web-app/src/containers/SettingsMenu.tsx

@@ -80,8 +80,8 @@ const SettingsMenu = () => {
       isEnabled: PlatformFeatures[PlatformFeature.ATTACHMENTS],
     },
     {
-      title: 'common:appearance',
-      route: route.settings.appearance,
+      title: 'common:interface',
+      route: route.settings.interface,
       hasSubMenu: false,
       isEnabled: true,
     },