feat: add chat width setting option for thread (#4278)

web/containers/Layout/TopPanel/index.tsx

@@ -144,7 +144,7 @@ const TopPanel = () => {
             theme="icon"
             onClick={() => {
               setMainViewState(MainViewState.Settings)
-              setSelectedSetting('Appearance')
+              setSelectedSetting('Preferences')
             }}
           >
             <PaletteIcon size={16} className="cursor-pointer" />

web/helpers/atoms/Setting.atom.ts

@@ -16,6 +16,7 @@ export const PRODUCT_ANALYTIC_PROMPT = 'productAnalyticPrompt'
 export const THEME_DATA = 'themeData'
 export const THEME_OPTIONS = 'themeOptions'
 export const THEME_PATH = 'themePath'
+export const CHAT_WIDTH = 'chatWidth'
 export const themesOptionsAtom = atomWithStorage<
   { name: string; value: string }[]
 >(THEME_OPTIONS, [], undefined, { getOnInit: true })
@@ -61,3 +62,9 @@ export const productAnalyticPromptAtom = atomWithStorage<boolean>(
   undefined,
   { getOnInit: true }
 )
+export const chatWidthAtom = atomWithStorage<string>(
+  CHAT_WIDTH,
+  'full',
+  undefined,
+  { getOnInit: true }
+)

web/screens/Settings/Appearance/index.tsx

@@ -7,6 +7,7 @@ import { Button, Select, Switch } from '@janhq/joi'
 import { useAtom, useAtomValue } from 'jotai'
 
 import {
+  chatWidthAtom,
   janThemesPathAtom,
   reduceTransparentAtom,
   selectedThemeIdAtom,
@@ -25,6 +26,16 @@ export default function AppearanceOptions() {
     reduceTransparentAtom
   )
   const [spellCheck, setSpellCheck] = useAtom(spellCheckAtom)
+  const [chatWidth, setChatWidth] = useAtom(chatWidthAtom)
+
+  const chatWidthOption = [
+    { name: 'Full Width', value: 'full', img: 'images/full-width.png' },
+    {
+      name: 'Compact Width',
+      value: 'compact',
+      img: 'images/compact-width.png',
+    },
+  ]
 
   const handleClickTheme = useCallback(
     async (e: string) => {
@@ -91,6 +102,54 @@ export default function AppearanceOptions() {
           </div>
         </div>
       )}
+      <div className="flex w-full flex-col items-start justify-between gap-4 border-b border-[hsla(var(--app-border))] py-4 first:pt-0 last:border-none sm:flex-row">
+        <div className="w-full space-y-1 lg:w-3/4">
+          <div className="flex gap-x-2">
+            <h6 className="font-semibold capitalize">Chat Width</h6>
+          </div>
+          <p className=" font-medium leading-relaxed text-[hsla(var(--text-secondary))]">
+            Choose the width of the chat area to customize your conversation
+            view
+          </p>
+        </div>
+        <div className="flex-shrink-0">
+          <div className="flex items-center gap-4">
+            {chatWidthOption.map((option) => {
+              return (
+                <div
+                  className="inline-flex flex-col items-center justify-center text-center"
+                  key={option.name}
+                >
+                  <label
+                    className="relative cursor-pointer"
+                    htmlFor={option.name}
+                  >
+                    <img
+                      src={option.img}
+                      alt={option.value}
+                      width={140}
+                      className="rounded-lg"
+                    />
+                    <p className="my-2 font-medium">{option.name}</p>
+                    <div className="relative">
+                      <input
+                        name="chatWidth"
+                        value={option.value}
+                        checked={chatWidth === option.value}
+                        onChange={() => setChatWidth(option.value)}
+                        type="radio"
+                        className="peer h-5 w-5 cursor-pointer appearance-none rounded-full border border-[hsla(var(--app-border))] transition-all checked:border-[hsla(var(--primary-bg))]"
+                        id={option.name}
+                      />
+                      <span className="absolute left-1/2 top-1/2 -mt-[3px] h-3 w-3 -translate-x-1/2 -translate-y-1/2 transform rounded-full bg-[hsla(var(--primary-bg))] opacity-0 transition-opacity duration-200 peer-checked:opacity-100"></span>
+                    </div>
+                  </label>
+                </div>
+              )
+            })}
+          </div>
+        </div>
+      </div>
       <div className="flex w-full flex-col items-start justify-between gap-4 border-b border-[hsla(var(--app-border))] py-4 first:pt-0 last:border-none sm:flex-row">
         <div className="w-full space-y-1 lg:w-3/4">
           <div className="flex gap-x-2">

web/screens/Settings/SettingDetail/index.tsx

@@ -17,7 +17,7 @@ const SettingDetail = () => {
     case 'Extensions':
       return <ExtensionCatalog />
 
-    case 'Appearance':
+    case 'Preferences':
       return <AppearanceOptions />
 
     case 'Keyboard Shortcuts':

web/screens/Settings/index.tsx

@@ -13,7 +13,7 @@ import { selectedSettingAtom } from '@/helpers/atoms/Setting.atom'
 
 export const SettingScreenList = [
   'My Models',
-  'Appearance',
+  'Preferences',
   'Keyboard Shortcuts',
   'Privacy',
   'Advanced Settings',

web/screens/Thread/ThreadCenterPanel/TextMessage/index.tsx

@@ -23,6 +23,8 @@ import {
   tokenSpeedAtom,
 } from '@/helpers/atoms/ChatMessage.atom'
 
+import { chatWidthAtom } from '@/helpers/atoms/Setting.atom'
+
 const MessageContainer: React.FC<
   ThreadMessage & { isCurrentMessage: boolean }
 > = (props) => {
@@ -31,6 +33,7 @@ const MessageContainer: React.FC<
   const editMessage = useAtomValue(editMessageAtom)
   const activeAssistant = useAtomValue(activeAssistantAtom)
   const tokenSpeed = useAtomValue(tokenSpeedAtom)
+  const chatWidth = useAtomValue(chatWidthAtom)
 
   const text = useMemo(
     () =>
@@ -47,7 +50,12 @@ const MessageContainer: React.FC<
   const attachedFile = useMemo(() => 'attachments' in props, [props])
 
   return (
-    <div className="group relative mx-auto max-w-[700px] p-4">
+    <div
+      className={twMerge(
+        'group relative mx-auto p-4',
+        chatWidth === 'compact' && 'max-w-[700px]'
+      )}
+    >
       <div
         className={twMerge(
           'mb-2 flex items-center justify-start gap-x-2',