ECHO-408 Conversation name not being shown in segment for library

[ussaama]

Summary by CodeRabbit

• Bug Fixes
  • Corrected conversation links to use the proper conversation ID, reducing broken or empty links and improving navigation reliability when data is missing.
• Style
  • Minor visual tweaks to the transcript toggle and surrounding layout for a cleaner look; no functional changes to toggling or transcript behavior.

[linear]

ECHO-408 Add conversation name to the "Insight" in an "Aspect"

[coderabbitai]

Walkthrough

Expands the aspect-fetch hook to include nested conversation_id with id and participant_name, and adjusts Quote.tsx to derive conversationId from the nested Conversation object. No exports changed; primarily data selection and minor UI/formatting updates.

Changes

Cohort / File(s)	Summary
Data fetch: aspect hook echo/frontend/src/components/library/hooks/index.ts	Updated Directus readItem select in useAspectById to include aspect_segment.segment and aspect_segment.conversation_id{id, participant_name}; minor import formatting.
UI render: quote component echo/frontend/src/components/quote/Quote.tsx	conversationId now sourced from (segment.conversation_id as Conversation)?.id ?? ""; minor className/layout tweaks; no public API changes.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Assessment against linked issues

Objective	Addressed	Explanation
Add conversation name (participant_name) to Insight in an Aspect; replace "View Conversation" text (ECHO-408)	❌	participant_name is fetched but not rendered; link text not replaced.

Possibly related PRs

• fix view (adds description) #229 — Also updates conversation link behavior in Quote.tsx (changes link path), overlapping with how this PR handles conversation linkage.

Suggested labels

bug

Suggested reviewers

• spashii
• ArindamRoy23

✨ Finishing Touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch conversation-name-to-insights-library

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR/Issue comments)

Type @coderabbitai help to get the list of available commands.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Status, Documentation and Community

• Visit our Status Page to check the current availability of CodeRabbit.
• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[coderabbitai]

Actionable comments posted: 6

📜 Review details

Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between b2cb3f3 and 7bf0b36.

📒 Files selected for processing (2)

• echo/frontend/src/components/library/hooks/index.ts (2 hunks)
• echo/frontend/src/components/quote/Quote.tsx (7 hunks)

🧰 Additional context used

🧬 Code Graph Analysis (1)

echo/frontend/src/components/quote/Quote.tsx (2)

echo/server/dembrane/reply_utils.py (1)

• Conversation (29-33)

echo/frontend/src/lib/utils.ts (1)

• cn (4-6)

🪛 Biome (2.1.2)

echo/frontend/src/components/quote/Quote.tsx

[error] 122-132: Static Elements should not be interactive.

To add interactivity such as a mouse or key event listener to a static element, give the element an appropriate role value.

(lint/a11y/noStaticElementInteractions)

---

[error] 122-132: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event.

Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.

(lint/a11y/useKeyWithClickEvents)

⏰ 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). (2)

• GitHub Check: Cursor Bugbot
• GitHub Check: ci-check-server

🔇 Additional comments (9)

echo/frontend/src/components/library/hooks/index.ts (2)

1-1: LGTM: folded import is fine.

Consolidating the import from "@/lib/api" is tidy and non-functional. Ship it.

---

47-59: Correct nested selection for conversation metadata.

Pulling segment.conversation_id with ["id", "participant_name"] is exactly what we need to render the conversation label and link reliably. No control-flow changes, minimal surface area. LGTM.

echo/frontend/src/components/quote/Quote.tsx (7)

9-14: LGTM: icon imports grouped cleanly.

No functional change; improves readability.

---

41-44: LGTM: delimiter usage is consistent.

Splitting relevant_index on ":" matches our persisted format. Guarding with isNaN below covers malformed inputs.

---

64-67: LGTM: visual nits only.

Small visual polish with IconBulb sizing and color; no behavioral changes.

---

87-87: No-op stylistic change.

Border classes updated; no issues.

---

135-138: LGTM: transcript text styling reads well.

Uses whitespace-pre-wrap and italics for clarity. Good UX.

---

166-185: Our scans came up empty—let’s get a human eyeball on this. Please manually verify that every place rendering <Quote data={…}> is supplying a fully expanded conversation_id (or that the new union‐based logic handles missing IDs gracefully).

---

28-35: Confirm ambient types in typesDirectus.d.ts and conversation_id union

AspectSegment, ConversationSegment, and Conversation are already declared globally in echo/frontend/src/lib/typesDirectus.d.ts—no imports required. Please verify:

• Your tsconfig.json includes src/lib/typesDirectus.d.ts in its include paths.
• The ConversationSegment type defines a conversation_id field with the union string | Conversation | null, matching your assertion.

Also applies to lines 166–185. LGTM.