responsive

src/lib/components/chat/User.svelte

@@ -19,6 +19,9 @@
 	import Spinner from '$lib/components/loading/Spinner.svelte';
 	import Message from './Message.svelte';
 	import SettingsModel from '$lib/components/model/SettingsModel.svelte';
+	import { MAX_MODELS_PER_NODE, MAX_SUGGESTIONS } from '$lib';
+	import { SUGGESTIONS_PROMPT } from '$lib/consts';
+	import { breakpointsState } from '$lib/state/breakpoints.svelte';
 
 	let { id }: NodeProps = $props();
 
@@ -31,18 +34,23 @@
 	let selectedModels = $derived<ChatModel[]>(
 		(nodeData.current?.data.selectedModels as ChatModel[]) ?? []
 	);
+	let isFirstNode = $derived((nodeData.current?.data.isFirstNode as boolean) ?? false);
 	let prompt = $state.raw<string>((nodeData.current?.data.prompt as string) ?? '');
 	let loading = $state.raw<boolean>(false);
 	let messages = $state.raw<ChatMessage[]>(
 		(nodeData.current?.data?.messages as ChatMessage[]) ?? []
 	);
+	let randomSuggestions = SUGGESTIONS_PROMPT.sort(() => Math.random() - 0.5).slice(
+		0,
+		MAX_SUGGESTIONS
+	);
 
 	function addModel(model: ChatModel) {
 		if (!selectedModels.some((m) => m.id === model.id)) {
 			updateNodeData(
 				id,
 				{
-					...nodeData.current,
+					...nodeData.current?.data,
 					selectedModels: [...selectedModels, model]
 				},
 				{ replace: true }
@@ -56,7 +64,7 @@
 		updateNodeData(
 			id,
 			{
-				...nodeData.current,
+				...nodeData.current?.data,
 				selectedModels: selectedModels.filter((m) => m.id !== model.id)
 			},
 			{ replace: true }
@@ -95,12 +103,6 @@
 		});
 		updateNodes((currentNodes) => [...currentNodes, ...newNodes]);
 		updateEdges((currentEdges) => [...currentEdges, ...newEdges]);
-		fitView({
-			maxZoom: 1,
-			minZoom: 1,
-			interpolate: 'smooth',
-			duration: 500
-		});
 		handleTriggerAiCall(newNodes);
 	}
 
@@ -114,8 +116,8 @@
 					method: 'POST',
 					body: JSON.stringify({
 						model: model.id,
-						prompt,
 						provider: model.provider,
+						messages,
 						options: {
 							temperature: model.temperature,
 							max_tokens: model.max_tokens,
@@ -182,7 +184,9 @@
 	);
 </script>
 
-<article class="w-[600px] rounded-3xl border border-border bg-background p-5 shadow-lg/5">
+<article
+	class="w-full min-w-sm rounded-3xl border border-border bg-background p-5 shadow-lg/5 lg:w-[600px]"
+>
 	<div class="nodrag cursor-auto">
 		<header class="mb-3 flex items-center justify-between">
 			<div class="flex flex-wrap items-center gap-1">
@@ -221,7 +225,7 @@
 						</Button>
 					</SettingsModel>
 				{/each}
-				{#if selectedModels.length < 3 && !loading}
+				{#if selectedModels.length < MAX_MODELS_PER_NODE && !loading}
 					<ComboBoxModels onSelect={addModel} excludeIds={selectedModels.map((m) => m.id)} />
 				{/if}
 			</div>
@@ -247,19 +251,41 @@
 						}
 					}}
 				></textarea>
-				<Button
-					variant={mode.current === 'dark' ? 'default' : 'outline'}
-					size="icon-sm"
-					class=""
-					disabled={!selectedModels.length || !prompt || loading}
-					onclick={() => handleTriggerAction()}
-				>
-					{#if loading}
-						<Spinner className="size-5" />
+				<div class="flex w-full items-center justify-between gap-1">
+					{#if isFirstNode && !loading && !lastMessage}
+						<div class="items flex w-full gap-1">
+							{#each randomSuggestions as suggestion}
+								<Button
+									variant="outline"
+									size="2xs"
+									class="rounded-full! shadow-none!"
+									disabled={!selectedModels.length}
+									onclick={() => {
+										prompt = suggestion;
+										handleTriggerAction();
+									}}
+								>
+									{suggestion}
+								</Button>
+							{/each}
+						</div>
 					{:else}
-						<Send />
+						<div></div>
 					{/if}
-				</Button>
+					<Button
+						variant={mode.current === 'dark' ? 'default' : 'outline'}
+						size="icon-sm"
+						class=""
+						disabled={!selectedModels.length || !prompt || loading}
+						onclick={() => handleTriggerAction()}
+					>
+						{#if loading}
+							<Spinner className="size-5" />
+						{:else}
+							<Send />
+						{/if}
+					</Button>
+				</div>
 			</footer>
 		{/if}
 	</div>

src/lib/components/flow/FitViewOnResize.svelte

@@ -3,14 +3,15 @@
 	import type { Node, Edge } from '@xyflow/svelte';
 	import { useNodes, useEdges } from '@xyflow/svelte';
 	import { useSvelteFlow } from '@xyflow/svelte';
+	import { breakpointsState } from '$lib/state/breakpoints.svelte';
 
 	let { initialNodes }: { initialNodes: Node[] } = $props();
 
 	// Fallback dimensions (used before nodes are measured by xyflow)
-	const DEFAULT_WIDTH = 600;
+	const DEFAULT_WIDTH = breakpointsState.isMobile ? 300 : 600;
 	const DEFAULT_HEIGHT = 200;
-	const H_SPACING = 40;
-	const V_SPACING = 40;
+	const H_SPACING = 60;
+	const V_SPACING = 60;
 
 	const { fitView } = useSvelteFlow();
 	const nodesStore = useNodes();
@@ -68,7 +69,7 @@
 	function handleWindowResize() {
 		fitView({
 			maxZoom: 1,
-			minZoom: 0.8,
+			minZoom: breakpointsState.isMobile ? 1 : 0.8,
 			interpolate: 'smooth',
 			duration: 500
 		});
@@ -198,7 +199,7 @@
 
 		fitView({
 			maxZoom: 1,
-			minZoom: 0.8,
+			minZoom: breakpointsState.isMobile ? 1 : 0.8,
 			interpolate: 'smooth',
 			duration: 250
 		});

src/lib/components/flow/actions/PanelRightActions.svelte

@@ -7,7 +7,10 @@
 	import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index.js';
 	import { tokenModalState } from '$lib/state/token-modal.svelte';
 
+	let { canReset }: { canReset: boolean } = $props();
+
 	function handleReset() {
+		if (!canReset) return;
 		const ok = confirm('Are you sure you want to reset the flow?');
 		if (ok) {
 			location.reload();
@@ -15,9 +18,10 @@
 	}
 </script>
 
-<Panel position="top-right" class="flex items-center justify-end gap-2 p-3">
-	<Button variant="outline" size="icon" class="" onclick={handleReset}>
+<Panel position="top-right" class="flex items-center justify-end gap-2 p-1 lg:p-3">
+	<Button variant="outline" class="" onclick={handleReset}>
 		<RefreshCcw />
+		Start new chat
 	</Button>
 	<DropdownMenu.Root>
 		<DropdownMenu.Trigger>
@@ -29,10 +33,10 @@
 		</DropdownMenu.Trigger>
 		<DropdownMenu.Content class="w-56" align="start">
 			<DropdownMenu.Group>
-			<DropdownMenu.Item onclick={() => (tokenModalState.open = true)}>
-				Token Management
-				<DropdownMenu.Shortcut>⇧⌘T</DropdownMenu.Shortcut>
-			</DropdownMenu.Item>
+				<DropdownMenu.Item onclick={() => (tokenModalState.open = true)}>
+					Token Management
+					<DropdownMenu.Shortcut>⇧⌘T</DropdownMenu.Shortcut>
+				</DropdownMenu.Item>
 			</DropdownMenu.Group>
 			<DropdownMenu.Separator />
 			<DropdownMenu.Group>
@@ -42,11 +46,11 @@
 						Appearance
 					</DropdownMenu.SubTrigger>
 					<DropdownMenu.SubContent>
-					<DropdownMenu.Item onclick={() => setMode('light')}><Sun />Light</DropdownMenu.Item>
-					<DropdownMenu.Item onclick={() => setMode('dark')}><Moon />Dark</DropdownMenu.Item>
-					<DropdownMenu.Item onclick={() => setMode('system')}
-						><Monitor />System</DropdownMenu.Item
-					>
+						<DropdownMenu.Item onclick={() => setMode('light')}><Sun />Light</DropdownMenu.Item>
+						<DropdownMenu.Item onclick={() => setMode('dark')}><Moon />Dark</DropdownMenu.Item>
+						<DropdownMenu.Item onclick={() => setMode('system')}
+							><Monitor />System</DropdownMenu.Item
+						>
 					</DropdownMenu.SubContent>
 				</DropdownMenu.Sub>
 			</DropdownMenu.Group>

src/lib/components/model/ComboBoxModels.svelte

@@ -5,6 +5,7 @@
 	import { Button } from '$lib/components/ui/button/';
 	import { modelsState } from '$lib/state/models.svelte';
 	import type { ChatModel } from '$lib/helpers/types';
+	import { MAX_TRENDING_MODELS } from '$lib';
 
 	interface Props {
 		onSelect?: (model: ChatModel) => void;
@@ -23,8 +24,6 @@
 		})
 	);
 
-	const MAX_TRENDING_MODELS = 6;
-
 	let trendingModels = $derived(filteredModels.slice(0, MAX_TRENDING_MODELS));
 	let otherModels = $derived(filteredModels.slice(MAX_TRENDING_MODELS));
 </script>

src/lib/consts.ts

@@ -0,0 +1,32 @@
+export const SUGGESTIONS_PROMPT = [
+	'Roast my code skills',
+	'Why do LLMs hallucinate?',
+	'Explain AI like I\'m 5',
+	'Is a hotdog a sandwich?',
+	'Pineapple on pizza: yes or no?',
+	'Write me a bad poem',
+	'Why is CSS so painful?',
+	'Tell me a dad joke',
+	'Best excuse to skip work?',
+	'Are robots coming for us?',
+	'Why do cats judge us?',
+	'Convince me earth is flat',
+	'Invent a new pasta shape',
+	'What would dogs google?',
+	'Why is Monday the worst?',
+	'Rate my mass: 70kg',
+	'Pick my lunch for me',
+	'Write a haiku about bugs',
+	'Am I in a simulation?',
+	'Explain blockchain to my grandma',
+	'Why do devs love coffee?',
+	'Sell me this pen',
+	'Make up a conspiracy theory',
+	'Worst date idea ever?',
+	'Name a fake startup',
+	'Describe WiFi to a pirate',
+	'Why do we yawn?',
+	'Invent a useless invention',
+	'Teach me a fun fact',
+	'What came first: egg or chicken?'
+];

src/lib/helpers/utils.ts

@@ -1,6 +0,0 @@
-import { type ClassValue, clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-
-export function cn(...inputs: ClassValue[]) {
-	return twMerge(clsx(inputs));
-}

src/lib/index.ts

@@ -1 +1,4 @@
-// place files you want to import through the `$lib` alias in this folder.
+export const MAX_MODELS_PER_NODE = 5;
+export const MAX_TRENDING_MODELS = 6;
+export const MAX_SUGGESTIONS = 2;
+export const MAX_DEFAULT_MODELS = 1;

src/lib/state/breakpoints.svelte.ts

@@ -0,0 +1,3 @@
+export const breakpointsState = $state({
+	isMobile: false
+});

src/routes/+error.svelte

@@ -0,0 +1,6 @@
+<script lang="ts">
+	import { page } from '$app/state';
+</script>
+
+<h1>{page.status} {page.error.message}</h1>
+<span style="font-size: 10em"> 🙅 </span>

src/routes/+layout.svelte

@@ -7,6 +7,7 @@
 	import { fetchModels, modelsState } from '$lib/state/models.svelte';
 	import MainLoading from '$lib/components/loading/MainLoading.svelte';
 	import TokenManagementModal from '$lib/components/token/TokenManagementModal.svelte';
+	import { breakpointsState } from '$lib/state/breakpoints.svelte';
 
 	interface Props {
 		children?: import('svelte').Snippet;
@@ -14,8 +15,15 @@
 
 	onMount(() => {
 		fetchModels();
+		handleBreakoints();
+		window.addEventListener('resize', handleBreakoints);
+		return () => window.removeEventListener('resize', handleBreakoints);
 	});
 
+	function handleBreakoints() {
+		breakpointsState.isMobile = window.innerWidth < 768;
+	}
+
 	let { children }: Props = $props();
 </script>
 

src/routes/+page.svelte

@@ -6,11 +6,10 @@
 		Panel,
 		BackgroundVariant,
 		type Node,
-		type Edge,
-		type ColorMode
+		type Edge
 	} from '@xyflow/svelte';
 	import '@xyflow/svelte/dist/style.css';
-	import { theme, mode } from 'mode-watcher';
+	import { mode } from 'mode-watcher';
 
 	import { modelsState } from '$lib/state/models.svelte';
 	import { tokenModalState } from '$lib/state/token-modal.svelte';
@@ -20,6 +19,8 @@
 	import type { ChatModel } from '$lib/helpers/types';
 	import FitViewOnResize from '$lib/components/flow/FitViewOnResize.svelte';
 	import PanelRightActions from '$lib/components/flow/actions/PanelRightActions.svelte';
+	import { MAX_DEFAULT_MODELS } from '$lib';
+	import { breakpointsState } from '$lib/state/breakpoints.svelte';
 
 	const nodeTypes = {
 		user: User,
@@ -33,7 +34,8 @@
 				type: 'user',
 				position: { x: 0, y: 0 },
 				data: {
-					selectedModels: modelsState.models.slice(0, 2) as ChatModel[]
+					isFirstNode: true,
+					selectedModels: modelsState.models.slice(0, MAX_DEFAULT_MODELS) as ChatModel[]
 				}
 			}
 		];
@@ -65,11 +67,11 @@
 		proOptions={{ hideAttribution: true }}
 		fitViewOptions={{
 			maxZoom: 1,
-			minZoom: 0.8,
+			minZoom: breakpointsState.isMobile ? 1 : 0.8,
 			interpolate: 'smooth',
 			duration: 500
 		}}
-		defaultEdgeOptions={{ type: 'bezier' }}
+		defaultEdgeOptions={{ type: 'smoothstep' }}
 		class="bg-background!"
 	>
 		<FitViewOnResize {initialNodes} />
@@ -84,7 +86,7 @@
 			patternColor={mode.current === 'dark' ? 'rgba(255, 255, 255, 0.04)' : 'rgba(0, 0, 0, 0.04)'}
 			class="bg-background!"
 		/>
-		<PanelRightActions />
+		<PanelRightActions canReset={nodes.length > 1} />
 		<Panel
 			position="bottom-left"
 			class="flex items-center justify-center gap-1.5 rounded-lg border border-border bg-background py-1.5 pr-3.5 pl-2.5 shadow-xs"

src/routes/api/+server.ts

@@ -4,9 +4,9 @@ import { InferenceClient } from '@huggingface/inference';
 import { env } from '$env/dynamic/private';
 
 export async function POST({ request }: RequestEvent) {
-	const { model, prompt, messages, options, provider = 'auto' } = await request.json();
+	const { model, messages, options, provider = 'auto' } = await request.json();
 
-	if (!model || !prompt) {
+	if (!model) {
 		return json({ error: 'Model and prompt are required' }, { status: 400 });
 	}
 
@@ -22,8 +22,7 @@ export async function POST({ request }: RequestEvent) {
 					content:
 						"You are a helpful assistant. You are very helpful and friendly. Use markdown to format your responses, but don't include array start and end markers."
 				},
-				...(messages ?? []),
-				{ role: 'user', content: prompt }
+				...(messages ?? [])
 			]
 		},
 		{