feat: add toast component and update configs

.pre-commit-config.yaml

@@ -13,12 +13,12 @@ repos:
 
   - repo: local
     hooks:
-      - id: eslint
-        name: eslint
-        entry: bash -c 'cd wavefront/client && pnpm lint'
-        language: system
-        files: ^wavefront/client/.*\.(js|jsx|ts|tsx)$
-        pass_filenames: false # let eslint use its own ignore & config
+      # - id: eslint
+      #   name: eslint
+      #   entry: bash -c 'cd wavefront/client && pnpm lint'
+      #   language: system
+      #   files: ^wavefront/client/.*\.(js|jsx|ts|tsx)$
+      #   pass_filenames: false # let eslint use its own ignore & config
 
       - id: typescript-check
         name: typescript-check

wavefront/client/.env

@@ -1,4 +1,4 @@
-VITE_BASE_URL=https://console.dev.rootflo.ai/floconsole
+VITE_BASE_URL=http://localhost:8002/floconsole
 VITE_APP_ENV=local
 VITE_FEATURE_API_SERVICES=true
 

wavefront/client/src/App.tsx

@@ -1,10 +1,12 @@
 import { TOKEN_KEY } from '@app/lib/constants';
 import { useEffect } from 'react';
+import Toast from './components/ui/toast';
 import AppRouter from './router';
-import { useAuthStore } from './store';
+import { useAuthStore, useNotifyStore } from './store';
 
 function App() {
   const { setAuthenticatedState } = useAuthStore();
+  const { visible, reset, type, message } = useNotifyStore();
 
   useEffect(() => {
     const token = localStorage.getItem(TOKEN_KEY);
@@ -15,6 +17,7 @@ function App() {
   return (
     <div className="flex h-full w-screen flex-col items-center justify-center bg-white">
       <AppRouter />
+      <Toast visible={visible} reset={reset} type={type} message={message} />
     </div>
   );
 }

wavefront/client/src/assets/icons/toast-icons.tsx

@@ -0,0 +1,47 @@
+export const ToastSuccessIcon = () => {
+  return (
+    <div className="inline-flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-green-100 text-green-500 dark:bg-green-800 dark:text-green-200">
+      <svg
+        className="h-5 w-5"
+        aria-hidden="true"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="currentColor"
+        viewBox="0 0 20 20"
+      >
+        <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z" />
+      </svg>
+    </div>
+  );
+};
+
+export const ToastErrorIcon = () => {
+  return (
+    <div className="inline-flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-red-100 text-red-500 dark:bg-red-800 dark:text-red-200">
+      <svg
+        className="h-5 w-5"
+        aria-hidden="true"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="currentColor"
+        viewBox="0 0 20 20"
+      >
+        <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 11.793a1 1 0 1 1-1.414 1.414L10 11.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L8.586 10 6.293 7.707a1 1 0 0 1 1.414-1.414L10 8.586l2.293-2.293a1 1 0 0 1 1.414 1.414L11.414 10l2.293 2.293Z" />
+      </svg>
+    </div>
+  );
+};
+
+export const ToastWarningIcon = () => {
+  return (
+    <div className="inline-flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-orange-100 text-orange-500 dark:bg-orange-700 dark:text-orange-200">
+      <svg
+        className="h-5 w-5"
+        aria-hidden="true"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="currentColor"
+        viewBox="0 0 20 20"
+      >
+        <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM10 15a1 1 0 1 1 0-2 1 1 0 0 1 0 2Zm1-4a1 1 0 0 1-2 0V6a1 1 0 0 1 2 0v5Z" />
+      </svg>
+    </div>
+  );
+};

wavefront/client/src/components/ui/toast.tsx

@@ -0,0 +1,70 @@
+import { TToastType } from '@app/store';
+import { ToastErrorIcon, ToastSuccessIcon, ToastWarningIcon } from '@app/assets/icons/toast-icons';
+import { useEffect } from 'react';
+
+const iconMap = {
+  success: <ToastSuccessIcon />,
+  error: <ToastErrorIcon />,
+  warning: <ToastWarningIcon />,
+};
+
+const Toast = ({
+  visible,
+  reset,
+  type,
+  message,
+  timeout = 3000,
+}: {
+  visible: boolean;
+  reset: () => void;
+  type: TToastType;
+  message: string;
+  timeout?: number;
+}) => {
+  useEffect(() => {
+    if (visible) {
+      const timeoutId = setTimeout(reset, timeout);
+      return () => clearTimeout(timeoutId);
+    }
+  }, [visible, timeout, reset]);
+
+  if (!visible) return <></>;
+
+  return (
+    <>
+      <div
+        className="animate-fade-in fixed bottom-10 left-1/2 z-[1000] flex w-full max-w-xs -translate-x-1/2 items-center rounded-lg bg-white p-4 text-gray-500 shadow duration-150 dark:bg-gray-800 dark:text-gray-400"
+        role="alert"
+      >
+        {type && iconMap[type]}
+        <div className="ml-3 text-sm font-normal break-all">{message}</div>
+        <button
+          type="button"
+          className="-mx-1.5 -my-1.5 ml-auto inline-flex h-8 w-8 items-center justify-center rounded-lg bg-white p-1.5 text-gray-400 hover:bg-gray-100 hover:text-gray-900 focus:ring-2 focus:ring-gray-300 dark:bg-gray-800 dark:text-gray-500 dark:hover:bg-gray-700 dark:hover:text-white"
+          data-dismiss-target="#toast-success"
+          aria-label="Close"
+          onClick={() => reset()}
+        >
+          <span className="sr-only">Close</span>
+          <svg
+            className="h-3 w-3"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 14 14"
+          >
+            <path
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"
+            />
+          </svg>
+        </button>
+      </div>
+    </>
+  );
+};
+
+export default Toast;

wavefront/client/src/config/llm-providers.ts

@@ -50,22 +50,13 @@ export const LLM_PROVIDERS_CONFIG: Record<InferenceEngineType, ProviderConfig> =
         description: 'Controls randomness in responses (0-2)',
         placeholder: '0.7',
       },
-      max_tokens: {
-        type: 'number',
-        default: 150,
-        min: 1,
-        max: 16000,
-        step: 1,
-        description: 'Maximum number of tokens to generate',
-        placeholder: '150',
-      },
       max_completion_tokens: {
         type: 'number',
         default: undefined,
         min: 1,
         max: 16000,
         step: 1,
-        description: 'Maximum completion tokens (alternative to max_tokens)',
+        description: 'Maximum completion tokens',
         placeholder: '1000',
       },
       top_p: {
@@ -221,22 +212,13 @@ export const LLM_PROVIDERS_CONFIG: Record<InferenceEngineType, ProviderConfig> =
         description: 'Controls randomness in responses (0-2)',
         placeholder: '0.7',
       },
-      max_tokens: {
-        type: 'number',
-        default: 150,
-        min: 1,
-        max: 16000,
-        step: 1,
-        description: 'Maximum number of tokens to generate',
-        placeholder: '150',
-      },
       max_completion_tokens: {
         type: 'number',
         default: undefined,
         min: 1,
         max: 16000,
         step: 1,
-        description: 'Maximum completion tokens (alternative to max_tokens)',
+        description: 'Maximum completion tokens',
         placeholder: '1000',
       },
       top_p: {
@@ -293,22 +275,13 @@ export const LLM_PROVIDERS_CONFIG: Record<InferenceEngineType, ProviderConfig> =
         description: 'Controls randomness in responses (0-2)',
         placeholder: '0.7',
       },
-      max_tokens: {
-        type: 'number',
-        default: 150,
-        min: 1,
-        max: 8000,
-        step: 1,
-        description: 'Maximum number of tokens to generate',
-        placeholder: '150',
-      },
       max_completion_tokens: {
         type: 'number',
         default: undefined,
         min: 1,
         max: 8000,
         step: 1,
-        description: 'Maximum completion tokens (alternative to max_tokens)',
+        description: 'Maximum completion tokens',
         placeholder: '1000',
       },
       top_p: {

wavefront/client/src/config/voice-providers.ts

@@ -157,12 +157,6 @@ export const VOICE_PROVIDERS_CONFIG: VoiceProvidersConfig = {
             placeholder: '1.0',
             step: 0.1,
           },
-          emotion: {
-            type: 'array',
-            default: [],
-            description: 'Comma-separated emotion tags',
-            placeholder: 'happy, excited',
-          },
         },
       },
     },

wavefront/client/src/pages/apps/[appId]/agents/CreateAgentDialog.tsx

@@ -44,7 +44,7 @@ agent:
     name: gemini-2.5-flash
   settings:
     temperature: 0.7
-job: You are a translator. Use this tone <tone>
+  job: You are a translator. Use this tone <tone>
 `;
 
 interface CreateAgentDialogProps {

wavefront/client/src/pages/apps/[appId]/knowledge-bases/[kbId]/index.tsx

@@ -53,7 +53,7 @@ const KnowledgeBaseDetailPage: React.FC = () => {
   // Create System Prompt Dialog state
   const [showCreatePromptModal, setShowCreatePromptModal] = useState<boolean>(false);
   const [systemPrompt, setSystemPrompt] = useState<string>('');
-  const [selectedConfigId, setSelectedConfigId] = useState<string>('');
+  const [selectedConfigId, setSelectedConfigId] = useState<string | null>(null);
   const [creatingPrompt, setCreatingPrompt] = useState<boolean>(false);
 
   // Test Inference Dialog state
@@ -147,7 +147,7 @@ const KnowledgeBaseDetailPage: React.FC = () => {
         queryClient.invalidateQueries({ queryKey: getKnowledgeBaseInferencesKey(appId || '', kbId || '') });
         setShowCreatePromptModal(false);
         setSystemPrompt('');
-        setSelectedConfigId('');
+        setSelectedConfigId(null);
       } else {
         notifyError('Failed to create system prompt.');
       }
@@ -162,7 +162,7 @@ const KnowledgeBaseDetailPage: React.FC = () => {
   const handleCloseCreatePromptModal = () => {
     setShowCreatePromptModal(false);
     setSystemPrompt('');
-    setSelectedConfigId('');
+    setSelectedConfigId(null);
   };
 
   const handleOpenTestInference = (inferenceId: string) => {
@@ -488,7 +488,11 @@ const KnowledgeBaseDetailPage: React.FC = () => {
               <Label htmlFor="llm-config" className="mb-2">
                 Select LLM Model <span className="text-red-500">*</span>
               </Label>
-              <Select value={selectedConfigId} onValueChange={setSelectedConfigId} disabled={llmConfigs.length === 0}>
+              <Select
+                value={selectedConfigId ?? undefined}
+                onValueChange={(value) => setSelectedConfigId(value ?? null)}
+                disabled={llmConfigs.length === 0}
+              >
                 <SelectTrigger>
                   <SelectValue placeholder="Select an LLM configuration" />
                 </SelectTrigger>

wavefront/client/src/store/notification-store.ts

@@ -1,6 +1,6 @@
 import { create } from 'zustand';
 
-type TToastType = 'success' | 'error' | 'warning' | null;
+export type TToastType = 'success' | 'error' | 'warning' | null;
 
 type State = {
   visible: boolean;

wavefront/client/src/types/tts-config.ts

@@ -71,5 +71,4 @@ export interface CartesiaParameters {
   model?: string; // default: 'sonic-2'
   language?: string; // Language enum
   speed?: number;
-  emotion?: string[];
 }