Skip to content

ECHO-245 Add deep chunks configuration to ConversationAccordion component #163

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ussaama merged 1 commit into from
May 20, 2025
Merged

ECHO-245 Add deep chunks configuration to ConversationAccordion component #163

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions echo/frontend/src/components/conversation/ConversationAccordion.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -593,6 +593,12 @@ export const ConversationAccordion = ({ projectId }: { projectId: string }) => {
false,
{
limit: 1,
deep: {
// @ts-expect-error chunks is not typed
chunks: {
Comment on lines +597 to +598
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot May 20, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 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 15

Length 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.ts

Length 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.

_limit: 25,
},
},
Comment on lines +596 to +601
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot May 20, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 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.

},
);

Expand Down Expand Up @@ -642,6 +648,12 @@ export const ConversationAccordion = ({ projectId }: { projectId: string }) => {
{
search: debouncedConversationSearchValue,
sort: sortBy,
deep: {
// @ts-expect-error chunks is not typed
chunks: {
_limit: 25,
},
},
},
// Temporarily disabled source filters
// filterBySource,
Expand Down