Skip to content

Commit

Permalink
feat: add warning to recipe page
Browse files Browse the repository at this point in the history
Signed-off-by: lstocchi <[email protected]>
  • Loading branch information
lstocchi committed Apr 11, 2024
1 parent 2d56d31 commit fdcfa13
Show file tree
Hide file tree
Showing 2 changed files with 47 additions and 25 deletions.
55 changes: 30 additions & 25 deletions packages/frontend/src/lib/ContentDetailsLayout.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -8,34 +8,39 @@ const toggle = () => {
};
</script>

<div class="grid w-full overflow-y-auto lg:grid-cols-[1fr_auto] max-lg:grid-cols-[auto]">
<div class="p-5 inline-grid">
<slot name="content" />
<div class="flex flex-col w-full overflow-y-auto">
<div class="p-5">
<slot name="header" />
</div>
<div class="inline-grid max-lg:order-first">
<div class="max-lg:w-full max-lg:min-w-full" class:w-[375px]="{open}" class:min-w-[375px]="{open}">
<div
class:hidden="{!open}"
class:block="{open}"
class="h-fit lg:bg-charcoal-800 lg:rounded-l-md lg:mt-5 lg:py-4 max-lg:block"
aria-label="{`${detailsLabel} panel`}">
<div class="flex flex-col px-4 space-y-4 mx-auto">
<div class="w-full flex flex-row justify-between max-lg:hidden">
<span class="text-base">{detailsTitle}</span>
<button on:click="{toggle}" aria-label="{`hide ${detailsLabel}`}"
><i class="fas fa-angle-right text-gray-900"></i></button>
<div class="grid w-full lg:grid-cols-[1fr_auto] max-lg:grid-cols-[auto]">
<div class="p-5 inline-grid">
<slot name="content" />
</div>
<div class="inline-grid max-lg:order-first">
<div class="max-lg:w-full max-lg:min-w-full" class:w-[375px]="{open}" class:min-w-[375px]="{open}">
<div
class:hidden="{!open}"
class:block="{open}"
class="h-fit lg:bg-charcoal-800 lg:rounded-l-md lg:mt-5 lg:py-4 max-lg:block"
aria-label="{`${detailsLabel} panel`}">
<div class="flex flex-col px-4 space-y-4 mx-auto">
<div class="w-full flex flex-row justify-between max-lg:hidden">
<span class="text-base">{detailsTitle}</span>
<button on:click="{toggle}" aria-label="{`hide ${detailsLabel}`}"
><i class="fas fa-angle-right text-gray-900"></i></button>
</div>
<slot name="details" />
</div>
<slot name="details" />
</div>
</div>
<div
class:hidden="{open}"
class:block="{!open}"
class="bg-charcoal-800 mt-5 p-4 rounded-md h-fit max-lg:hidden"
aria-label="{`toggle ${detailsLabel}`}">
<button on:click="{toggle}" aria-label="{`show ${detailsLabel}`}"
><i class="fas fa-angle-left text-gray-900"></i></button>
<div
class:hidden="{open}"
class:block="{!open}"
class="bg-charcoal-800 mt-5 p-4 rounded-md h-fit max-lg:hidden"
aria-label="{`toggle ${detailsLabel}`}">
<button on:click="{toggle}" aria-label="{`show ${detailsLabel}`}"
><i class="fas fa-angle-left text-gray-900"></i></button>
</div>
</div>
</div>
</div>
</div>
</div>
17 changes: 17 additions & 0 deletions packages/frontend/src/pages/Recipe.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,10 @@ import RecipeModels from './RecipeModels.svelte';
import { catalog } from '/@/stores/catalog';
import RecipeDetails from '/@/lib/RecipeDetails.svelte';
import ContentDetailsLayout from '../lib/ContentDetailsLayout.svelte';
import type { ContainerConnectionInfo } from '@shared/src/models/IContainerConnectionInfo';
import ContainerConnectionStatusInfo from '../lib/notification/ContainerConnectionStatusInfo.svelte';
import { modelsInfo } from '../stores/modelsInfo';
import { checkContainerConnectionStatus } from '../utils/connectionUtils';
export let recipeId: string;
Expand All @@ -18,6 +22,12 @@ $: recipe = $catalog.recipes.find(r => r.id === recipeId);
$: categories = $catalog.categories;
let selectedModelId: string;
$: selectedModelId = recipe?.models?.[0] ?? '';
let connectionInfo: ContainerConnectionInfo | undefined;
$: if ($modelsInfo && selectedModelId) {
checkContainerConnectionStatus($modelsInfo, selectedModelId, 'recipe')
.then(value => (connectionInfo = value))
.catch((e: unknown) => console.log(String(e)));
}
// Send recipe info to telemetry
let recipeTelemetry: string | undefined = undefined;
Expand All @@ -44,6 +54,13 @@ function setSelectedModel(modelId: string) {
</svelte:fragment>
<svelte:fragment slot="content">
<ContentDetailsLayout detailsTitle="AI App Details" detailsLabel="application details">
<svelte:fragment slot="header">
{#if connectionInfo}
<div class="mx-5">
<ContainerConnectionStatusInfo connectionInfo="{connectionInfo}" background="dark" />
</div>
{/if}
</svelte:fragment>
<svelte:fragment slot="content">
<Route path="/">
<MarkdownRenderer source="{recipe?.readme}" />
Expand Down

0 comments on commit fdcfa13

Please sign in to comment.