Migarate from Flowbite avatar into Shadcn avatar

apps/frontend/package.json

@@ -22,6 +22,7 @@
 		"@eslint/compat": "^1.2.5",
 		"@eslint/js": "^9.18.0",
 		"@inlang/paraglide-js": "^2.2.0",
+		"@internationalized/date": "^3.10.0",
 		"@langchain/core": "^0.3.78",
 		"@langchain/langgraph-sdk": "^0.1.9",
 		"@lucide/svelte": "^0.554.0",
@@ -35,6 +36,7 @@
 		"@testing-library/jest-dom": "^6.6.3",
 		"@testing-library/svelte": "^5.2.4",
 		"@vitest/coverage-v8": "^3.2.4",
+		"bits-ui": "^2.14.4",
 		"clsx": "^2.1.1",
 		"eslint": "^9.18.0",
 		"eslint-config-prettier": "^10.0.1",

apps/frontend/src/lib/components/AIMessageActions.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
-	import { Button, Tooltip, Clipboard } from 'flowbite-svelte';
+	import { Button, Clipboard } from 'flowbite-svelte';
 	import { ArrowsRepeatOutline, CheckOutline, ClipboardCleanSolid } from 'flowbite-svelte-icons';
 	import type { BaseMessage } from '$lib/langgraph/types';
 	import * as m from '$lib/paraglide/messages.js';
+	import { Tooltip, TooltipTrigger, TooltipContent } from '$lib/components/ui/tooltip/index.js';
 	import FeedbackButtons from './FeedbackButtons.svelte';
 
 	interface Props {
@@ -13,28 +14,48 @@
 	}
 
 	let { message, isHovered, onRegenerate, onFeedback }: Props = $props();
+	let copyOpen = $state(false);
 </script>
 
 <div
 	class="absolute bottom-2 left-0 flex items-center gap-1 transition-all duration-300 ease-in-out"
 	style="opacity: {isHovered ? '1' : '0'}; transform: translateY({isHovered ? '0' : '-4px'});"
 >
-	<Clipboard value={message.text} embedded color="alternative" class="p-1.5!">
-		{#snippet children(success)}
-			<Tooltip isOpen={success}>{success ? m.message_copied() : m.message_copy()}</Tooltip>
-			{#if success}<CheckOutline size="xs" />{:else}<ClipboardCleanSolid size="xs" />{/if}
-		{/snippet}
-	</Clipboard>
+	<Tooltip open={copyOpen}>
+		<TooltipTrigger>
+			<Clipboard
+				value={message.text}
+				embedded
+				color="alternative"
+				class="p-1.5!"
+				onchange={(e) =>
+					(copyOpen = (e.target as HTMLButtonElement).getAttribute('aria-pressed') === 'true')}
+			>
+				{#snippet children(success)}
+					{#if success}<CheckOutline size="xs" />{:else}<ClipboardCleanSolid size="xs" />{/if}
+				{/snippet}
+			</Clipboard>
+		</TooltipTrigger>
+		<TooltipContent>
+			{copyOpen ? m.message_copied() : m.message_copy()}
+		</TooltipContent>
+	</Tooltip>
 
-	<Button
-		onclick={() => onRegenerate?.(message)}
-		class="p-1.5!"
-		color="alternative"
-		size="xs"
-		title={m.message_regenerate()}
-	>
-		<ArrowsRepeatOutline size="xs" />
-	</Button>
-	<Tooltip type="auto">{m.coming_soon()}</Tooltip>
+	<Tooltip>
+		<TooltipTrigger>
+			<Button
+				onclick={() => onRegenerate?.(message)}
+				class="p-1.5!"
+				color="alternative"
+				size="xs"
+				title={m.message_regenerate()}
+			>
+				<ArrowsRepeatOutline size="xs" />
+			</Button>
+		</TooltipTrigger>
+		<TooltipContent>
+			{m.coming_soon()}
+		</TooltipContent>
+	</Tooltip>
 	<FeedbackButtons {message} {onFeedback} />
 </div>

apps/frontend/src/lib/components/FeedbackButtons.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
-	import { Button, Tooltip } from 'flowbite-svelte';
+	import { Button } from 'flowbite-svelte';
 	import { ThumbsUpOutline, ThumbsDownOutline } from 'flowbite-svelte-icons';
 	import type { BaseMessage } from '$lib/langgraph/types';
 	import * as m from '$lib/paraglide/messages.js';
+	import { Tooltip, TooltipTrigger, TooltipContent } from '$lib/components/ui/tooltip/index.js';
 
 	interface Props {
 		message: BaseMessage;
@@ -20,24 +21,32 @@
 </script>
 
 <div class="ml-2 flex gap-1 border-l border-gray-300 pl-2 dark:border-gray-600">
-	<Button
-		onclick={() => handleFeedback('up')}
-		class="p-1.5! {feedbackGiven === 'up' ? 'bg-gray-200 dark:bg-gray-700' : ''}"
-		color="alternative"
-		size="xs"
-		title={m.message_feedback_good()}
-	>
-		<ThumbsUpOutline size="xs" />
-	</Button>
-	<Tooltip type="auto">Coming Soon !</Tooltip>
-	<Button
-		onclick={() => handleFeedback('down')}
-		class="p-1.5! {feedbackGiven === 'down' ? 'bg-gray-200 dark:bg-gray-700' : ''}"
-		color="alternative"
-		size="xs"
-		title={m.message_feedback_bad()}
-	>
-		<ThumbsDownOutline size="xs" />
-	</Button>
-	<Tooltip type="auto">Coming Soon !</Tooltip>
+	<Tooltip>
+		<TooltipTrigger>
+			<Button
+				onclick={() => handleFeedback('up')}
+				class="p-1.5! {feedbackGiven === 'up' ? 'bg-gray-200 dark:bg-gray-700' : ''}"
+				color="alternative"
+				size="xs"
+				title={m.message_feedback_good()}
+			>
+				<ThumbsUpOutline size="xs" />
+			</Button>
+		</TooltipTrigger>
+		<TooltipContent>Coming Soon !</TooltipContent>
+	</Tooltip>
+	<Tooltip>
+		<TooltipTrigger>
+			<Button
+				onclick={() => handleFeedback('down')}
+				class="p-1.5! {feedbackGiven === 'down' ? 'bg-gray-200 dark:bg-gray-700' : ''}"
+				color="alternative"
+				size="xs"
+				title={m.message_feedback_bad()}
+			>
+				<ThumbsDownOutline size="xs" />
+			</Button>
+		</TooltipTrigger>
+		<TooltipContent>Coming Soon !</TooltipContent>
+	</Tooltip>
 </div>

apps/frontend/src/lib/components/UserMessageActions.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
-	import { Button, Tooltip } from 'flowbite-svelte';
+	import { Button } from 'flowbite-svelte';
 	import { PenOutline } from 'flowbite-svelte-icons';
 	import type { BaseMessage } from '$lib/langgraph/types';
 	import * as m from '$lib/paraglide/messages.js';
+	import { Tooltip, TooltipTrigger, TooltipContent } from '$lib/components/ui/tooltip/index.js';
 
 	interface Props {
 		message: BaseMessage;
@@ -17,14 +18,20 @@
 	class="absolute right-0 bottom-2 flex items-center gap-2 transition-all duration-300 ease-in-out"
 	style="opacity: {isHovered ? '1' : '0'}; transform: translateY({isHovered ? '0' : '-4px'});"
 >
-	<Button
-		onclick={() => onEdit?.(message)}
-		class="p-1.5!"
-		color="alternative"
-		size="xs"
-		title={m.message_edit()}
-	>
-		<PenOutline size="xs" />
-	</Button>
-	<Tooltip type="auto">{m.coming_soon()}</Tooltip>
+	<Tooltip>
+		<TooltipTrigger>
+			<Button
+				onclick={() => onEdit?.(message)}
+				class="p-1.5!"
+				color="alternative"
+				size="xs"
+				title={m.message_edit()}
+			>
+				<PenOutline size="xs" />
+			</Button>
+		</TooltipTrigger>
+		<TooltipContent>
+			{m.coming_soon()}
+		</TooltipContent>
+	</Tooltip>
 </div>

apps/frontend/src/lib/components/ui/avatar/avatar-fallback.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Avatar as AvatarPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AvatarPrimitive.FallbackProps = $props();
+</script>
+
+<AvatarPrimitive.Fallback
+	bind:ref
+	data-slot="avatar-fallback"
+	class={cn('bg-muted flex size-full items-center justify-center rounded-full', className)}
+	{...restProps}
+/>

apps/frontend/src/lib/components/ui/avatar/avatar-image.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Avatar as AvatarPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AvatarPrimitive.ImageProps = $props();
+</script>
+
+<AvatarPrimitive.Image
+	bind:ref
+	data-slot="avatar-image"
+	class={cn('aspect-square h-full w-full', className)}
+	{...restProps}
+/>

apps/frontend/src/lib/components/ui/avatar/avatar.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Avatar as AvatarPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		loadingStatus = $bindable('loading'),
+		class: className,
+		...restProps
+	}: AvatarPrimitive.RootProps = $props();
+</script>
+
+<AvatarPrimitive.Root
+	bind:ref
+	bind:loadingStatus
+	data-slot="avatar"
+	class={cn('relative flex size-8 shrink-0 overflow-hidden rounded-full', className)}
+	{...restProps}
+/>

apps/frontend/src/lib/components/ui/avatar/index.ts

@@ -0,0 +1,13 @@
+import Root from './avatar.svelte';
+import Image from './avatar-image.svelte';
+import Fallback from './avatar-fallback.svelte';
+
+export {
+	Root,
+	Image,
+	Fallback,
+	//
+	Root as Avatar,
+	Image as AvatarImage,
+	Fallback as AvatarFallback
+};

apps/frontend/src/lib/components/ui/tooltip/index.ts

@@ -0,0 +1,19 @@
+import Root from './tooltip.svelte';
+import Trigger from './tooltip-trigger.svelte';
+import Content from './tooltip-content.svelte';
+import Provider from './tooltip-provider.svelte';
+import Portal from './tooltip-portal.svelte';
+
+export {
+	Root,
+	Trigger,
+	Content,
+	Provider,
+	Portal,
+	//
+	Root as Tooltip,
+	Content as TooltipContent,
+	Trigger as TooltipTrigger,
+	Provider as TooltipProvider,
+	Portal as TooltipPortal
+};

apps/frontend/src/lib/components/ui/tooltip/tooltip-content.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+	import { Tooltip as TooltipPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+	import TooltipPortal from './tooltip-portal.svelte';
+	import type { ComponentProps } from 'svelte';
+	import type { WithoutChildrenOrChild } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		sideOffset = 0,
+		side = 'top',
+		children,
+		arrowClasses,
+		portalProps,
+		...restProps
+	}: TooltipPrimitive.ContentProps & {
+		arrowClasses?: string;
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof TooltipPortal>>;
+	} = $props();
+</script>
+
+<TooltipPortal {...portalProps}>
+	<TooltipPrimitive.Content
+		bind:ref
+		data-slot="tooltip-content"
+		{sideOffset}
+		{side}
+		class={cn(
+			'bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--bits-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance',
+			className
+		)}
+		{...restProps}
+	>
+		{@render children?.()}
+		<TooltipPrimitive.Arrow>
+			{#snippet child({ props })}
+				<div
+					class={cn(
+						'bg-primary z-50 size-2.5 rotate-45 rounded-[2px]',
+						'data-[side=top]:translate-x-1/2 data-[side=top]:translate-y-[calc(-50%_+_2px)]',
+						'data-[side=bottom]:-translate-x-1/2 data-[side=bottom]:-translate-y-[calc(-50%_+_1px)]',
+						'data-[side=right]:translate-x-[calc(50%_+_2px)] data-[side=right]:translate-y-1/2',
+						'data-[side=left]:-translate-y-[calc(50%_-_3px)]',
+						arrowClasses
+					)}
+					{...props}
+				></div>
+			{/snippet}
+		</TooltipPrimitive.Arrow>
+	</TooltipPrimitive.Content>
+</TooltipPortal>

apps/frontend/src/lib/components/ui/tooltip/tooltip-portal.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Tooltip as TooltipPrimitive } from 'bits-ui';
+
+	let { ...restProps }: TooltipPrimitive.PortalProps = $props();
+</script>
+
+<TooltipPrimitive.Portal {...restProps} />

apps/frontend/src/lib/components/ui/tooltip/tooltip-provider.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Tooltip as TooltipPrimitive } from 'bits-ui';
+
+	let { ...restProps }: TooltipPrimitive.ProviderProps = $props();
+</script>
+
+<TooltipPrimitive.Provider {...restProps} />

apps/frontend/src/lib/components/ui/tooltip/tooltip-trigger.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Tooltip as TooltipPrimitive } from 'bits-ui';
+
+	let { ref = $bindable(null), ...restProps }: TooltipPrimitive.TriggerProps = $props();
+</script>
+
+<TooltipPrimitive.Trigger bind:ref data-slot="tooltip-trigger" {...restProps} />

apps/frontend/src/lib/components/ui/tooltip/tooltip.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Tooltip as TooltipPrimitive } from 'bits-ui';
+
+	let { open = $bindable(false), ...restProps }: TooltipPrimitive.RootProps = $props();
+</script>
+
+<TooltipPrimitive.Root bind:open {...restProps} />