feat: predefined params (#5128)

web-app/src/containers/DropdownAssistant.tsx

@@ -94,8 +94,8 @@ const DropdownAssistant = () => {
                       textClassName=""
                     />
                   </div>
-                  <div className="truncate text-left">
+                  <div className="text-left">
-                    <span>{assistant.name}</span>
+                    <span className="line-clamp-1">{assistant.name}</span>
                   </div>
                 </div>
               </DropdownMenuItem>

web-app/src/containers/dialogs/AddEditAssistant.tsx

@@ -8,10 +8,16 @@ import {
 } from '@/components/ui/dialog'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
-import { IconPlus, IconTrash, IconChevronDown } from '@tabler/icons-react'
+import {
+  IconPlus,
+  IconTrash,
+  IconChevronDown,
+  IconMoodSmile,
+} from '@tabler/icons-react'
 import EmojiPicker, { EmojiClickData, Theme } from 'emoji-picker-react'
 
 import { Textarea } from '@/components/ui/textarea'
+import { paramsSettings } from '@/lib/predefinedParams'
 
 import {
   DropdownMenu,
@@ -23,6 +29,7 @@ import { useTheme } from '@/hooks/useTheme'
 import { teamEmoji } from '@/utils/teamEmoji'
 import { AvatarEmoji } from '@/containers/AvatarEmoji'
 import { useTranslation } from 'react-i18next'
+import { cn } from '@/lib/utils'
 
 interface AddEditAssistantProps {
   open: boolean
@@ -228,7 +235,9 @@ export default function AddEditAssistant({
               >
                 <AvatarEmoji
                   avatar={avatar}
-                  fallback="😊"
+                  fallback={
+                    <IconMoodSmile size={18} className="text-main-view-fg/50" />
+                  }
                   imageClassName="w-5 h-5 object-contain"
                   textClassName=""
                 />
@@ -291,6 +300,63 @@ export default function AddEditAssistant({
             />
           </div>
 
+          <div className="space-y-2 my-4">
+            <div className="flex items-center justify-between">
+              <label className="text-sm">Predefined Parameters</label>
+            </div>
+            <div className="flex flex-wrap gap-2">
+              {Object.entries(paramsSettings).map(([key, setting]) => (
+                <div
+                  key={key}
+                  onClick={() => {
+                    // Check if parameter already exists
+                    const existingIndex = paramsKeys.findIndex(
+                      (k) => k === setting.key
+                    )
+                    if (existingIndex === -1) {
+                      // Add new parameter
+                      const newKeys = [...paramsKeys]
+                      const newValues = [...paramsValues]
+                      const newTypes = [...paramsTypes]
+
+                      // If the last param is empty, replace it, otherwise add new
+                      if (paramsKeys[paramsKeys.length - 1] === '') {
+                        newKeys[newKeys.length - 1] = setting.key
+                        newValues[newValues.length - 1] = setting.value
+                        newTypes[newTypes.length - 1] =
+                          typeof setting.value === 'boolean'
+                            ? 'boolean'
+                            : typeof setting.value === 'number'
+                              ? 'number'
+                              : 'string'
+                      } else {
+                        newKeys.push(setting.key)
+                        newValues.push(setting.value)
+                        newTypes.push(
+                          typeof setting.value === 'boolean'
+                            ? 'boolean'
+                            : typeof setting.value === 'number'
+                              ? 'number'
+                              : 'string'
+                        )
+                      }
+
+                      setParamsKeys(newKeys)
+                      setParamsValues(newValues)
+                      setParamsTypes(newTypes)
+                    }
+                  }}
+                  className={cn(
+                    'text-xs bg-main-view-fg/10 py-1 px-2 rounded-sm cursor-pointer',
+                    paramsKeys.includes(setting.key) && 'opacity-50'
+                  )}
+                >
+                  {setting.title}
+                </div>
+              ))}
+            </div>
+          </div>
+
           <div className="space-y-2">
             <div className="flex items-center justify-between">
               <label className="text-sm">Parameters</label>

web-app/src/lib/predefinedParams.ts

@@ -0,0 +1,40 @@
+export const paramsSettings = {
+  stream: {
+    key: 'stream',
+    value: true,
+    title: 'Stream',
+    description: `Enables real-time response streaming.`,
+  },
+  temperature: {
+    key: 'temperature',
+    value: 0.7,
+    title: 'Temperature',
+    description: `Controls response randomness. Higher values produce more creative, varied responses. `,
+  },
+  frequency_penalty: {
+    key: 'frequency_penalty',
+    value: 0.7,
+    title: 'Frequency Penalty',
+    description: `Reduces word repetition. Higher values encourage more varied language. Useful for creative writing and content generation.`,
+  },
+  presence_penalty: {
+    key: 'presence_penalty',
+    value: 0.7,
+    title: 'Presence Penalty',
+    description: `Encourages the model to explore new topics. Higher values help prevent the model from fixating on already-discussed subjects.`,
+  },
+  top_p: {
+    key: 'top_p',
+    value: 0.95,
+    title: 'Top P',
+    description: `Set probability threshold for more relevant outputs. Higher values allow more diverse word choices.`,
+    controllerType: 'slider',
+  },
+  top_k: {
+    key: 'top_k',
+    value: 2,
+    title: 'Top K',
+    description:
+      'Number of most relevant documents to retrieve. Higher values return more results.',
+  },
+}

web-app/src/routes/assistant.tsx

@@ -76,7 +76,7 @@ function Assistant() {
                         textClassName="text-sm"
                       />
                     </span>
-                    <span>{assistant.name}</span>
+                    <span className="line-clamp-1">{assistant.name}</span>
                   </div>
                 </h3>
                 <div className="flex items-center gap-0.5">