Avatar alignment, markdown render and other UX fixes in chat#267
Avatar alignment, markdown render and other UX fixes in chat#267dhirenmathur wants to merge 1 commit into
Conversation
WalkthroughThread.tsx UI layer receives vertical alignment adjustments for UserMessage and AssistantMessage containers and their avatars. UserMessage now supports Markdown rendering by injecting MarkdownText into MessagePrimitive.Parts. Package.json adds react-virtuoso dependency and reorders zustand/zod entries. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 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
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (2)
app/(main)/chat/[chatId]/components/Thread.tsxpackage.json
🧰 Additional context used
📓 Path-based instructions (2)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx}: Use PascalCase for component names and camelCase for utility names
Order imports: React/Next imports first, then components, then utilities
Use Next.js error boundaries, optional chaining, and nullish coalescing for error handling
Files:
app/(main)/chat/[chatId]/components/Thread.tsx
**/*.tsx
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.tsx: Use Tailwind CSS for styling and thecnutility for conditional classes
Use functional components with TypeScript FC types
Prefer destructuring props at the component level
Use the "use client" directive for client components
Files:
app/(main)/chat/[chatId]/components/Thread.tsx
🧠 Learnings (1)
📚 Learning: 2025-07-22T09:20:21.427Z
Learnt from: CR
Repo: potpie-ai/potpie-ui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-07-22T09:20:21.427Z
Learning: Use Redux Toolkit with Redux Persist for global state management, and React hooks for local state
Applied to files:
package.json
🧬 Code graph analysis (1)
app/(main)/chat/[chatId]/components/Thread.tsx (2)
components/assistant-ui/markdown-text.tsx (1)
MarkdownText(131-131)components/ui/avatar.tsx (1)
Avatar(50-50)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Build, Deploy, and Comment
🔇 Additional comments (3)
app/(main)/chat/[chatId]/components/Thread.tsx (3)
248-248: LGTM! Avatar alignment improvements.The changes to use
items-starton the container andself-starton the avatar improve the vertical alignment, especially for multi-line messages where the avatar should align with the first line of text rather than center vertically.Also applies to: 263-263
640-641: LGTM! Consistent avatar alignment for assistant messages.The alignment changes mirror the UserMessage improvements, ensuring consistent visual behavior across both user and assistant messages. The
items-startgrid alignment andself-startavatar positioning work together to properly align the avatar with the first line of message content.
257-257: MarkdownText component is secure by default and does not require additional sanitization.The
MarkdownTextcomponent usesreact-markdownwith only theremark-gfmplugin, which builds a virtual DOM and does not parse HTML. This is inherently safe against XSS. No raw HTML parsing (viarehype-raw) is enabled, and nodangerouslySetInnerHTMLis used for user content. DOMPurify is not a production dependency, andrehype-sanitizeis not needed because user input cannot be rendered as raw HTML in this configuration.Likely an incorrect or invalid review comment.
| "react-markdown": "^9.1.0", | ||
| "react-redux": "^9.2.0", | ||
| "react-syntax-highlighter": "^15.6.1", | ||
| "react-virtuoso": "^4.18.1", |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Search for react-virtuoso imports and usage
echo "=== Searching for react-virtuoso imports ==="
rg -n --type=ts --type=tsx "from ['\"]react-virtuoso['\"]" || echo "No direct imports found"
echo ""
echo "=== Searching for Virtuoso component usage ==="
rg -n --type=ts --type=tsx "<Virtuoso|VirtuosoGrid|useVirtual" || echo "No Virtuoso components found"
echo ""
echo "=== Broader search for 'virtuoso' references ==="
rg -i -n --type=ts --type=tsx "virtuoso" || echo "No virtuoso references found"Repository: potpie-ai/potpie-ui
Length of output: 388
🏁 Script executed:
#!/bin/bash
# Broader search without file type restrictions
echo "=== Searching for any 'virtuoso' references (case-insensitive) ==="
rg -i "virtuoso" . --max-count=20 || echo "No virtuoso references found anywhere"
echo ""
echo "=== Checking if react-virtuoso is listed in package.json ==="
cat package.json | grep -A2 -B2 "react-virtuoso" || echo "Not found in package.json"Repository: potpie-ai/potpie-ui
Length of output: 565
Remove unused react-virtuoso dependency.
The react-virtuoso package (^4.18.1) is listed in package.json but is not imported or used anywhere in the codebase. Remove it from dependencies to avoid unnecessary package bloat.
🤖 Prompt for AI Agents
In package.json around line 77, remove the unused "react-virtuoso": "^4.18.1"
dependency entry from the dependencies list; after removing the line, run
package manager cleanup (npm/yarn/pnpm) to update lockfile and node_modules
(e.g., npm install or yarn install), and run project tests/build to ensure
nothing breaks.
|
Cloud Run service deployed: https://pr-chat-ux-cj6r7x3fpa-uc.a.run.app |
1 participant
@nndn
Copy button works for me locally, verified in prod as well
Attachment button work for me locally, probably needs env change in prod/
MCP support for conversations will be added in a later PR WIP
Staging logging is restored
Agent selection - will be fixed with new UX
Summary by CodeRabbit
New Features
Bug Fixes
✏️ Tip: You can customize this high-level summary in your review settings.