ECHO-708 agentic chat add feature flag for frontend#471
Conversation
WalkthroughAdded a feature flag for Agentic Chat: new environment variable Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ 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
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@echo/frontend/src/components/chat/ChatModeSelector.tsx`:
- Around line 273-285: In ProjectChatRoute's render logic, guard rendering of
the AgenticChatPanel with ENABLE_AGENTIC_CHAT so the panel is only mounted when
the feature flag is enabled; update the condition that currently renders
<AgenticChatPanel ...> (refer to AgenticChatPanel and ENABLE_AGENTIC_CHAT
symbols) to require ENABLE_AGENTIC_CHAT && before rendering, ensuring
consistency with the selector UI (or explicitly document intentional behavior if
you want existing agentic sessions to remain accessible).
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: 0def95f4-447d-4092-8ce6-c9ade865f187
📒 Files selected for processing (3)
echo/frontend/.env.exampleecho/frontend/src/components/chat/ChatModeSelector.tsxecho/frontend/src/config.ts
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@echo/frontend/src/routes/project/chat/ProjectChatRoute.tsx`:
- Around line 505-509: When ENABLE_AGENTIC_CHAT is false but chatMode ===
"agentic" remains in the DB, add a graceful fallback in ProjectChatRoute: detect
this mismatch (use ENABLE_AGENTIC_CHAT, chatMode or isAgenticMode) and render
the ChatModeSelector (same pattern used around the existing conditional that
renders ChatModeSelector at lines ~487-495) instead of the normal chat UI so
users can re-select mode; ensure ChatModeIndicator can still show the badge but
shouldFetchSuggestions logic (which depends on isAgenticMode) will remain
consistent and AgenticChatPanel is only rendered when ENABLE_AGENTIC_CHAT is
true and chatMode is agentic.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: 1b051dcc-ca0b-4d72-81ba-4491977a49f5
📒 Files selected for processing (1)
echo/frontend/src/routes/project/chat/ProjectChatRoute.tsx
| if (ENABLE_AGENTIC_CHAT && chatMode === "agentic") { | ||
| return ( | ||
| <AgenticChatPanel chatId={chatId ?? ""} projectId={projectId ?? ""} /> | ||
| ); | ||
| } |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Search for agentic mode validation in backend chat endpoints
rg -n -C3 'agentic' --type pyRepository: Dembrane/echo
Length of output: 50369
🏁 Script executed:
# Search for ENABLE_AGENTIC_CHAT in frontend
rg -n "ENABLE_AGENTIC_CHAT" echo/frontend/src --type ts --type tsxRepository: Dembrane/echo
Length of output: 84
🏁 Script executed:
# Look at ProjectChatRoute.tsx around the mentioned lines
fd "ProjectChatRoute.tsx" echo/frontend/src --exec head -550 {} \; --exec tail -100 {} \;Repository: Dembrane/echo
Length of output: 18767
🏁 Script executed:
# Search for shouldFetchSuggestions and ChatModeIndicator
rg -n "shouldFetchSuggestions|ChatModeIndicator" echo/frontend/src --type ts --type tsx -A 2Repository: Dembrane/echo
Length of output: 84
🏁 Script executed:
# Search for ChatModeSelector to understand mode reset flow
rg -n "ChatModeSelector" echo/frontend/src --type ts --context 3Repository: Dembrane/echo
Length of output: 8938
🏁 Script executed:
# Check if there's any ENABLE_AGENTIC_CHAT config definition and usage
rg -n "ENABLE_AGENTIC_CHAT" echo/frontend --type ts --context 2Repository: Dembrane/echo
Length of output: 2151
🏁 Script executed:
# Look for any fallback or error handling for disabled agentic mode
rg -n "agentic" echo/frontend/src/routes/project/chat/ProjectChatRoute -A 3 -B 3Repository: Dembrane/echo
Length of output: 151
🏁 Script executed:
# Final check: verify ChatModeSelector properly filters agentic option
rg -n "ENABLE_AGENTIC_CHAT" echo/frontend/src/components/chat/ChatModeSelector.tsx -A 5 -B 2Repository: Dembrane/echo
Length of output: 734
Add fallback when agentic flag disabled but mode persists in DB
When ENABLE_AGENTIC_CHAT is false but chatMode === "agentic" lingers in the database, users hit an inconsistent state: the ChatModeIndicator displays the "agentic" badge (line 523), but shouldFetchSuggestions stays false (line 338 checks !isAgenticMode), and they get the normal chat interface instead of the agentic panel. Graceful fallback is warranted.
The proposed approach—showing the ChatModeSelector when the flag is disabled but the mode is agentic—mirrors the existing pattern at lines 487-495 and gives users a path to re-select their mode.
Suggested implementation
- if (ENABLE_AGENTIC_CHAT && chatMode === "agentic") {
+ if (chatMode === "agentic") {
+ if (!ENABLE_AGENTIC_CHAT) {
+ // Agentic mode disabled - treat as unselected to let user re-pick
+ return (
+ <Box className="flex min-h-full items-center justify-center px-2 pr-4">
+ <ChatModeSelector
+ chatId={chatId ?? ""}
+ projectId={projectId ?? ""}
+ onModeSelected={async (mode) => {
+ if (chatId && mode === "overview") {
+ prefetchSuggestions(chatId, language, 5000);
+ }
+ chatContextQuery.refetch();
+ }}
+ />
+ </Box>
+ );
+ }
return (
<AgenticChatPanel chatId={chatId ?? ""} projectId={projectId ?? ""} />
);
}🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@echo/frontend/src/routes/project/chat/ProjectChatRoute.tsx` around lines 505
- 509, When ENABLE_AGENTIC_CHAT is false but chatMode === "agentic" remains in
the DB, add a graceful fallback in ProjectChatRoute: detect this mismatch (use
ENABLE_AGENTIC_CHAT, chatMode or isAgenticMode) and render the ChatModeSelector
(same pattern used around the existing conditional that renders ChatModeSelector
at lines ~487-495) instead of the normal chat UI so users can re-select mode;
ensure ChatModeIndicator can still show the badge but shouldFetchSuggestions
logic (which depends on isAgenticMode) will remain consistent and
AgenticChatPanel is only rendered when ENABLE_AGENTIC_CHAT is true and chatMode
is agentic.
There was a problem hiding this comment.
Not applicable...the feature hasn't shipped yet, so no chats with chat_mode = "agentic" exist in any database.
There was a problem hiding this comment.
@ussaama Fair enough — since no agentic chats exist in any DB yet, the DB-state mismatch scenario is purely theoretical at this point. The feature flag gate is clean for a pre-ship rollout. Ship it! 🚀
🧠 Learnings used
Learnt from: CR
Repo: Dembrane/echo PR: 0
File: echo/frontend/AGENTS.md:0-0
Timestamp: 2026-02-13T09:29:08.011Z
Learning: Applies to echo/frontend/src/components/chat/**/*.{ts,tsx} : Chat mode colors are intentionally hardcoded (not theme-dependent) for consistent mode identification
Learnt from: CR
Repo: Dembrane/echo PR: 0
File: echo/frontend/AGENTS.md:0-0
Timestamp: 2026-02-13T09:29:08.011Z
Learning: Applies to echo/frontend/src/components/chat/**/*.{ts,tsx} : Chat modes have dedicated accent colors defined in `src/components/chat/ChatModeSelector.tsx` (`MODE_COLORS`): Overview mode Spring Green (`#1EFFA1`), Deep Dive mode Cyan (`#00FFFF`)
Learnt from: ussaama
Repo: Dembrane/echo PR: 266
File: echo/frontend/src/components/conversation/ConversationAccordion.tsx:675-678
Timestamp: 2025-08-19T10:22:55.323Z
Learning: In echo/frontend/src/components/conversation/hooks/index.ts, the useConversationsCountByProjectId hook uses regular useQuery (not useSuspenseQuery), which means conversationsCountQuery.data can be undefined during loading states. When using Number(conversationsCountQuery.data) ?? 0, this creates NaN because Number(undefined) = NaN and NaN is not nullish, so the fallback doesn't apply. The correct pattern is Number(conversationsCountQuery.data ?? 0) to ensure the fallback happens before type conversion.
Learnt from: CR
Repo: Dembrane/echo PR: 0
File: echo/server/AGENTS.md:0-0
Timestamp: 2026-01-22T22:41:14.702Z
Learning: Applies to echo/server/dembrane/api/chat.py : Fill module stub, add RAG shortcut when quotes exist, implement Directus project fetch, conversation endpoint completion, admin auth checks (TODOs in `dembrane/api/chat.py`)
Learnt from: ussaama
Repo: Dembrane/echo PR: 205
File: echo/frontend/src/lib/query.ts:1444-1506
Timestamp: 2025-07-10T12:48:20.683Z
Learning: ussaama prefers string concatenation over template literals for simple cases where readability is clearer, even when linting tools suggest template literals. Human readability takes precedence over strict linting rules in straightforward concatenation scenarios.
2 participants
Summary by CodeRabbit