Skip to content

Config Listing Page: Show All Vector Stores in the Config Card Listing Page #34

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
Prajna1999 merged 2 commits into from
Feb 2, 2026
Merged

Config Listing Page: Show All Vector Stores in the Config Card Listing Page #34

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8f902b3
fix: add tools, vector store ids to the config cards
Prajna1999 Feb 2, 2026
89216f9
fix: vector store ids all visible in the config card listing
Prajna1999 Feb 2, 2026
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
113 changes: 112 additions & 1 deletion app/components/ConfigCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
*/

"use client"
import React from 'react';
import React, { useState } from 'react';
import { useRouter } from 'next/navigation';
import { colors } from '@/app/lib/colors';
import { ConfigGroup, SavedConfig, formatRelativeTime } from '@/app/lib/useConfigs';
Expand All @@ -23,6 +23,8 @@ export default function ConfigCard({
}: ConfigCardProps) {
const router = useRouter();
const { latestVersion, totalVersions } = configGroup;
const [showTools, setShowTools] = useState(false);
const [showVectorStores, setShowVectorStores] = useState(false);

const handleEdit = () => {
router.push(`/configurations/prompt-editor?config=${latestVersion.config_id}&version=${latestVersion.version}`);
Expand Down Expand Up @@ -101,6 +103,115 @@ export default function ConfigCard({
</div>
</div>

{/* Tools Dropdown */}
{latestVersion.tools && latestVersion.tools.length > 0 && (
<div className="mb-4">
<button
onClick={() => setShowTools(!showTools)}
className="w-full flex items-center justify-between px-2.5 py-1.5 rounded-md text-xs transition-colors"
style={{
backgroundColor: colors.bg.secondary,
border: `1px solid ${colors.border}`,
}}
>
<span style={{ color: colors.text.secondary }}>
Tools ({latestVersion.tools.length})
</span>
<svg
className={`w-3 h-3 transition-transform ${showTools ? 'rotate-180' : ''}`}
style={{ color: colors.text.secondary }}
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
</svg>
</button>
{showTools && (
<div
className="mt-1 p-2 rounded-md text-xs space-y-2"
style={{
backgroundColor: colors.bg.secondary,
border: `1px solid ${colors.border}`,
}}
>
{latestVersion.tools.map((tool, idx) => (
<div key={idx} className="space-y-1">
<div style={{ color: colors.text.primary, fontWeight: 500 }}>
{tool.type}
</div>
{tool.knowledge_base_ids && tool.knowledge_base_ids.length > 0 && (
<div style={{ color: colors.text.secondary }}>
Knowledge Bases: {tool.knowledge_base_ids.length}
</div>
)}
{tool.max_num_results && (
<div style={{ color: colors.text.secondary }}>
Max Results: {tool.max_num_results}
</div>
Comment on lines +148 to +151
Copy link
Copy Markdown

@coderabbitai coderabbitai bot Feb 2, 2026

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor

Render max_num_results when the value is 0.
The current truthy check hides valid zero values. Use a null/undefined check instead.

✅ Suggested patch 
-                    {tool.max_num_results && (
+                    {tool.max_num_results != null && (
                       <div style={{ color: colors.text.secondary }}>
                         Max Results: {tool.max_num_results}
                       </div>
                     )}
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
{tool.max_num_results && (
<div style={{ color: colors.text.secondary }}>
Max Results: {tool.max_num_results}
</div>
{tool.max_num_results != null && (
<div style={{ color: colors.text.secondary }}>
Max Results: {tool.max_num_results}
</div>
)}
🤖 Prompt for AI Agents 
In `@app/components/ConfigCard.tsx` around lines 148 - 151, The conditional
rendering for tool.max_num_results currently uses a truthy check which hides
valid zero values; update the check in ConfigCard (where it reads
{tool.max_num_results && (...)}) to explicitly test for null/undefined (e.g.,
tool.max_num_results != null or typeof tool.max_num_results !== 'undefined') so
that 0 is rendered correctly while still omitting absent values.

)}
</div>
))}

{/* Vector Stores Section inside Tools */}
{(() => {
// Collect all knowledge_base_ids from all tools
const allVectorStoreIds = latestVersion.tools
.flatMap(tool => tool.knowledge_base_ids || [])
.filter(id => id);

return allVectorStoreIds.length > 0 && (
<div className="mt-3 pt-2" style={{ borderTop: `1px solid ${colors.border}` }}>
<button
onClick={() => setShowVectorStores(!showVectorStores)}
className="w-full flex items-center justify-between px-2 py-1 rounded-md transition-colors"
style={{
backgroundColor: colors.bg.primary,
}}
>
<span style={{ color: colors.text.secondary, fontSize: '11px' }}>
Vector Store IDs ({allVectorStoreIds.length})
</span>
<svg
className={`w-3 h-3 transition-transform ${showVectorStores ? 'rotate-180' : ''}`}
style={{ color: colors.text.secondary }}
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
</svg>
</button>
{showVectorStores && (
<div
className="mt-1 p-2 rounded-md space-y-1"
style={{
backgroundColor: colors.bg.primary,
color: colors.text.primary,
}}
>
{allVectorStoreIds.map((id, idx) => (
<div
key={idx}
className="break-all"
style={{
fontFamily: 'monospace',
fontSize: '10px',
}}
>
{id}
</div>
))}
</div>
)}
</div>
);
})()}
</div>
)}
</div>
)}

{/* Prompt Preview */}
<div
className="rounded-md p-3 mb-4 text-xs font-mono overflow-hidden"
Expand Down