feat: add toast component and update configs#177
Conversation
WalkthroughAdds a toast notification system (store export, Toast component, icon components) and integrates it into App; removes deprecated provider parameters ( Changes
Sequence Diagram(s)sequenceDiagram
participant App as App.tsx
participant Store as useNotifyStore
participant Toast as Toast component
participant Icons as Toast Icons
Note over App,Store: app triggers a notification (set visible,type,message)
App->>Store: set notification state
Store-->>App: notification state (visible,type,message,reset)
App->>Toast: render Toast(visible,type,message,reset)
Toast->>Icons: choose icon by type
Toast->>Toast: start auto-dismiss timer (timeout)
alt timeout expires
Toast->>Store: call reset()
Store-->>App: visible:false
else user clicks close
Toast->>Store: call reset()
Store-->>App: visible:false
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (2 warnings)
✅ Passed checks (1 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
wavefront/client/src/components/ui/toast.tsx (1)
5-9: Consider excluding null from iconMap or tightening type.The
iconMaponly has entries for"success" | "error" | "warning", butTToastTypeincludesnull. While the runtime guard at Line 36 (type && iconMap[type]) makes this safe, explicitly typingiconMapwould improve clarity.-const iconMap = { +const iconMap: Record<Exclude<TToastType, null>, JSX.Element> = { success: <ToastSuccessIcon />, error: <ToastErrorIcon />, warning: <ToastWarningIcon />, };
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (8)
wavefront/client/src/App.tsx(2 hunks)wavefront/client/src/assets/icons/toast-icons.tsx(1 hunks)wavefront/client/src/components/ui/toast.tsx(1 hunks)wavefront/client/src/config/llm-providers.ts(3 hunks)wavefront/client/src/config/voice-providers.ts(0 hunks)wavefront/client/src/pages/apps/[appId]/agents/CreateAgentDialog.tsx(1 hunks)wavefront/client/src/store/notification-store.ts(1 hunks)wavefront/client/src/types/tts-config.ts(0 hunks)
💤 Files with no reviewable changes (2)
- wavefront/client/src/types/tts-config.ts
- wavefront/client/src/config/voice-providers.ts
🧰 Additional context used
🧬 Code graph analysis (2)
wavefront/client/src/components/ui/toast.tsx (2)
wavefront/client/src/assets/icons/toast-icons.tsx (3)
ToastSuccessIcon(1-15)ToastErrorIcon(17-31)ToastWarningIcon(33-47)wavefront/client/src/store/notification-store.ts (1)
TToastType(3-3)
wavefront/client/src/App.tsx (1)
wavefront/client/src/store/notification-store.ts (1)
useNotifyStore(35-35)
🔇 Additional comments (5)
wavefront/client/src/store/notification-store.ts (1)
3-3: LGTM!Exporting
TToastTypeenables the Toast component to use this type for type safety. The store implementation is clean and follows Zustand best practices.wavefront/client/src/App.tsx (1)
4-5: LGTM!The Toast integration is clean and properly wired to the notification store. The component receives all required props from
useNotifyStore().Also applies to: 9-9, 20-20
wavefront/client/src/assets/icons/toast-icons.tsx (1)
1-47: LGTM!The icon components are well-structured with proper accessibility attributes and consistent styling. The implementation is clean and follows React best practices.
wavefront/client/src/config/llm-providers.ts (1)
59-59: LGTM!The description updates for
max_completion_tokensare consistent across OpenAI, Azure OpenAI, and Groq providers, improving clarity.Also applies to: 221-221, 284-284
wavefront/client/src/pages/apps/[appId]/agents/CreateAgentDialog.tsx (1)
47-47: The YAML structure is correct:jobis properly nested under theagentblock, which is the expected schema. This matches all test examples and backend parsing logic that extracts properties fromyaml_data.get('agent', {}).
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
wavefront/client/src/pages/apps/[appId]/knowledge-bases/[kbId]/index.tsx(3 hunks)
🔇 Additional comments (1)
wavefront/client/src/pages/apps/[appId]/knowledge-bases/[kbId]/index.tsx (1)
150-166: Resets toundefinedare consistent and should fix “empty string treated as selected”.
Both post-create and modal-cancel now reliably clear the selection state.
| const [showCreatePromptModal, setShowCreatePromptModal] = useState<boolean>(false); | ||
| const [systemPrompt, setSystemPrompt] = useState<string>(''); | ||
| const [selectedConfigId, setSelectedConfigId] = useState<string>(''); | ||
| const [selectedConfigId, setSelectedConfigId] = useState<string | undefined>(undefined); |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
find . -type f \( -name "*.tsx" -o -name "*.ts" \) | xargs grep -l "export.*Select" | grep -E "ui/select|components/select" | head -5Repository: rootflo/wavefront
Length of output: 43
🏁 Script executed:
fd "select" --type f -e tsx -e ts | grep -i "components\|ui" | head -10Repository: rootflo/wavefront
Length of output: 106
🏁 Script executed:
rg "from.*@app/components/ui/select" -n --type ts --type tsxRepository: rootflo/wavefront
Length of output: 88
🏁 Script executed:
cat -n wavefront/client/src/components/ui/select.tsx | head -100Repository: rootflo/wavefront
Length of output: 4891
🏁 Script executed:
rg "value" wavefront/client/src/components/ui/select.tsx -n -A 2 -B 2Repository: rootflo/wavefront
Length of output: 43
🏁 Script executed:
rg -A 10 "selectedConfigId" wavefront/client/src/pages/apps/*/knowledge-bases/*/index.tsxRepository: rootflo/wavefront
Length of output: 2392
🏁 Script executed:
rg "SelectPrimitive.Root" wavefront/client/src/components/ui/select.tsx -n -B 3 -A 3Repository: rootflo/wavefront
Length of output: 196
🏁 Script executed:
# Check if there are any TypeScript errors related to Select and undefined value
rg "value=\{selectedConfigId\}" wavefront/client/src/pages/apps/*/knowledge-bases/*/index.tsx -n -B 5 -A 5Repository: rootflo/wavefront
Length of output: 670
🏁 Script executed:
# Search for Select value prop typing in any custom type definitions
fd "select" --type f -e d.ts -e ts | xargs grep -l "value.*:" 2>/dev/null | head -5Repository: rootflo/wavefront
Length of output: 43
🏁 Script executed:
# Check if the code builds successfully by looking for any tsconfig or type checking configs
find . -name "tsconfig.json" -o -name "tsconfig.*.json" | head -3Repository: rootflo/wavefront
Length of output: 168
🏁 Script executed:
# Check the tsconfig to see if strict mode is enabled
cat wavefront/client/tsconfig.json | grep -A 5 -B 5 "strict"Repository: rootflo/wavefront
Length of output: 43
🏁 Script executed:
# Search for Radix UI select package.json to check version
find . -path "*/node_modules/@radix-ui/react-select/package.json" | head -1 | xargs cat 2>/dev/null | grep -E '"version"|"name"'Repository: rootflo/wavefront
Length of output: 43
🏁 Script executed:
# Look for type definitions or check if there are any TS errors in build logs
fd "react-select" --type f -e d.ts | head -5Repository: rootflo/wavefront
Length of output: 43
🏁 Script executed:
# Check if undefined is actually passed in other Select usages in the codebase
rg "value=\{" wavefront/client/src --type ts --type tsx | grep -i select | head -10Repository: rootflo/wavefront
Length of output: 88
🏁 Script executed:
cat wavefront/client/tsconfig.jsonRepository: rootflo/wavefront
Length of output: 262
🏁 Script executed:
# Get the full context around the Select usage
sed -n '480,510p' wavefront/client/src/pages/apps/*/knowledge-bases/*/index.tsxRepository: rootflo/wavefront
Length of output: 1478
🏁 Script executed:
# Check what Radix UI version is used - look in package.json
find . -maxdepth 3 -name "package.json" -path "*/client/*" | head -1 | xargs grep "@radix-ui"Repository: rootflo/wavefront
Length of output: 600
🏁 Script executed:
cat wavefront/client/tsconfig.app.jsonRepository: rootflo/wavefront
Length of output: 794
🏁 Script executed:
# Check if there are any TypeScript errors by looking for eslint or type-check configs
find wavefront/client -maxdepth 2 -name ".eslintrc*" -o -name "tsconfig*.json" | xargs ls -la 2>/dev/nullRepository: rootflo/wavefront
Length of output: 306
🏁 Script executed:
# Search for other uses of undefined with state/Select in the codebase to see if pattern is consistent
rg "useState.*undefined\>" wavefront/client/src --type ts -c | head -5Repository: rootflo/wavefront
Length of output: 167
🏁 Script executed:
# Check the full Select wrapper file to see if there's custom typing on the Root export
cat wavefront/client/src/components/ui/select.tsx | tail -50Repository: rootflo/wavefront
Length of output: 1852
🏁 Script executed:
# Search for any @ts-ignore or type casts in the target file around the Select usage
rg "@ts-ignore|as const|as any|as string" wavefront/client/src/pages/apps/*/knowledge-bases/*/index.tsx -n -B 3 -A 3Repository: rootflo/wavefront
Length of output: 43
🏁 Script executed:
# Check if Select value prop accepts undefined by looking at actual usage patterns
rg "value=\{undefined\}|value=\{null\}" wavefront/client/src -n | head -10Repository: rootflo/wavefront
Length of output: 43
🏁 Script executed:
# Search for the exact line 56 in the file to see context
sed -n '50,70p' wavefront/client/src/pages/apps/*/knowledge-bases/*/index.tsxRepository: rootflo/wavefront
Length of output: 1277
🏁 Script executed:
# Check if this file has any TypeScript compilation errors by looking at nearby imports/types
head -30 wavefront/client/src/pages/apps/*/knowledge-bases/*/index.tsx | grep -E "import|useState|type"Repository: rootflo/wavefront
Length of output: 805
🏁 Script executed:
# Verify Radix UI Select documentation expectations - check node_modules types if available
find . -path "*/@radix-ui/react-select*" -name "*.d.ts" 2>/dev/null | head -3Repository: rootflo/wavefront
Length of output: 43
🏁 Script executed:
# Final check: look for SelectValue usage to understand how undefined should be handled
rg "SelectValue" wavefront/client/src/pages/apps/*/knowledge-bases/*/index.tsx -n -A 2 -B 2Repository: rootflo/wavefront
Length of output: 759
Use null instead of undefined for unselected state to match Radix UI Select's type expectations.
The Select component is a direct wrapper around @radix-ui/react-select (Radix UI v2.2.6), which expects the value prop to be string (or string | null). Passing undefined conflicts with this type signature and violates the strict TypeScript mode enabled in the project (tsconfig.app.json has "strict": true). The codebase consistently uses | null for optional states elsewhere (e.g., testInferenceId, documentToDelete), making | undefined an outlier. Change useState<string | undefined>(undefined) to useState<string | null>(null) and update resets to setSelectedConfigId(null).
🤖 Prompt for AI Agents
In wavefront/client/src/pages/apps/[appId]/knowledge-bases/[kbId]/index.tsx
around line 56, the selectedConfigId state uses useState<string |
undefined>(undefined) but Radix Select expects string | null; change the state
declaration to use useState<string | null>(null) and replace any resets or
assignments that set it to undefined with setSelectedConfigId(null) so the
component's value prop matches the expected type and remains consistent with the
codebase's null-optional pattern.
vishnurk6247
changed the title
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (7)
.pre-commit-config.yaml(1 hunks)wavefront/client/.env(1 hunks)wavefront/client/src/App.tsx(2 hunks)wavefront/client/src/components/ui/toast.tsx(1 hunks)wavefront/client/src/pages/apps/[appId]/knowledge-bases/[kbId]/index.tsx(4 hunks)wavefront/client/src/store/notification-store.ts(1 hunks)wavefront/client/src/types/tts-config.ts(0 hunks)
💤 Files with no reviewable changes (1)
- wavefront/client/src/types/tts-config.ts
✅ Files skipped from review due to trivial changes (1)
- .pre-commit-config.yaml
🚧 Files skipped from review as they are similar to previous changes (1)
- wavefront/client/src/components/ui/toast.tsx
🧰 Additional context used
🧬 Code graph analysis (2)
wavefront/client/src/pages/apps/[appId]/knowledge-bases/[kbId]/index.tsx (1)
wavefront/client/src/components/ui/select.tsx (1)
Select(133-133)
wavefront/client/src/App.tsx (1)
wavefront/client/src/store/notification-store.ts (1)
useNotifyStore(32-32)
🔇 Additional comments (5)
wavefront/client/src/App.tsx (1)
3-3: LGTM! Clean integration of the toast notification system.The Toast component is properly integrated:
- Import statements are correct
- Store hook usage is appropriate
- Toast is rendered at the root level, making it globally accessible
- Props are correctly passed from the notification store to the Toast component
Also applies to: 5-5, 9-9, 20-20
wavefront/client/src/store/notification-store.ts (1)
3-3: LGTM! Necessary type export for external usage.Exporting
TToastTypeallows the Toast component and other consumers to use the type for proper type safety. This is a correct and necessary change.wavefront/client/src/pages/apps/[appId]/knowledge-bases/[kbId]/index.tsx (3)
56-56: LGTM! State type now usesnullconsistently.This change addresses the past review feedback and aligns with the codebase pattern where optional state uses
string | null(e.g.,documentToDelete,testInferenceId,inferenceToDelete). Usingnullfor "no selection" is more idiomatic thanundefined.
150-150: LGTM! State resets correctly usenull.The state is properly reset to
nullafter successful creation and when closing the dialog, consistent with the new state type.Also applies to: 165-165
491-495: The type conversions are necessary and should not be simplified.Radix UI Select Root's
valueprop is typed asstring(optional), notstring | null. The current implementation correctly bridges the gap between the component's state type (string | null) and Radix UI's type requirement:
selectedConfigId ?? undefinedconvertsnulltoundefinedfor the value prop (Radix UI requirement)value ?? nullin the callback convertsundefinedback tonullfor the state (state type requirement)The past review's claim that Select expects
string | nullwas incorrect. The current conversions are appropriate and should be retained.
| @@ -1,4 +1,4 @@ | |||
| VITE_BASE_URL=https://console.dev.rootflo.ai/floconsole | |||
| VITE_BASE_URL=http://localhost:8002/floconsole | |||
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Check if .env is in .gitignore
if git check-ignore wavefront/client/.env > /dev/null 2>&1; then
echo ".env is gitignored ✓"
else
echo ".env is NOT gitignored - should be added to .gitignore"
echo ""
echo "Current .gitignore entries:"
rg -n "\.env" .gitignore || echo "No .env entries found in .gitignore"
fiRepository: rootflo/wavefront
Length of output: 180
Add .env to .gitignore to prevent committing local development configuration.
The .env file with local development URLs should not be version controlled. Committing it causes team members' configurations to be overwritten on pull, risks deploying local settings to production, and prevents individuals from maintaining their own local setups.
Add wavefront/client/.env to .gitignore and commit a .env.example file with placeholder values instead.
🤖 Prompt for AI Agents
In wavefront/client/.env around lines 1-1, the local development env file is
committed; add wavefront/client/.env to .gitignore, remove the tracked file from
Git (git rm --cached wavefront/client/.env) so it is no longer versioned, and
commit a new wavefront/client/.env.example containing placeholder keys/values
(e.g., VITE_BASE_URL=<your-local-url>) so teammates can copy it for local setup.
* default agent job indentation fix * removed cartesia emotion * removed max_tokens param from openai * toast for error/success message * kb config id initial value fix --------- Co-authored-by: vishnu r kumar <rkumar.vishnu28@gmail.com>
3 participants
Summary by CodeRabbit
New Features
Updates
Bug Fixes
✏️ Tip: You can customize this high-level summary in your review settings.