Explore is only accessible to authenticated users

src/lib/IONOS/components/ai-team/AgentCard.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">
+	import { createEventDispatcher } from 'svelte';
+	import CircleInfo from '../icons/CircleInfo.svelte';
+	import Crown from '$lib/IONOS/components/icons/Crown.svelte';
+	import Dialog from '$lib/IONOS/components/common/Dialog.svelte';
+	import AgentCardDetail from './AgentCardDetail.svelte';
+	import type { IAgentAiTeam } from './ai-team.type';
+
+	export let agent: IAgentAiTeam;
+
+	const dispatch = createEventDispatcher();
+
+	let showDetail = false;
+
+	function openDetail() {
+		showDetail = true;
+	}
+
+	function closeDetail() {
+		showDetail = false;
+	}
+
+	function handleCardClick() {
+		dispatch('select', agent.id);
+	}
+</script>
+
+<div
+	class="w-[320px] gap-4 opacity-100 rounded-2xl p-6 shadow-l cursor-pointer {agent.highlight ? 'bg-purple-700' : 'bg-white'}"
+	on:click={handleCardClick}
+	on:keydown={(e) => e.key === 'Enter' && handleCardClick()}
+	role="button"
+	tabindex="0"
+>
+	<div class="flex items-center gap-4 mb-4 relative">
+		{#if agent.id}
+			<img src={`/avatars/${agent.id}.jpg`} alt="Model Avatar" class="w-8 h-8 rounded-full" />
+		{:else}
+			<div
+				class="w-8 h-8 rounded-full bg-gradient-to-r from-blue-500 to-purple-700 flex items-center justify-center text-white font-semibold"
+			>
+				{agent.name.charAt(0)}
+			</div>
+		{/if}
+		<div>
+			<h3
+				class="text-xs font-semibold leading-tight font-sans {agent.highlight ? 'text-purple-100' : 'text-blue-800'}"
+			>
+				{agent.name}
+			</h3>
+			{#if agent.speciality}
+				<p
+					class="text-xs font-normal leading-[150%] font-sans {agent.highlight ? 'text-purple-100' : 'text-blue-800'}"
+				>
+					{agent.speciality}
+				</p>
+			{/if}
+		</div>
+		<button
+			type="button"
+			class="absolute top-0 right-0 cursor-pointer bg-transparent border-none p-0"
+			on:click={(e) => {
+				e.stopPropagation();
+				openDetail();
+			}}
+			aria-label="View agent details"
+		>
+			{#if agent.showCrown}
+				<Crown className="w-5 h-5" />
+			{:else}
+				<CircleInfo className="w-5 h-5 text-gray-500" />
+			{/if}
+		</button>
+	</div>
+
+	<p
+		class="text-xs font-normal leading-[150%] font-sans {agent.highlight ? 'text-purple-100' : 'text-blue-800'}"
+	>
+		{agent.description}
+	</p>
+</div>
+
+
+<Dialog
+	bind:show={showDetail}
+	on:close={closeDetail}
+	mobileCover={false}
+	class="!p-0 !w-fit !h-fit !max-h-[90vh] overflow-y-auto {showDetail ? 'max-md:translate-y-[0]' : 'max-md:translate-y-[100dvh]'}"
+>
+	<div slot="content">
+		<AgentCardDetail {agent} on:close={closeDetail} on:select />
+	</div>
+</Dialog>

src/lib/IONOS/components/ai-team/AgentCardDetail.svelte

@@ -0,0 +1,103 @@
+<script lang="ts">
+	import XMark from '$lib/components/icons/XMark.svelte';
+	import { createEventDispatcher } from 'svelte';
+	import type { IAgentAiTeam } from './ai-team.type';
+	import Checkmark from '../icons/Checkmark.svelte';
+	import Button from '$lib/IONOS/components/common/Button.svelte';
+	import Sparkles from '$lib/components/icons/Sparkles.svelte';
+
+	const dispatch = createEventDispatcher();
+
+	export let agent: IAgentAiTeam;
+
+	function close() {
+		dispatch('close');
+	}
+
+	function startChat() {
+		dispatch('select', agent.id);
+		close();
+	}
+</script>
+
+<div
+	class="w-full max-w-md flex flex-col gap-4 opacity-100 rounded-2xl p-4 sm:p-8 bg-white shadow-l"
+>
+	<div class="flex justify-end relative z-10">
+		<button
+			type="button"
+			class="cursor-pointer bg-transparent border-none p-0"
+			on:click={close}
+			aria-label="Close dialog"
+		>
+			<XMark className="w-5 h-5" />
+		</button>
+	</div>
+	<div class="flex items-center gap-4">
+		{#if agent.id}
+			<img
+				src={`/avatars/${agent.id}.jpg`}
+				alt={agent.name}
+				class="w-20 h-20 sm:w-30 sm:h-30 rounded-full flex-shrink-0"
+			/>
+		{:else}
+			<div
+				class="w-20 h-20 sm:w-30 sm:h-30 rounded-full bg-gradient-to-r from-blue-500 to-purple-700 flex items-center justify-center text-white font-bold text-xl sm:text-2xl flex-shrink-0"
+			>
+				{agent.name.charAt(0)}
+			</div>
+		{/if}
+
+		<div class="flex-1">
+			<h2
+				class="font-overpass font-normal text-2xl leading-8 sm:leading-10 text-gray-900 mb-1"
+			>
+				{agent.name}
+			</h2>
+			{#if agent.speciality}
+				<h3 class="font-sans font-normal text-lg mb-2">
+					{agent.speciality}
+				</h3>
+			{/if}
+		</div>
+	</div>
+
+	<div>
+		<p class="font-sans font-normal text-sm leading-[150%] text-gray-700">
+			{agent.description}
+		</p>
+	</div>
+
+	<!-- Capabilities Section -->
+	{#if agent.capabilities && agent.capabilities.length > 0}
+		<div>
+			<h4 class="font-sans font-semibold text-sm leading-tight mb-3">
+				Capabilities
+			</h4>
+			<div class="flex flex-col">
+				{#each agent.capabilities as capability}
+					<div class="flex items-center py-1 gap-2">
+						<span
+							class="w-6 h-6 rounded-full flex justify-center items-center text-blue-600 bg-blue-200"
+							><Checkmark className="w-3 h-3" /></span
+						>
+						<span class="font-sans font-normal text-sm leading-normal"
+							>{capability}</span
+						>
+					</div>
+				{/each}
+			</div>
+		</div>
+	{/if}
+
+	<div class="flex gap-3 pt-4">
+		<Button
+			className="w-full !bg-purple-700 !border-purple-700 hover:!bg-purple-700/90 hover:!border-purple-700/90"
+			on:click={startChat}
+		>
+			<span class="font-sans font-semibold text-sm leading-normal text-center flex justify-center items-center gap-2">
+                Chat now <span class="text-purple-300"><Sparkles className="w-4 h-4 fill-purple-300" /></span>
+            </span>
+		</Button>
+	</div>
+</div>

src/lib/IONOS/components/ai-team/ai-team.type.ts

@@ -0,0 +1,10 @@
+	export interface IAgentAiTeam {
+		id: string;
+		name: string;
+		speciality: string;
+		description: string;
+		capabilities?: string[];
+		externalLink?: string;
+		showCrown?: boolean;
+        highlight?: boolean;
+	}

src/lib/IONOS/components/icons/Crown.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	export let className = 'size-5';
+</script>
+
+<!--
+	Source: Figma
+	Copyright: unknown
+	Origin: Figma
+-->
+
+<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class={className}>
+<path d="M19.4444 6.66672C19.4444 5.74617 18.6983 5.00005 17.7778 5.00005C16.8572 5.00005 16.1111 5.74617 16.1111 6.66672C16.1111 6.89672 16.1578 7.11617 16.2422 7.31561L13.5 8.59505C13.3833 8.6495 13.2467 8.61672 13.1672 8.51561L11.0061 5.76505C11.405 5.46061 11.6667 4.98505 11.6667 4.4445C11.6667 3.52394 10.9206 2.77783 10 2.77783C9.07945 2.77783 8.33334 3.52394 8.33334 4.4445C8.33334 4.98505 8.595 5.46061 8.99389 5.76505L6.835 8.51339C6.75389 8.61561 6.615 8.64894 6.49722 8.59394L3.75834 7.31561C3.84278 7.11617 3.88945 6.89672 3.88945 6.66672C3.88945 5.74617 3.14334 5.00005 2.22278 5.00005C1.30222 5.00005 0.555557 5.74617 0.555557 6.66672C0.555557 7.52672 1.20889 8.22617 2.045 8.31561L3.62222 15.2662C3.88222 16.4123 4.88445 17.2139 6.06111 17.2151L13.9456 17.2212H13.9472C15.1228 17.2212 16.1244 16.4206 16.3839 15.2739L17.955 8.31561C18.7911 8.22561 19.4444 7.52672 19.4444 6.66672ZM14.7578 14.9067C14.6717 15.2884 14.3383 15.5551 13.9472 15.5551L6.06222 15.5489C5.66945 15.5489 5.33445 15.2812 5.24778 14.8978L3.96667 9.25283L5.79222 10.1045C6.61667 10.4884 7.58334 10.2578 8.14556 9.54339L10 7.18228L11.8567 9.54505C12.4172 10.2589 13.3822 10.4884 14.205 10.1056L16.035 9.25117L14.7578 14.9062V14.9067Z" fill="#E480F8"/>
+</svg>