Spaces:
Running
Running
File size: 3,404 Bytes
6ce4ca6 2d0da8c 6ce4ca6 2d0da8c 6ce4ca6 2d0da8c 6ce4ca6 2d0da8c 67a499d 6ce4ca6 2d0da8c 67a499d 6ce4ca6 2d0da8c 3cdf7b9 2d0da8c 67a499d 6ce4ca6 2d0da8c 6ce4ca6 2d0da8c 6ce4ca6 2d0da8c 6ce4ca6 2d0da8c 6ce4ca6 2d0da8c 8173aa6 6ce4ca6 3cdf7b9 6ce4ca6 2d0da8c 6ce4ca6 8173aa6 6ce4ca6 67a499d 2d0da8c 67a499d 2d0da8c 6ce4ca6 2d0da8c 6ce4ca6 2d0da8c 6ce4ca6 3cdf7b9 2d0da8c 67a499d 2d0da8c |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 |
<script lang="ts">
import { Button } from "@/components/ui/button";
import * as DropdownMenu from "@/components/ui/dropdown-menu";
import { cn } from "$lib/utils";
import { MODEL_TYPES, type ModelType } from "$lib/elements/compute";
import AIModelConfigurationModal from "@/components/3d/elements/compute/modal/AIModelConfigurationModal.svelte";
interface Props {
workspaceId: string;
open?: boolean;
}
let { open = $bindable(), workspaceId }: Props = $props();
let isConfigModalOpen = $state(false);
let selectedModelType = $state<ModelType>("act");
// Get available model types
const availableModels = Object.values(MODEL_TYPES).filter((model) => model.enabled);
function openConfigModal(modelType: ModelType) {
selectedModelType = modelType;
isConfigModalOpen = true;
open = false; // Close the dropdown
}
function quickAddACT() {
openConfigModal("act");
}
function formatModelType(modelType: string): string {
const config = MODEL_TYPES[modelType as ModelType];
return config ? config.label : modelType;
}
function getModelDescription(modelType: string): string {
const config = MODEL_TYPES[modelType as ModelType];
return config ? config.description : "AI model";
}
function getModelIcon(modelType: string): string {
const config = MODEL_TYPES[modelType as ModelType];
return config ? config.icon : "icon-[mdi--brain]";
}
</script>
<!-- Main Add Button (ACT Model - Quick Add) -->
<Button
variant="default"
size="sm"
onclick={quickAddACT}
disabled={true}
class="group rounded-r-none border-0 bg-purple-500 text-white transition-all duration-200 hover:bg-purple-400 dark:bg-purple-600 dark:hover:bg-purple-500"
>
<span
class={[
"mr-2 size-4 transition-transform duration-200",
"icon-[mdi--plus] group-hover:rotate-90"
]}
></span>
Add Model
</Button>
<!-- Dropdown Menu Button -->
<DropdownMenu.Root bind:open>
<DropdownMenu.Trigger>
{#snippet child({ props })}
<Button
{...props}
disabled={true}
variant="default"
size="sm"
class={cn(
"rounded-l-none border-0 border-l border-purple-400/30 bg-purple-500 px-2 text-white transition-all duration-200 hover:bg-purple-400",
"dark:border-purple-500/30 dark:bg-purple-600 dark:hover:bg-purple-500",
open && "bg-purple-600 shadow-inner dark:bg-purple-700"
)}
>
<span
class={cn(
"size-4 transition-transform duration-200",
"icon-[mdi--chevron-down]",
open && "rotate-180"
)}
></span>
</Button>
{/snippet}
</DropdownMenu.Trigger>
<DropdownMenu.Content
class="w-64 border-slate-300 bg-slate-100 dark:border-slate-600 dark:bg-slate-900"
>
{#each availableModels as model}
<DropdownMenu.Item
class="flex cursor-pointer items-center gap-3 p-3 hover:bg-purple-100 dark:hover:bg-purple-900/30"
onclick={() => openConfigModal(model.id)}
>
<span class="{model.icon} size-5 text-purple-500 dark:text-purple-400"></span>
<div class="flex-1">
<div class="font-medium text-slate-900 dark:text-slate-100">
{model.label}
</div>
<div class="text-xs text-slate-600 dark:text-slate-400">
{model.description}
</div>
</div>
</DropdownMenu.Item>
{/each}
</DropdownMenu.Content>
</DropdownMenu.Root>
<!-- Configuration Modal -->
<AIModelConfigurationModal
bind:open={isConfigModalOpen}
{workspaceId}
initialModelType={selectedModelType}
/>
|