You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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
Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.
This PR includes no changesets
When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types
Tasks are run on every commit but only new migration files are pushed.
Close and reopen this PR if you want to apply changes from existing seed or migration files.
- Implemented saving and loading chat messages using the `messages` table
- Introduced `designSessionId` prop to both `Chat` and `SessionDetailPage` components
- Added `saveMessage`, `loadMessages`, and `getCurrentUserId` functions on the client side
- Chat history is now preserved across sessions and synced with Supabase
The loadMessages function returns empty messages array on error but saveMessage doesn't provide a consistent return value. Consider standardizing error handling across all service functions.
console.error('Failed to load messages:',error)return{success: false,error: error.message}}return{success: true,messages: messages||[]}
There's a potential race condition when saving messages to the database and updating the UI. If multiple messages are sent quickly, the database IDs might not be correctly associated with the right messages.
// Save user message to database
if (designSessionId) {
const saveResult = await saveMessage({
designSessionId,
content,
role: 'user',
userId,
})
if (saveResult.success && saveResult.message) {
// Update the message with the database ID
setMessages((prev) =>
prev.map((msg) =>
msg.id === userMessage.id
? { ...msg, dbId: saveResult.message?.id }
: msg,
),
)
}
}
The code doesn't handle database save failures gracefully. If saving a message fails, the UI continues as if it succeeded, which could lead to inconsistencies between the UI and database state.
The scroll effect only runs once on component mount but not when messages change. Update the dependency array to include the messages state variable to ensure the chat scrolls to the bottom whenever new messages are added.
// Scroll to bottom when component mounts or messages change
useEffect(() => {
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
-}, [])+}, [messages])
Apply / Chat
Suggestion importance[1-10]: 8
__
Why: The comment indicates the effect should run when messages change, but the empty dependency array means it only runs on mount. This prevents auto-scrolling when new messages are added, which is a significant UX issue.
Medium
Validate required field exists
The error handling only checks if the design session exists but doesn't validate if it has an organization_id. Add validation to ensure organization_id exists before using it to prevent potential null reference errors.
// Get organization_id from design_session
const { data: designSession, error: sessionError } = await supabase
.from('design_sessions')
.select('organization_id')
.eq('id', designSessionId)
.single()
if (sessionError || !designSession) {
console.error('Failed to get design session:', sessionError)
return { success: false, error: 'Design session not found' }
}
+if (!designSession.organization_id) {+ console.error('Design session has no organization ID')+ return { success: false, error: 'Invalid design session: missing organization ID' }+}+
Apply / Chat
Suggestion importance[1-10]: 6
__
Why: Adding validation for organization_id existence is good defensive programming. If the database contains null values, it could cause issues when inserting the message data.
Low
Learned best practice
Add unmount cleanup function
Add a cleanup function to the useEffect hook to prevent state updates if the component unmounts during the async operation. This prevents memory leaks and React warnings about updating state on unmounted components.
// Load existing messages on component mount
useEffect(() => {
if (!designSessionId) {
return
}
+ let isMounted = true;
const loadExistingMessages = async () => {
const result = await loadMessages({ designSessionId })
- if (result.success && result.messages) {+ if (isMounted && result.success && result.messages) {
const chatEntries = result.messages.map((msg) => ({
...convertMessageToChatEntry(msg),
dbId: msg.id,
}))
// Keep the welcome message and add loaded messages
setMessages((prev) => [prev[0], ...chatEntries])
}
- setIsLoadingMessages(false)+ if (isMounted) {+ setIsLoadingMessages(false)+ }
}
loadExistingMessages()
+ return () => {+ isMounted = false;+ };
}, [designSessionId])
[To ensure code accuracy, apply this suggestion manually]
Suggestion importance[1-10]: 6
__
Why:
Relevant best practice - Prevent state updates on unmounted components by using cleanup functions in useEffect hooks to avoid memory leaks and React warnings.
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.
hoshinotsuyoshi
force-pushed
the
sessions-new-page-save-messages
branch
from
Screenshots
Now each messages are persisted in
messagestable.messages:
db:
Why is this change needed?
want to save the chat messages.
messagestable, ensuring session history is preserveddesignSessionIdprop toChatandSessionDetailPagecomponentssaveMessage,loadMessages, andupdateMessageservice methods (client-side)What would you like reviewers to focus on?
Testing Verification
What was done
🤖 Generated by PR Agent at 9e8dd21
messagestabledesignSessionIdprop toChatandSessionDetailPageDetailed Changes
messageServiceClient.ts
Add Supabase message persistence client and utilitiesfrontend/apps/app/components/Chat/services/messageServiceClient.ts
saveMessage,loadMessages, andgetCurrentUserIdfunctionsindex.ts
Export message service client functionsfrontend/apps/app/components/Chat/services/index.ts
Chat.tsx
Integrate Supabase message persistence into Chat componentfrontend/apps/app/components/Chat/Chat.tsx
designSessionIdprop for session-specific chat historySessionDetailPage.tsx
Pass designSessionId to Chat for session contextfrontend/apps/app/components/SessionDetailPage/SessionDetailPage.tsx
designSessionIdprop and passed it to Chatpage.tsx
Provide designSessionId to session detail pagefrontend/apps/app/app/(app)/app/(with-project-and-branch)/projects/[projectId]/sessions/[id]/page.tsx
designSessionIdprop to SessionDetailPageAdditional Notes