diff --git a/apps/beeai-ui/src/components/ErrorMessage/ErrorMessage.tsx b/apps/beeai-ui/src/components/ErrorMessage/ErrorMessage.tsx index 8ba0e7be..fa9011aa 100644 --- a/apps/beeai-ui/src/components/ErrorMessage/ErrorMessage.tsx +++ b/apps/beeai-ui/src/components/ErrorMessage/ErrorMessage.tsx @@ -34,7 +34,7 @@ export function ErrorMessage({ title, subtitle, onRetry, isRefetching, children {subtitle &&

{subtitle}

} {onRetry && ( - )} diff --git a/apps/beeai-ui/src/components/Modal/Modal.module.scss b/apps/beeai-ui/src/components/Modal/Modal.module.scss index 36058a00..9591ccb0 100644 --- a/apps/beeai-ui/src/components/Modal/Modal.module.scss +++ b/apps/beeai-ui/src/components/Modal/Modal.module.scss @@ -95,7 +95,7 @@ } :global(.cds--modal-footer) { - border-radius: 0 0 $spacing-03 $spacing-03; + border-radius: 0 0 $border-radius $border-radius; padding: $spacing-06 $spacing-05 $spacing-05; &:global(.cds--btn-set) { diff --git a/apps/beeai-ui/src/components/SkeletonItems/SkeletonItems.tsx b/apps/beeai-ui/src/components/SkeletonItems/SkeletonItems.tsx new file mode 100644 index 00000000..e9e71fae --- /dev/null +++ b/apps/beeai-ui/src/components/SkeletonItems/SkeletonItems.tsx @@ -0,0 +1,26 @@ +/** + * Copyright 2025 IBM Corp. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { ReactNode } from 'react'; + +interface Props { + count: number; + render: (idx: number) => ReactNode; +} + +export function SkeletonItems({ count, render }: Props) { + return Array.from({ length: count }, (_, idx) => render(idx)); +} diff --git a/apps/beeai-ui/src/components/TagsList/TagsList.tsx b/apps/beeai-ui/src/components/TagsList/TagsList.tsx index 53e95bc3..a5fe4410 100644 --- a/apps/beeai-ui/src/components/TagsList/TagsList.tsx +++ b/apps/beeai-ui/src/components/TagsList/TagsList.tsx @@ -14,6 +14,7 @@ * limitations under the License. */ +import { SkeletonItems } from '#components/SkeletonItems/SkeletonItems.tsx'; import { TagSkeleton } from '@carbon/react'; import clsx from 'clsx'; import { ReactElement } from 'react'; @@ -42,9 +43,7 @@ interface SkeletonProps { TagsList.Skeleton = function TagsListSkeleton({ length = 1, className }: SkeletonProps) { return (
- {Array.from({ length }).map((_, idx) => ( - - ))} + } />
); }; diff --git a/apps/beeai-ui/src/components/layouts/Container.module.scss b/apps/beeai-ui/src/components/layouts/Container.module.scss index ed8d8e7b..626dc34d 100644 --- a/apps/beeai-ui/src/components/layouts/Container.module.scss +++ b/apps/beeai-ui/src/components/layouts/Container.module.scss @@ -16,26 +16,22 @@ @use 'sass:map'; +$sizes: ( + xs: rem(504px), + sm: rem(608px), + md: rem(768px), + lg: rem(928px), + xlg: rem(1088px), + xxlg: rem(1248px), +); + .root { margin-inline: auto; padding-inline: $grid-margin; inline-size: 100%; - &.xs { - max-inline-size: calc(rem(504px) + 2 * $grid-margin); - } - &.sm { - max-inline-size: calc(rem(608px) + 2 * $grid-margin); - } - &.md { - max-inline-size: calc(rem(768px) + 2 * $grid-margin); - } - &.lg { - max-inline-size: calc(rem(928px) + 2 * $grid-margin); - } - &.xlg { - max-inline-size: calc(rem(1088px) + 2 * $grid-margin); - } - &.xxlg { - max-inline-size: calc(rem(1248px) + 2 * $grid-margin); + @each $size, $width in $sizes { + &.#{$size} { + max-inline-size: calc($width + 2 * $grid-margin); + } } } diff --git a/apps/beeai-ui/src/modules/agents/components/AgentDetail.module.scss b/apps/beeai-ui/src/modules/agents/components/AgentDetail.module.scss index ecd045b0..604934cf 100644 --- a/apps/beeai-ui/src/modules/agents/components/AgentDetail.module.scss +++ b/apps/beeai-ui/src/modules/agents/components/AgentDetail.module.scss @@ -48,10 +48,6 @@ margin-block-start: $spacing-06; } - .launchButton { - min-inline-size: rem(208px); - } - .copySnippet { min-inline-size: rem(288px); } diff --git a/apps/beeai-ui/src/modules/agents/components/AgentDetail.tsx b/apps/beeai-ui/src/modules/agents/components/AgentDetail.tsx index 287253ff..64c71860 100644 --- a/apps/beeai-ui/src/modules/agents/components/AgentDetail.tsx +++ b/apps/beeai-ui/src/modules/agents/components/AgentDetail.tsx @@ -16,25 +16,26 @@ 'use client'; -import type { ReactNode } from 'react'; -import { ButtonSkeleton, SkeletonText } from '@carbon/react'; +import { CopySnippet } from '#components/CopySnippet/CopySnippet.tsx'; +import { MarkdownContent } from '#components/MarkdownContent/MarkdownContent.tsx'; +import { TagsList } from '#components/TagsList/TagsList.tsx'; +import commands from '#utils/commands.ts'; +import { fadeProps } from '#utils/fadeProps.ts'; import { spacing } from '@carbon/layout'; import { moderate01 } from '@carbon/motion'; -import { motion } from 'framer-motion'; +import { ButtonSkeleton, SkeletonText } from '@carbon/react'; import clsx from 'clsx'; +import { motion } from 'framer-motion'; +import type { ReactNode } from 'react'; import type { Agent } from '../api/types'; +import { AgentLaunchButton } from '../detail/AgentLaunchButton'; import { getAgentTitle } from '../utils'; -import { AgentMetadata } from './AgentMetadata'; -import { TagsList } from '#components/TagsList/TagsList.tsx'; -import { CopySnippet } from '#components/CopySnippet/CopySnippet.tsx'; -import { MarkdownContent } from '#components/MarkdownContent/MarkdownContent.tsx'; +import classes from './AgentDetail.module.scss'; import { AgentDetailSection } from './AgentDetailSection'; import { AgentExampleRequests } from './AgentExampleRequests'; +import { AgentMetadata } from './AgentMetadata'; import { AgentTags } from './AgentTags'; import { BeeBadge } from './BeeBadge'; -import { fadeProps } from '#utils/fadeProps.ts'; -import commands from '#utils/commands.ts'; -import classes from './AgentDetail.module.scss'; interface Props { agent: Agent; @@ -103,9 +104,9 @@ AgentDetail.Skeleton = function AgentDetailSkeleton() {
- {/* .cds--layout--size-md fixes Carbon bug where button size prop is not respected */} - + + {/* .cds--layout--size-md fixes Carbon bug where button size prop is not respected */}
diff --git a/apps/beeai-ui/src/modules/agents/detail/AgentLaunchButton.tsx b/apps/beeai-ui/src/modules/agents/detail/AgentLaunchButton.tsx index 400d4637..93c9533d 100644 --- a/apps/beeai-ui/src/modules/agents/detail/AgentLaunchButton.tsx +++ b/apps/beeai-ui/src/modules/agents/detail/AgentLaunchButton.tsx @@ -19,7 +19,8 @@ import { useModal } from '#contexts/Modal/index.tsx'; import { AddRequiredEnvsModal } from '#modules/envs/components/AddRequiredEnvsModal.tsx'; import { routes } from '#utils/router.ts'; import { ArrowRight } from '@carbon/icons-react'; -import { Button } from '@carbon/react'; +import { Button, ButtonSkeleton } from '@carbon/react'; +import clsx from 'clsx'; import isEmpty from 'lodash/isEmpty'; import type { Agent } from '../api/types'; import { useMissingEnvs } from '../hooks/useMissingEnvs'; @@ -55,3 +56,8 @@ export function AgentLaunchButton({ agent }: Props) { ) : null; } + +AgentLaunchButton.Skeleton = function AgentLaunchButtonSkeleton() { + /* .cds--layout--size-md fixes Carbon bug where button size prop is not respected */ + return ; +}; diff --git a/apps/beeai-ui/src/modules/agents/list/AgentsView.tsx b/apps/beeai-ui/src/modules/agents/list/AgentsView.tsx index c9c06594..f502d992 100644 --- a/apps/beeai-ui/src/modules/agents/list/AgentsView.tsx +++ b/apps/beeai-ui/src/modules/agents/list/AgentsView.tsx @@ -14,18 +14,19 @@ * limitations under the License. */ -import { useFormContext } from 'react-hook-form'; -import { AgentsFilters } from '../components/AgentsFilters'; import { ErrorMessage } from '#components/ErrorMessage/ErrorMessage.tsx'; -import { AgentsList } from '../components/AgentsList'; -import { AgentCard } from '../components/AgentCard'; -import { Agent } from '../api/types'; +import { SkeletonItems } from '#components/SkeletonItems/SkeletonItems.tsx'; import { TransitionLink } from '#components/TransitionLink/TransitionLink.tsx'; -import { getAgentTitle } from '../utils'; import { routes } from '#utils/router.ts'; -import { ImportAgents } from '../components/ImportAgents'; +import { useFormContext } from 'react-hook-form'; import { useListAgents } from '../api/queries/useListAgents'; +import { Agent } from '../api/types'; +import { AgentCard } from '../components/AgentCard'; +import { AgentsFilters } from '../components/AgentsFilters'; +import { AgentsList } from '../components/AgentsList'; +import { ImportAgents } from '../components/ImportAgents'; import { AgentsFiltersParams } from '../providers/AgentsFiltersProvider'; +import { getAgentTitle } from '../utils'; export function AgentsView() { const { data, isPending, error, refetch, isRefetching } = useListAgents(); @@ -46,17 +47,22 @@ export function AgentsView() { return ( }> {(filteredAgents) => - !isPending - ? filteredAgents?.map((agent, idx) => ( -
  • - -
    • - )) - : Array.from({ length: 3 }, (_, idx) => ( + !isPending ? ( + filteredAgents?.map((agent, idx) => ( +
  • + +
    • + )) + ) : ( + (
    • - )) + )} + /> + ) }     ); diff --git a/apps/beeai-ui/src/modules/envs/components/EnvsView.tsx b/apps/beeai-ui/src/modules/envs/components/EnvsView.tsx index 23085bac..1a82aabb 100644 --- a/apps/beeai-ui/src/modules/envs/components/EnvsView.tsx +++ b/apps/beeai-ui/src/modules/envs/components/EnvsView.tsx @@ -116,7 +116,7 @@ export function EnvsView() { {isPending ? ( - + ) : ( diff --git a/apps/beeai-ui/src/modules/home/api/queries/useGitHubRepo.ts b/apps/beeai-ui/src/modules/home/api/queries/useGitHubRepo.ts index 668bd704..be1db1d9 100644 --- a/apps/beeai-ui/src/modules/home/api/queries/useGitHubRepo.ts +++ b/apps/beeai-ui/src/modules/home/api/queries/useGitHubRepo.ts @@ -25,6 +25,9 @@ export function useGitHubRepo(params: GitHubRepoParams) { queryFn: () => fetchGitHubRepo(params), staleTime: 1000 * 60 * 5, retry: 1, + meta: { + errorToast: false, + }, }); return query; diff --git a/apps/beeai-ui/src/modules/home/components/GitHubStarsButton.tsx b/apps/beeai-ui/src/modules/home/components/GitHubStarsButton.tsx index d22d7a00..e30988aa 100644 --- a/apps/beeai-ui/src/modules/home/components/GitHubStarsButton.tsx +++ b/apps/beeai-ui/src/modules/home/components/GitHubStarsButton.tsx @@ -15,7 +15,7 @@ */ import { Spinner } from '#components/Spinner/Spinner.tsx'; -import { GITHUB_REPO } from '#utils/constants.ts'; +import { GITHUB_REPO, GITHUB_REPO_LINK } from '#utils/constants.ts'; import { LogoGithub } from '@carbon/icons-react'; import { Button } from '@carbon/react'; import { millify } from 'millify'; @@ -27,13 +27,7 @@ export function GitHubStarsButton() { const count = data?.stargazers_count && millify(data.stargazers_count); return ( -