Skip to content

Commit

Permalink
display more details at Knowledge Base cards
Browse files Browse the repository at this point in the history
  • Loading branch information
@kielbasa-elp
kielbasa-elp committed Sep 18, 2024
1 parent 02d7590 commit 8010695
Show file tree
Hide file tree
Showing 3 changed files with 149 additions and 94 deletions.
58 changes: 48 additions & 10 deletions apps/web-remix/app/components/pages/knowledgeBase/list/KnowledgeBaseCollectionList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,9 @@ import { confirm } from '~/components/modal/confirm';
import {
Card,
CardContent,
CardDescription,
CardContentColumnTitle,
CardContentColumnValue,
CardContentColumnWrapper,
CardHeader,
CardTitle,
} from '~/components/ui/card';
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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>
Expand Down
113 changes: 29 additions & 84 deletions apps/web-remix/app/components/pages/pipelines/list/PipelinesListItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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
Expand All @@ -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>
);
Expand Down Expand Up @@ -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,
Expand Down
72 changes: 72 additions & 0 deletions apps/web-remix/app/components/ui/card.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,11 +76,83 @@ 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,
CardFooter,
CardTitle,
CardDescription,
CardContent,
CardContentColumnTitle,
CardContentBooleanValue,
CardContentColumnValue,
CardContentColumnWrapper,
};

0 comments on commit 8010695

Please sign in to comment.