[react] AI Agent Frontend v0 #1160
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub. |
![sentry[bot]](https://avatars.githubusercontent.com/in/12637?s=60&v=4){kind=small}
| useEffect(() => { | ||
| if (isOpen && conversationState === 'initial') { | ||
| // Show typing indicator | ||
| setMessages([{ type: 'typing', id: generateMessageId() }]); | ||
|
|
||
| setTimeout(() => { | ||
| // Remove typing indicator and show welcome message | ||
| addBotMessage("Hi, I can help you pick the right plants for your home", () => { | ||
| setMessages([ | ||
| { |
There was a problem hiding this comment.
Bug: The setTimeout calls in the chat initialization useEffect are not cleared when the chat is closed, leading to state updates on a hidden component and potential memory leaks.
Severity: HIGH
Suggested Fix
Store the setTimeout identifiers returned from the calls within the initialization useEffect in refs. Then, add logic to the endChatSession function or a cleanup function for the useEffect to call clearTimeout on these refs, ensuring all pending asynchronous operations are cancelled when the chat session ends.
Prompt for AI Agent
Review the code at the location below. A potential bug has been identified by an AI
agent.
Verify if this is a real issue. If it is, propose a fix; if not, explain why it's not
valid.
Location: react/src/components/ChatWidget.jsx#L117-L126
Potential issue: The `useEffect` hook for chat initialization schedules several
`setTimeout` calls to display welcome messages. These timeout IDs are not stored or
tracked. If the user closes the chat widget before these timeouts complete, the cleanup
logic in `endChatSession` does not clear them. As a result, the timeout callbacks will
still fire, attempting to update the state of a hidden component. This can lead to
wasted resources, potential state inconsistencies upon reopening the chat, and a memory
leak if the user repeatedly opens and closes the widget.
Did we get this right? 👍 / 👎 to inform future reviews.
| setMessages(prev => [ | ||
| ...prev.filter(msg => msg.type !== 'typing'), | ||
| { | ||
| type: 'bot', |
There was a problem hiding this comment.
Bug: The fetch call to /api/v1/buy-plants does not check response.ok, which can lead to undefined being displayed in the chat if the API returns an error.
Severity: HIGH
Suggested Fix
After the fetch call and before parsing the body with response.json(), add a check for if (!response.ok). If the response is not ok, handle the error appropriately, for instance by setting an error state and displaying a message to the user, rather than proceeding with the success path.
Prompt for AI Agent
Review the code at the location below. A potential bug has been identified by an AI
agent.
Verify if this is a real issue. If it is, propose a fix; if not, explain why it's not
valid.
Location: react/src/components/ChatWidget.jsx#L285
Potential issue: The `fetch` call to the `/api/v1/buy-plants` endpoint does not check
the `response.ok` status before parsing the JSON body with `response.json()`. If the API
returns an error status (e.g., 4xx or 5xx) with a valid JSON error message, the code
will not throw an exception. Instead, it will proceed to access `data.response` and
`data.agent_name` on a JSON object that lacks these properties, resulting in `undefined`
values being passed to `addBotMessage` and displayed to the user. This violates the
error handling pattern seen elsewhere in the application.
Did we get this right? 👍 / 👎 to inform future reviews.
| // Opening the chat - start a new trace | ||
| Sentry.startNewTrace(() => { | ||
| const span = Sentry.startInactiveSpan({ | ||
| op: 'ui.interaction.chat', | ||
| name: 'AI Agent Chat Session', | ||
| forceTransaction: true | ||
| }); | ||
| chatSpanRef.current = span; | ||
| }); | ||
| setIsOpen(true); | ||
| }; |
There was a problem hiding this comment.
Bug: The chat widget state is not reset when closed and reopened, causing the widget to be non-functional after the first conversation is completed.
Severity: CRITICAL
Suggested Fix
Modify the openChat function to reset the relevant state variables when a new chat session is initiated. Specifically, call setConversationState('initial') and setMessages([]) at the beginning of openChat to ensure every time the user opens the widget, they are presented with a fresh, functional chat session.
Prompt for AI Agent
Review the code at the location below. A potential bug has been identified by an AI
agent.
Verify if this is a real issue. If it is, propose a fix; if not, explain why it's not
valid.
Location: react/src/components/ChatWidget.jsx#L307-L318
Potential issue: The chat widget's state, specifically `conversationState` and
`messages`, is not reset when the chat is closed. When a user completes a conversation,
`conversationState` is set to `'completed'`. If the user then closes and reopens the
chat, the `openChat` function only sets `isOpen` to `true` but does not reset the state.
Consequently, the initial welcome messages do not appear (as they require
`conversationState === 'initial'`), and the user input form is not rendered, leaving the
user with a non-functional chat window containing the previous conversation.
Did we get this right? 👍 / 👎 to inform future reviews.
Codecov Report❌ Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## master #1160 +/- ##
==========================================
- Coverage 24.64% 21.75% -2.89%
==========================================
Files 41 42 +1
Lines 1205 1365 +160
Branches 137 173 +36
==========================================
Hits 297 297
- Misses 883 1042 +159
- Partials 25 26 +1
|
2 participants
Goal
Show full-stack AI Agent architecture monitoring including frontend
Testing
sample trace
Related
HostedMCPToolgetsentry/sentry-python#5297 (agent -> mcp trace propagation fix, pending new SDK release)