feat: agentic chat within web proof of concept #11723
Open
+1,801
−8
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Contributor
📝 WalkthroughWalkthroughAdds an Agentic Chat feature: new env flags and server URL, runtime deps, config validators, feature-flag wiring, translations, a useAgenticChat hook, multiple UI components (FAB, window, chat, composer, markdown, loading), App integration, and test mock updates. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant FAB as AgenticChatFAB
participant Window as AgenticChatWindow
participant Composer
participant Hook as useAgenticChat
participant Server as Agentic Server
participant Chat
User->>FAB: click
FAB->>Window: open (isOpen = true)
Window->>Chat: render messages
Window->>Composer: render input
User->>Composer: type + submit
Composer->>Hook: handleSubmit(message)
Hook->>Hook: attach wallet context (evm/sol/chainIds)
Hook->>Server: POST /api/chat (stream)
Server-->>Hook: stream response chunks
Hook->>Chat: append messages
Chat->>User: display (Markdown rendered)
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (2 warnings)
✅ 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 |
premiumjibles
force-pushed
the
11696_agentic_chat
branch
from
b475f9b to
64c1265
Compare
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Fix all issues with AI agents
In `@src/features/agenticChat/components/Composer.tsx`:
- Around line 21-76: The Composer only treats 'streaming' as loading; change the
isLoading definition to include both 'submitted' and 'streaming' (e.g., const
isLoading = status === 'streaming' || status === 'submitted'), then guard
submissions in handleKeyDown by returning early when isLoading and update the
IconButton props so it is disabled while isLoading (change isDisabled to
isLoading || !input.trim()) and ensure the onClick doesn't trigger handleSubmit
when isLoading (keep existing isLoading ? stop : () => handleSubmit() behavior).
In `@src/features/agenticChat/hooks/useAgenticChat.ts`:
- Around line 53-63: handleSubmit currently clears the input before awaiting
chat.sendMessage which can lose the user's message silently on failure; wrap the
await chat.sendMessage call in a try/catch, call setInput(trimmedInput) in the
catch to restore the text, and call the useErrorToast() error handler to surface
the failure (include the caught error message). Keep the preventDefault and
trimming logic, but only clear input after a successful send; reference the
handleSubmit function, chat.sendMessage call, setInput, input/trimmedInput
variables, and useErrorToast() when making the change.
🧹 Nitpick comments (3)
src/features/agenticChat/components/Markdown.tsx (1)
21-179: Consider wrapping inmemofor chat performance.Since this component receives the
childrenprop and will be rendered for each message in the chat, wrapping it withmemocan help avoid unnecessary re-renders when the parent re-renders but the markdown content hasn't changed.♻️ Proposed optimization
-import { useMemo } from 'react' +import { memo, useMemo } from 'react' import type { Components } from 'react-markdown' import ReactMarkdown from 'react-markdown' import remarkGfm from 'remark-gfm' type MarkdownProps = { children: string } -export const Markdown = ({ children }: MarkdownProps) => { +export const Markdown = memo(({ children }: MarkdownProps) => { // ... existing implementation -} +})src/features/agenticChat/components/AgenticChatFAB.tsx (1)
1-43: Memoize open/close handlers passed as props.Inline handlers are recreated every render and violate the project’s “useCallback for handlers/props” convention. Consider memoizing open/close callbacks. As per coding guidelines, event handlers passed as props should be memoized.
Suggested refactor
-import { useState } from 'react' +import { useCallback, useState } from 'react' @@ const isEnabled = useFeatureFlag('AgenticChat') const [isOpen, setIsOpen] = useState(false) const translate = useTranslate() + const handleOpen = useCallback(() => setIsOpen(true), []) + const handleClose = useCallback(() => setIsOpen(false), []) @@ <IconButton icon={MESSAGE_SQUARE_ICON} aria-label={translate('agenticChat.openChat')} - onClick={() => setIsOpen(true)} + onClick={handleOpen} @@ - <AgenticChatWindow isOpen={isOpen} onClose={() => setIsOpen(false)} /> + <AgenticChatWindow isOpen={isOpen} onClose={handleClose} />src/features/agenticChat/components/AgenticChatWindow.tsx (1)
19-89: Confirm this UI is wrapped by an ErrorBoundary.This feature introduces a new UI surface with async chat operations. Please verify it is rendered within an existing ErrorBoundary (or wrap it) so unexpected errors don’t take down the full app. As per coding guidelines, React components must be wrapped with error boundaries.
premiumjibles
force-pushed
the
11696_agentic_chat
branch
from
64c1265 to
440ccad
Compare
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@package.json`:
- Around line 74-75: The package versions conflict: `@ai-sdk/react`@3.0.41 and
ai@6.0.39 expect `@ai-sdk/provider-utils`@4.0.8 and `@ai-sdk/provider`@3.0.4, but
`@ai-sdk/ui-utils`@1.2.11 pulls older provider-utils/provider versions; fix by
aligning or removing `@ai-sdk/ui-utils`: either (A) upgrade `@ai-sdk/ui-utils` to a
version that depends on `@ai-sdk/provider-utils`@4.x and `@ai-sdk/provider`@3.x, or
(B) remove/replace `@ai-sdk/ui-utils` if not needed and ensure `@ai-sdk/react` and
ai remain at compatible versions, then run your package manager to update
lockfile and verify with npm/yarn/pnpm install and dependency tree (npm ls) to
confirm `@ai-sdk/provider-utils` and `@ai-sdk/provider` resolve to the 4.x/3.x
versions required.
♻️ Duplicate comments (1)
src/features/agenticChat/components/Composer.tsx (1)
21-76: Block submissions while status issubmittedorstreaming.There’s a short window in
'submitted'where Enter can queue another message before streaming starts.✅ Proposed fix
- const isLoading = status === 'streaming' + const isLoading = status === 'submitted' || status === 'streaming' const handleKeyDown = useCallback( (e: React.KeyboardEvent<HTMLTextAreaElement>) => { + if (isLoading) return if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault() if (input.trim()) { handleSubmit() } } }, - [input, handleSubmit], + [input, handleSubmit, isLoading], )
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
First phase POC of getting the agentic chat into web. This currently limited in features just to act as a "tracer bullet" and get everything working end to end. Most of the tools don't work like swaps, limit orders, etc... and there's no chat history. But you can open up a window in dev and chat with the agent.
Issue (if applicable)
closes shapeshift/agentic-chat#177
Risk
Low risk, i've kept this code segregated so it's easy to pull out if we want to and doesn't break any existing code
Testing
Engineering
Operations
Screenshots (if applicable)
Summary by CodeRabbit
New Features
Chores
✏️ Tip: You can customize this high-level summary in your review settings.