Merge branch 'main' into docs/add-guides

docs/docs/about/about.md

@@ -64,7 +64,7 @@ Jan is a startup with an open source business model. We believe in the need for
 We use Github to build in public, and welcome anyone to join in.  
 
 - [Jan's Kanban](https://github.com/orgs/janhq/projects/5)
-- [Jan's Roadmap](https://github.com/orgs/janhq/projects/5/views/2)
+- [Jan's Roadmap](https://github.com/orgs/janhq/projects/5/views/29)
 
 ### Bootstrapped
 
@@ -90,4 +90,4 @@ Drop us a message in our [Discord](https://discord.gg/af6SaTdzpx) and we'll get
 
 Jan has a culture of ownership, independent thought, and lightning fast execution. If you'd like to join us, we have open positions on our [careers page](https://janai.bamboohr.com/careers).   
 
-## Footnotes
+## Footnotes

web/screens/Chat/ModelSetting/predefinedComponent.ts

@@ -72,7 +72,7 @@ export const presetConfiguration: Record<string, SettingComponentData> = {
   stream: {
     name: 'stream',
     title: 'Stream',
-    description: 'Stream',
+    description: 'Enable real-time data processing for faster predictions.',
     controllerType: 'checkbox',
     controllerData: {
       checked: false,

web/screens/Chat/Sidebar/index.tsx

@@ -19,7 +19,7 @@ import DropdownListSidebar, {
 import { useCreateNewThread } from '@/hooks/useCreateNewThread'
 
 import { getConfigurationsData } from '@/utils/componentSettings'
-import { toSettingParams } from '@/utils/model_param'
+import { toRuntimeParams, toSettingParams } from '@/utils/model_param'
 
 import EngineSetting from '../EngineSetting'
 import ModelSetting from '../ModelSetting'
@@ -44,7 +44,9 @@ const Sidebar: React.FC = () => {
   const threadStates = useAtomValue(threadStatesAtom)
 
   const modelEngineParams = toSettingParams(activeModelParams)
+  const modelRuntimeParams = toRuntimeParams(activeModelParams)
   const componentDataEngineSetting = getConfigurationsData(modelEngineParams)
+  const componentDataRuntimeSetting = getConfigurationsData(modelRuntimeParams)
 
   const onReviewInFinderClick = async (type: string) => {
     if (!activeThread) return
@@ -224,34 +226,42 @@ const Sidebar: React.FC = () => {
               <DropdownListSidebar />
             </div>
 
-            <div className="mt-6">
+            {componentDataRuntimeSetting.length !== 0 && (
-              <CardSidebar title="Inference Parameters" asChild>
+              <div className="mt-6">
-                <div className="px-2 py-4">
+                <CardSidebar title="Inference Parameters" asChild>
-                  <ModelSetting />
+                  <div className="px-2 py-4">
-                </div>
+                    <ModelSetting />
-              </CardSidebar>
+                  </div>
-            </div>
+                </CardSidebar>
+              </div>
+            )}
 
-            <div className="mt-4">
+            {componentDataEngineSetting.filter(
-              <CardSidebar title="Model Parameters" asChild>
+              (x) => x.name === 'prompt_template'
-                <div className="px-2 py-4">
+            ).length !== 0 && (
-                  {settingComponentBuilder(componentDataEngineSetting, true)}
+              <div className="mt-4">
-                </div>
+                <CardSidebar title="Model Parameters" asChild>
-              </CardSidebar>
+                  <div className="px-2 py-4">
-            </div>
+                    {settingComponentBuilder(componentDataEngineSetting, true)}
+                  </div>
+                </CardSidebar>
+              </div>
+            )}
 
-            <div className="my-4">
+            {componentDataEngineSetting.length !== 0 && (
-              <CardSidebar
+              <div className="my-4">
-                title="Engine Parameters"
+                <CardSidebar
-                onRevealInFinderClick={onReviewInFinderClick}
+                  title="Engine Parameters"
-                onViewJsonClick={onViewJsonClick}
+                  onRevealInFinderClick={onReviewInFinderClick}
-                asChild
+                  onViewJsonClick={onViewJsonClick}
-              >
+                  asChild
-                <div className="px-2 py-4">
+                >
-                  <EngineSetting />
+                  <div className="px-2 py-4">
-                </div>
+                    <EngineSetting />
-              </CardSidebar>
+                  </div>
-            </div>
+                </CardSidebar>
+              </div>
+            )}
           </div>
         </CardSidebar>
       </div>

web/screens/Chat/ThreadList/index.tsx

@@ -5,6 +5,7 @@ import {
   ModalTrigger,
   ModalClose,
   ModalFooter,
+  ModalPortal,
   ModalContent,
   ModalHeader,
   ModalTitle,
@@ -89,7 +90,9 @@ export default function ThreadList() {
               className={twMerge(
                 `group/message relative mb-1 flex cursor-pointer flex-col transition-all hover:rounded-lg hover:bg-gray-100 hover:dark:bg-secondary/50`
               )}
-              onClick={() => onThreadClick(thread)}
+              onClick={() => {
+                onThreadClick(thread)
+              }}
             >
               <div className="relative z-10 p-4 py-4">
                 <div className="flex justify-between">
@@ -111,7 +114,7 @@ export default function ThreadList() {
                 <MoreVerticalIcon />
                 <div className="invisible absolute right-0 z-20 w-40 overflow-hidden rounded-lg border border-border bg-background shadow-lg group-hover/icon:visible">
                   <Modal>
-                    <ModalTrigger asChild>
+                    <ModalTrigger asChild onClick={(e) => e.stopPropagation()}>
                       <div className="flex cursor-pointer items-center space-x-2 px-4 py-2 hover:bg-secondary">
                         <Paintbrush
                           size={16}
@@ -122,6 +125,7 @@ export default function ThreadList() {
                         </span>
                       </div>
                     </ModalTrigger>
+                    <ModalPortal />
                     <ModalContent>
                       <ModalHeader>
                         <ModalTitle>Clean Thread</ModalTitle>
@@ -129,13 +133,19 @@ export default function ThreadList() {
                       <p>Are you sure you want to clean this thread?</p>
                       <ModalFooter>
                         <div className="flex gap-x-2">
-                          <ModalClose asChild>
+                          <ModalClose
+                            asChild
+                            onClick={(e) => e.stopPropagation()}
+                          >
                             <Button themes="ghost">No</Button>
                           </ModalClose>
                           <ModalClose asChild>
                             <Button
                               themes="danger"
-                              onClick={() => cleanThread(thread.id)}
+                              onClick={(e) => {
+                                e.stopPropagation()
+                                cleanThread(thread.id)
+                              }}
                               autoFocus
                             >
                               Yes
@@ -145,9 +155,8 @@ export default function ThreadList() {
                       </ModalFooter>
                     </ModalContent>
                   </Modal>
-
                   <Modal>
-                    <ModalTrigger asChild>
+                    <ModalTrigger asChild onClick={(e) => e.stopPropagation()}>
                       <div className="flex cursor-pointer items-center space-x-2 px-4 py-2 hover:bg-secondary">
                         <Trash2Icon
                           size={16}
@@ -158,6 +167,7 @@ export default function ThreadList() {
                         </span>
                       </div>
                     </ModalTrigger>
+                    <ModalPortal />
                     <ModalContent>
                       <ModalHeader>
                         <ModalTitle>Delete Thread</ModalTitle>
@@ -168,14 +178,20 @@ export default function ThreadList() {
                       </p>
                       <ModalFooter>
                         <div className="flex gap-x-2">
-                          <ModalClose asChild>
+                          <ModalClose
+                            asChild
+                            onClick={(e) => e.stopPropagation()}
+                          >
                             <Button themes="ghost">No</Button>
                           </ModalClose>
                           <ModalClose asChild>
                             <Button
                               autoFocus
                               themes="danger"
-                              onClick={() => deleteThread(thread.id)}
+                              onClick={(e) => {
+                                e.stopPropagation()
+                                deleteThread(thread.id)
+                              }}
                             >
                               Yes
                             </Button>