wip dark mode

src/lib/components/chat/Assistant.svelte

@@ -15,10 +15,10 @@
 
   let selectedModels = $derived(nodeData.current?.data.selectedModels as ChatModel[] ?? []);
   let loading = $derived(nodeData.current?.data.loading as boolean ?? false);
-  let message = $derived(nodeData.current?.data.content ? { role: 'assistant', content: nodeData.current?.data.content } as ChatMessage : null);
+  let message = $derived(nodeData.current?.data.content ? { role: 'assistant', content: nodeData.current?.data.content, timestamp: nodeData.current?.data.timestamp as number ?? 0 } as ChatMessage : null);
 </script>
  
-<article class="bg-white border border-gray-200 shadow-lg/5 p-5 w-[600px] rounded-3xl">
+<article class="bg-background border border-border shadow-lg/5 p-5 w-[600px] rounded-3xl">
   <div class="nodrag">
     <header class="flex items-center justify-between mb-3">
       <div class="flex items-center gap-1 flex-wrap">

src/lib/components/chat/Message.svelte

@@ -34,10 +34,11 @@
     </p>
   {:else}
     <SvelteMarkdown source={message.content} renderers={renderers as any} />
+    {#if message.timestamp}
+      <p class="text-xs text-muted-foreground/70">
+        - Generated in
+        {message.timestamp / 1000}s
+      </p>
+    {/if}
   {/if}
-</main>
-  <!-- {#if message.timestamp}
-    <p class="text-[10px] text-muted-foreground bg-muted px-2 py-1 rounded-md font-mono">
-      {message.timestamp / 1000}s
-    </p>
-  {/if} -->
+</main>

src/lib/components/chat/User.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { Send, X } from '@lucide/svelte';
   import { Handle, useEdges, useNodes, useNodesData, Position, type NodeProps, type Edge , type Node, useSvelteFlow} from '@xyflow/svelte';
+  import { mode } from 'mode-watcher';
 
 	import type { ChatModel, ChatMessage } from '$lib/helpers/types';
   import { Button } from '$lib/components/ui/button';
@@ -25,19 +26,22 @@
   function addModel(model: ChatModel) {
     if (!selectedModels.some((m) => m.id === model.id)) {
       selectedModels = [...selectedModels, model];
+      if (lastMessage) {
+        handleTriggerAction([model]);
+      }
     }
   }
   function removeModel(model: ChatModel) {
     selectedModels = selectedModels.filter((m) => m.id !== model.id);
   }
   
-  function handleTriggerAction() {
+  function handleTriggerAction(models: ChatModel[] = selectedModels) {
     const newNodes: Node[] = [];
     const newEdges: Edge[] = [];
     messages = [...messages, { role: 'user', content: prompt }];
     updateNodeData(id, { messages }, { replace: true });
 
-    selectedModels.forEach((m) => {
+    models.forEach((m) => {
       const newNodeId = `assistant-${crypto.randomUUID()}`;
       const newNode: Node = {
         id: newNodeId,
@@ -73,11 +77,11 @@
   }
 
   async function handleTriggerAiCall(newNodes: Node[]) {
-    const start = Date.now();
     newNodes.forEach(async (node) => {
       const model = (node?.data?.selectedModels as ChatModel[])?.length > 0 ? (node?.data?.selectedModels as ChatModel[])[0] : null;
       if (!model) return;
       try {
+        const start = Date.now();
         const response = await fetch('/api', {
           method: 'POST',
           body: JSON.stringify({
@@ -117,6 +121,8 @@
             }
             updateNodes((currentNodes) => [...currentNodes, newNode]);
             updateEdges((currentEdges) => [...currentEdges, newEdge]);
+            const end = Date.now();
+            updateNodeData(node.id, { ...node.data, content, timestamp: end - start, loading: false }, { replace: true });
             break;
           }
 
@@ -134,7 +140,7 @@
   let lastMessage = $derived(messages?.length > 0 && messages[messages.length - 1].role === 'user' ? messages[messages.length - 1] : null);
 </script>
  
-<article class="bg-white border border-gray-200 shadow-lg/5 p-5 w-[600px] rounded-3xl">
+<article class="bg-background border border-border shadow-lg/5 p-5 w-[600px] rounded-3xl">
   <div class="nodrag">
     <header class="flex items-center justify-between mb-3">
       <div class="flex items-center gap-1 flex-wrap">
@@ -149,7 +155,7 @@
             {/if}
           </Button>
         {/each}
-        {#if selectedModels.length < 3 && !loading && !lastMessage}
+        {#if selectedModels.length < 3 && !loading}
           <ComboBoxModels
             onSelect={addModel}
             excludeIds={selectedModels.map((m) => m.id)}
@@ -178,7 +184,7 @@
             }
           }}
         ></textarea>
-        <Button variant="outline" size="icon-sm" class="" disabled={!selectedModels.length || !prompt || loading} onclick={handleTriggerAction}>
+        <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}

src/lib/components/chat/markdown/Heading.svelte

@@ -4,11 +4,11 @@
 </script>
 
 {#if depth === 1}
-  <h1 class="text-xl font-semibold text-foreground mt-4 mb-2 first:mt-0">{@render children?.()}</h1>
+  <h1 class="text-2xl font-semibold text-foreground mt-4 mb-2 first:mt-0">{@render children?.()}</h1>
 {:else if depth === 2}
-  <h2 class="text-lg font-semibold text-foreground mt-3.5 mb-2 first:mt-0">{@render children?.()}</h2>
+  <h2 class="text-xl font-semibold text-foreground mt-3.5 mb-2 first:mt-0">{@render children?.()}</h2>
 {:else if depth === 3}
-  <h3 class="text-base font-semibold text-foreground mt-3 mb-1.5 first:mt-0">{@render children?.()}</h3>
+  <h3 class="text-lg font-semibold text-foreground mt-3 mb-1.5 first:mt-0">{@render children?.()}</h3>
 {:else}
-  <h4 class="text-sm font-semibold text-foreground mt-2.5 mb-1 first:mt-0">{@render children?.()}</h4>
+  <h4 class="text-base font-semibold text-foreground mt-2.5 mb-1 first:mt-0">{@render children?.()}</h4>
 {/if}

src/lib/components/chat/markdown/List.svelte

@@ -4,11 +4,11 @@
 </script>
 
 {#if ordered}
-  <ol class="list-decimal list-outside pl-5 my-2 space-y-1 text-sm text-foreground/90 marker:text-muted-foreground" {start}>
+  <ol class="list-decimal list-outside pl-5 my-2 space-y-1 text-base text-foreground/90 marker:text-muted-foreground" {start}>
     {@render children?.()}
   </ol>
 {:else}
-  <ul class="list-disc list-outside pl-5 my-2 space-y-1 text-sm text-foreground/90 marker:text-muted-foreground">
+  <ul class="list-disc list-outside pl-5 my-2 space-y-1 text-base text-foreground/90 marker:text-muted-foreground">
     {@render children?.()}
   </ul>
 {/if}

src/lib/components/chat/markdown/Paragraph.svelte

@@ -3,4 +3,4 @@
   let { children }: { children?: Snippet } = $props();
 </script>
 
-<p class="text-sm leading-relaxed text-foreground/90 mb-3 last:mb-0">{@render children?.()}</p>
+<p class="text-base leading-relaxed text-foreground/90 mb-3 last:mb-0">{@render children?.()}</p>

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

@@ -1,6 +1,7 @@
 <script lang="ts">
-  import { Plus, Contrast } from '@lucide/svelte';
+  import { Cog, Contrast, RefreshCcw } from '@lucide/svelte';
 	import { Panel } from '@xyflow/svelte';
+	import { toggleMode } from 'mode-watcher';
 
   import { Button } from '$lib/components/ui/button';
 
@@ -10,13 +11,21 @@
   function handleReset() {
     const ok = confirm('Are you sure you want to reset the flow?');
     if (ok) {
-      onReset();
+      location.reload();
     }
   }
 </script>
 
 <Panel position="top-right" class="p-3 flex items-center justify-end gap-2">
   <Button variant="outline" size="icon" class="" onclick={handleReset}>
-    <Plus />
+    <RefreshCcw />
+  </Button>
+  <Button variant="outline" size="icon" class="" onclick={() => toggleMode()}>
+    <Contrast />
+  </Button>
+  <Button variant="outline" size="icon" class="" onclick={() => {
+    alert("Coming soon...")
+  }}>
+    <Cog />
   </Button>
 </Panel>

src/routes/+layout.svelte

@@ -34,7 +34,7 @@
 		{#if modelsState.loading}
 			<MainLoading />
 		{:else}
-			{@render children?.()}
+		{@render children?.()}
 		{/if}
 	</div>
 </svelte:boundary>

src/routes/+page.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
-  import { SvelteFlow, Background, MiniMap, Panel, BackgroundVariant, type Node, type Edge } from '@xyflow/svelte';
+  import { SvelteFlow, Background, MiniMap, Panel, BackgroundVariant, type Node, type Edge, type ColorMode } from '@xyflow/svelte';
   import '@xyflow/svelte/dist/style.css';
-  
+  import { theme, mode } from 'mode-watcher';
+
   import { modelsState } from '$lib/state/models.svelte';
 	import User from '$lib/components/chat/User.svelte';
 	import Assistant from '$lib/components/chat/Assistant.svelte';
@@ -39,6 +40,7 @@
     minZoom={0.8}
     maxZoom={1.5}
     fitView
+    colorMode={mode.current}
     proOptions={{ hideAttribution: true }}
     fitViewOptions={{
       maxZoom: 1,
@@ -46,12 +48,24 @@
       interpolate: "smooth",
       duration: 500,
     }}
-    defaultEdgeOptions={{ type: 'smoothstep', animated: true }}
-    class="bg-white!"
+    defaultEdgeOptions={{ type: "bezier" }}
+    class="bg-background!"
+    
   >
     <FitViewOnResize initialNodes={initialNodes} />
-    <MiniMap />
-    <Background variant={BackgroundVariant.Lines} gap={30} patternColor="rgba(0, 0, 0, 0.04)" />
+    <MiniMap
+      nodeColor={mode.current === 'dark' ? 'rgba(255, 255, 255, 0.07)' : 'rgba(0, 0, 0, 0.07)'}
+      maskColor={mode.current === 'dark' ? 'rgba(255, 255, 255, 0.07)' : 'rgba(0, 0, 0, 0.05)'}
+      class="rounded-xl! dark:bg-gray-950! overflow-hidden!"
+    />
+    <Background
+      variant={BackgroundVariant.Lines}
+      gap={30}
+      patternColor={
+        mode.current === 'dark' ? 'rgba(255, 255, 255, 0.04)' : 'rgba(0, 0, 0, 0.04)'
+      }
+      class="bg-background!"
+    />
     <PanelRightActions
       onReset={() => {
         nodes = getInitialNodes();

src/routes/api/+server.ts

@@ -15,7 +15,7 @@ export async function POST({ request }: RequestEvent) {
   const stream = client.chatCompletionStream({
     model: model,
     messages: [
-      { role: 'system', content: 'You are a helpful assistant. You are very helpful and friendly. Use markdown to format your responses.' },
+      { role: 'system', 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 }
     ],

src/routes/layout.css

@@ -119,3 +119,7 @@
 		@apply bg-background text-foreground;
 	}
 }
+
+.dark .svelte-flow__edge-path {
+	@apply stroke-gray-800;
+}