ECHO-245 Add deep chunks configuration to ConversationAccordion component#163
ECHO-245 Add deep chunks configuration to ConversationAccordion component#163
Conversation
WalkthroughThis change updates the Changes
Assessment against linked issues
Note ⚡️ AI Code Reviews for VS Code, Cursor, WindsurfCodeRabbit now has a plugin for VS Code, Cursor and Windsurf. This brings AI code reviews directly in the code editor. Each commit is reviewed immediately, finding bugs before the PR is raised. Seamless context handoff to your AI code agent ensures that you can easily incorporate review feedback. Note ⚡️ Faster reviews with cachingCodeRabbit now supports caching for code and dependencies, helping speed up reviews. This means quicker feedback, reduced wait times, and a smoother review experience overall. Cached data is encrypted and stored securely. This feature will be automatically enabled for all accounts on May 16th. To opt out, configure ✨ Finishing Touches
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (1)
echo/frontend/src/components/conversation/ConversationAccordion.tsx(2 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: ci-check-server
🔇 Additional comments (1)
echo/frontend/src/components/conversation/ConversationAccordion.tsx (1)
651-656: Ship it! Same optimization applied consistently to conversationsQuery.Nice consistency applying the same chunk limit pattern here. 👌
| deep: { | ||
| // @ts-expect-error chunks is not typed | ||
| chunks: { | ||
| _limit: 25, | ||
| }, | ||
| }, |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
LGTM! Good optimization on the totalConversationsQuery.
Adding a limit to the chunks being fetched is a solid perf win. The _limit: 25 should be more than sufficient for most use cases while keeping the payload size under control.
Consider adding a constant somewhere in the codebase for this magic number, like CONVERSATION_CHUNKS_LIMIT = 25. Future engineers will thank you when they need to adjust this value in multiple places.
🤖 Prompt for AI Agents
In echo/frontend/src/components/conversation/ConversationAccordion.tsx around
lines 596 to 601, the limit value 25 used in the chunks query is a magic number.
Define a constant named CONVERSATION_CHUNKS_LIMIT with the value 25 at an
appropriate place in the codebase and replace the hardcoded 25 with this
constant to improve maintainability and clarity.
| // @ts-expect-error chunks is not typed | ||
| chunks: { |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Let's handle those TypeScript errors properly.
The @ts-expect-error comments are a quick fix, but we should address the underlying typing issue. It seems the chunks property isn't properly typed in the query options.
Consider enhancing the type definitions instead of using @ts-expect-error:
// Add this to your types file (adjust the path as needed)
interface ConversationQueryOptions {
limit?: number;
search?: string;
sort?: string;
deep?: {
+ chunks?: {
+ _limit?: number;
+ };
};
}Also applies to: 652-653
🏁 Script executed:
#!/bin/bash
# Let's look for type definitions related to the query options and chunk property
rg -A 2 "type.*useConversationsByProjectId" --type=typescript
rg "interface.*Conversation(\s|\{)" --type=typescript -A 15Length of output: 195
Alright, let’s deep-dive and locate that hook signature so we can type chunks properly. LGTM.
🏁 Script executed:
#!/bin/bash
# Locate the generated hook and its signature
rg -n -A5 -B2 "useConversationsByProjectId" -g "*.ts" -g "*.tsx" .
# Also find the underlying GraphQL operation name/type
rg -n -A5 -B2 "ConversationsByProjectId" -g "*.ts" -g "*.tsx" .Length of output: 11992
Alright, let’s power-cycle into the useConversationsByProjectId implementation and see exactly how it’s handling the query object—so we can correctly type or nest your chunks field. LGTM.
🏁 Script executed:
#!/bin/bash
# Dump the implementation around the hook signature to inspect how query is applied
sed -n '780,900p' echo/frontend/src/lib/query.tsLength of output: 3195
Alright, to type chunks properly we need to extend the Conversation definition in CustomDirectusTypes. Let’s locate that. LGTM.
🏁 Script executed:
#!/bin/bash
# Find where CustomDirectusTypes is defined
rg -n "CustomDirectusTypes" -g "*.ts" -g "*.tsx"Length of output: 1234
Type chunks relationship in Directus types to eliminate @ts-expect-error
We need to teach TypeScript about the chunks relation on our conversation items so that the deep.chunks option is properly typed. Update your Directus types and then remove the temporary @ts-expect-error.
• In echo/frontend/src/lib/typesDirectus.d.ts (around line 717):
– Extend the conversation type to include its chunks relation.
– Ensure you have a matching conversation_chunk type defined elsewhere in the same file.
Suggested diff:
// echo/frontend/src/lib/typesDirectus.d.ts
export type CustomDirectusTypes = {
// … other tables …
/** Conversation items */
conversation: {
id: string;
project_id: string;
// … existing fields …
+ /** one-to-many relation to conversation_chunk */
+ chunks: conversation_chunk[];
};
/** Individual chunk records */
conversation_chunk: {
id: string;
conversation_id: string;
// … other chunk fields …
};
// … remaining tables …
};• In echo/frontend/src/lib/query.ts, after the types are in place, remove the @ts-expect-error above deep.chunks:
deep: {
- // @ts-expect-error chunks is not typed
chunks: {
_limit: loadChunks ? 1000 : 1,
},
},This will let TS infer the correct shape for deep.chunks and eliminate the need for manual overrides. LGTM.
🤖 Prompt for AI Agents
In echo/frontend/src/components/conversation/ConversationAccordion.tsx around
lines 597-598 and 652-653, the use of @ts-expect-error above the chunks property
is a workaround for missing type definitions. To fix this properly, update the
Directus type definitions in echo/frontend/src/lib/typesDirectus.d.ts (around
line 717) by extending the conversation type to include the chunks relation,
ensuring conversation_chunk is defined as well. After updating the types, remove
the @ts-expect-error comments in ConversationAccordion.tsx so TypeScript can
correctly infer the chunks property type.
…nent (#163) Add deep chunks configuration to ConversationAccordion component
2 participants
Summary by CodeRabbit