From 801069590f34b7c2deee18587a1c6c29fd41aadf Mon Sep 17 00:00:00 2001
From: kielbasa-elp <dawid.kielbasa@elpassion.pl>
Date: Wed, 18 Sep 2024 16:38:02 +0200
Subject: [PATCH] display more details at Knowledge Base cards

---
 .../list/KnowledgeBaseCollectionList.tsx      |  58 +++++++--
 .../pipelines/list/PipelinesListItem.tsx      | 113 +++++-------------
 apps/web-remix/app/components/ui/card.tsx     |  72 +++++++++++
 3 files changed, 149 insertions(+), 94 deletions(-)

diff --git a/apps/web-remix/app/components/pages/knowledgeBase/list/KnowledgeBaseCollectionList.tsx b/apps/web-remix/app/components/pages/knowledgeBase/list/KnowledgeBaseCollectionList.tsx
index c6ed819ee..9cb56dcfc 100644
--- a/apps/web-remix/app/components/pages/knowledgeBase/list/KnowledgeBaseCollectionList.tsx
+++ b/apps/web-remix/app/components/pages/knowledgeBase/list/KnowledgeBaseCollectionList.tsx
@@ -9,7 +9,9 @@ import { confirm } from '~/components/modal/confirm';
 import {
   Card,
   CardContent,
-  CardDescription,
+  CardContentColumnTitle,
+  CardContentColumnValue,
+  CardContentColumnWrapper,
   CardHeader,
   CardTitle,
 } from '~/components/ui/card';
@@ -52,7 +54,7 @@ export const KnowledgeBaseCollectionList: React.FC<
   return (
     <ItemList
       aria-label="Memory collections list"
-      className="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3"
+      className="grid gap-4 grid-cols-1"
       items={items}
       emptyText={
         <EmptyMessage className="block mt-14 md:mt-20">
@@ -118,14 +120,50 @@ export const KnowledgeBaseCollectionListItem: React.FC<
         </div>
       </CardHeader>
 
-      <CardContent>
-        <div className="flex gap-x-2 flex-wrap">
-          <CardDescription className="text-nowrap whitespace-nowrap">
-            Chunk size:{data.chunk_size}
-          </CardDescription>
-          <CardDescription className="text-nowrap whitespace-nowrap">
-            Chunk overlap:{data.chunk_overlap}
-          </CardDescription>
+      <CardContent className="border-t border-input">
+        <div className="grid grid-cols-1 divide-y xl:divide-y-0 xl:grid-cols-[3fr_4fr_2fr_2fr_2fr_2fr_2fr] pt-3">
+          <CardContentColumnWrapper>
+            <CardContentColumnTitle>Model</CardContentColumnTitle>
+            <CardContentColumnValue>
+              {data.embeddings.model}
+            </CardContentColumnValue>
+          </CardContentColumnWrapper>
+
+          <CardContentColumnWrapper>
+            <CardContentColumnTitle>Endpoint</CardContentColumnTitle>
+            <CardContentColumnValue
+              className="line-clamp-1"
+              title={data.embeddings.endpoint}
+            >
+              {data.embeddings.endpoint}
+            </CardContentColumnValue>
+          </CardContentColumnWrapper>
+
+          <CardContentColumnWrapper>
+            <CardContentColumnTitle>Api type</CardContentColumnTitle>
+            <CardContentColumnValue>
+              {data.embeddings.api_type}
+            </CardContentColumnValue>
+          </CardContentColumnWrapper>
+
+          <CardContentColumnWrapper>
+            <CardContentColumnTitle>Secret name</CardContentColumnTitle>
+            <CardContentColumnValue>
+              {data.embeddings.secret_name}
+            </CardContentColumnValue>
+          </CardContentColumnWrapper>
+
+          <CardContentColumnWrapper>
+            <CardContentColumnTitle>Chunk size</CardContentColumnTitle>
+            <CardContentColumnValue>{data.chunk_size}</CardContentColumnValue>
+          </CardContentColumnWrapper>
+
+          <CardContentColumnWrapper>
+            <CardContentColumnTitle>Chunk overlap</CardContentColumnTitle>
+            <CardContentColumnValue>
+              {data.chunk_overlap}
+            </CardContentColumnValue>
+          </CardContentColumnWrapper>
         </div>
       </CardContent>
     </Card>
diff --git a/apps/web-remix/app/components/pages/pipelines/list/PipelinesListItem.tsx b/apps/web-remix/app/components/pages/pipelines/list/PipelinesListItem.tsx
index 0b024b6d5..1c24e537a 100644
--- a/apps/web-remix/app/components/pages/pipelines/list/PipelinesListItem.tsx
+++ b/apps/web-remix/app/components/pages/pipelines/list/PipelinesListItem.tsx
@@ -20,7 +20,16 @@ import { resolveBlockTypeIconPath } from '~/components/pages/pipelines/blockType
 import type { BadgeProps } from '~/components/ui/badge';
 import { Badge } from '~/components/ui/badge';
 import { Button } from '~/components/ui/button';
-import { Card, CardContent, CardHeader, CardTitle } from '~/components/ui/card';
+import {
+  Card,
+  CardContent,
+  CardContentBooleanValue,
+  CardContentColumnTitle,
+  CardContentColumnValue,
+  CardContentColumnWrapper,
+  CardHeader,
+  CardTitle,
+} from '~/components/ui/card';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -139,9 +148,9 @@ export const PipelineListItemContent = ({
   return (
     <CardContent className="border-t border-input">
       <div className="grid grid-cols-1 divide-y xl:divide-y-0 xl:grid-cols-[3fr_3fr_2fr_5fr_2fr] pt-3">
-        <PipelinesItemColumnWrapper>
-          <PipelinesItemColumnTitle>Logs</PipelinesItemColumnTitle>
-          <PipelinesItemColumnBooleanValue value={pipeline.logs_enabled}>
+        <CardContentColumnWrapper>
+          <CardContentColumnTitle>Logs</CardContentColumnTitle>
+          <CardContentBooleanValue value={pipeline.logs_enabled}>
             {pipeline.logs_enabled ? (
               <>
                 <CircleCheck className="w-3.5 h-3.5" /> Enabled
@@ -151,40 +160,38 @@ export const PipelineListItemContent = ({
                 <CircleX className="w-3.5 h-3.5" /> Disabled
               </>
             )}
-          </PipelinesItemColumnBooleanValue>
-        </PipelinesItemColumnWrapper>
+          </CardContentBooleanValue>
+        </CardContentColumnWrapper>
 
-        <PipelinesItemColumnWrapper>
-          <PipelinesItemColumnTitle>Budget limit</PipelinesItemColumnTitle>
-          <PipelinesItemColumnBooleanValue value={!!pipeline.budget_limit}>
+        <CardContentColumnWrapper>
+          <CardContentColumnTitle>Budget limit</CardContentColumnTitle>
+          <CardContentBooleanValue value={!!pipeline.budget_limit}>
             {pipeline.budget_limit ? (
               MonetaryValue.format(pipeline.budget_limit)
             ) : (
               <span>None</span>
             )}
-          </PipelinesItemColumnBooleanValue>
-        </PipelinesItemColumnWrapper>
+          </CardContentBooleanValue>
+        </CardContentColumnWrapper>
 
-        <PipelinesItemColumnWrapper>
-          <PipelinesItemColumnTitle>Runs</PipelinesItemColumnTitle>
-          <PipelinesItemColumnValue>
-            {pipeline.runs_count}
-          </PipelinesItemColumnValue>
-        </PipelinesItemColumnWrapper>
+        <CardContentColumnWrapper>
+          <CardContentColumnTitle>Runs</CardContentColumnTitle>
+          <CardContentColumnValue>{pipeline.runs_count}</CardContentColumnValue>
+        </CardContentColumnWrapper>
 
-        <PipelinesItemColumnWrapper className="overflow-hidden relative">
-          <PipelinesItemColumnTitle>Blocks</PipelinesItemColumnTitle>
+        <CardContentColumnWrapper className="overflow-hidden relative">
+          <CardContentColumnTitle>Blocks</CardContentColumnTitle>
 
           {pipeline.config.blocks.length > 0 ? (
             <PipelineItemBlockList pipeline={pipeline} />
           ) : (
-            <PipelinesItemColumnBooleanValue value={false}>
+            <CardContentBooleanValue value={false}>
               None
-            </PipelinesItemColumnBooleanValue>
+            </CardContentBooleanValue>
           )}
 
           <div className="absolute h-6 w-8 right-0 bottom-0 bg-gradient-to-r from-transparent to-white pointer-events-none" />
-        </PipelinesItemColumnWrapper>
+        </CardContentColumnWrapper>
       </div>
     </CardContent>
   );
@@ -226,68 +233,6 @@ function DuplicateForm({ pipeline }: DuplicateFormProps) {
   );
 }
 
-function PipelinesItemColumnWrapper({
-  children,
-  className,
-  ...rest
-}: React.HTMLAttributes<HTMLDivElement>) {
-  return (
-    <div
-      className={cn(
-        'flex gap-5 shrink-0 w-full justify-between items-center py-2 xl:gap-1 xl:flex-col xl:items-start xl:py-0 xl:justify-start',
-        className,
-      )}
-      {...rest}
-    >
-      {children}
-    </div>
-  );
-}
-
-function PipelinesItemColumnTitle({
-  children,
-  className,
-  ...rest
-}: React.HTMLAttributes<HTMLParagraphElement>) {
-  return (
-    <p className={cn('text-xs text-neutral-300 shrink-0', className)} {...rest}>
-      {children}
-    </p>
-  );
-}
-
-function PipelinesItemColumnValue({
-  children,
-  className,
-  ...rest
-}: React.HTMLAttributes<HTMLParagraphElement>) {
-  return (
-    <p className={cn('text-sm text-foreground', className)} {...rest}>
-      {children}
-    </p>
-  );
-}
-
-function PipelinesItemColumnBooleanValue({
-  children,
-  className,
-  value,
-  ...rest
-}: React.HTMLAttributes<HTMLParagraphElement> & { value: boolean }) {
-  return (
-    <PipelinesItemColumnValue
-      className={cn(
-        'flex gap-1 items-center',
-        { 'text-neutral-400': !value },
-        className,
-      )}
-      {...rest}
-    >
-      {children}
-    </PipelinesItemColumnValue>
-  );
-}
-
 function PipelineItemInterfaceBadge({
   children,
   className,
diff --git a/apps/web-remix/app/components/ui/card.tsx b/apps/web-remix/app/components/ui/card.tsx
index 9e5546c67..1a0a88b96 100644
--- a/apps/web-remix/app/components/ui/card.tsx
+++ b/apps/web-remix/app/components/ui/card.tsx
@@ -76,6 +76,74 @@ const CardFooter = React.forwardRef<
 ));
 CardFooter.displayName = 'CardFooter';
 
+function CardContentColumnWrapper({
+  children,
+  className,
+  ...rest
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn(
+        'flex gap-5 shrink-0 w-full justify-between items-center py-2 xl:gap-1 xl:flex-col xl:items-start xl:py-0 xl:justify-start',
+        className,
+      )}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+}
+
+function CardContentColumnTitle({
+  children,
+  className,
+  ...rest
+}: React.HTMLAttributes<HTMLParagraphElement>) {
+  return (
+    <p
+      className={cn(
+        'text-xs text-neutral-300 shrink-0 whitespace-nowrap',
+        className,
+      )}
+      {...rest}
+    >
+      {children}
+    </p>
+  );
+}
+
+function CardContentColumnValue({
+  children,
+  className,
+  ...rest
+}: React.HTMLAttributes<HTMLParagraphElement>) {
+  return (
+    <p className={cn('text-sm text-foreground', className)} {...rest}>
+      {children}
+    </p>
+  );
+}
+
+function CardContentBooleanValue({
+  children,
+  className,
+  value,
+  ...rest
+}: React.HTMLAttributes<HTMLParagraphElement> & { value: boolean }) {
+  return (
+    <CardContentColumnValue
+      className={cn(
+        'flex gap-1 items-center',
+        { 'text-neutral-400': !value },
+        className,
+      )}
+      {...rest}
+    >
+      {children}
+    </CardContentColumnValue>
+  );
+}
+
 export {
   Card,
   CardHeader,
@@ -83,4 +151,8 @@ export {
   CardTitle,
   CardDescription,
   CardContent,
+  CardContentColumnTitle,
+  CardContentBooleanValue,
+  CardContentColumnValue,
+  CardContentColumnWrapper,
 };