refactor + think bug corrected

src/lib/components/chat/ChatInput.svelte

@@ -127,9 +127,16 @@
 			value.trim() !== ""
 		) {
 			event.preventDefault();	
-            const textToSend = thinkingIsOn
-               ? `${value.trim()} /think`
-               : `${value.trim()} /no_think`;
+            let textToSend;
+			if (showThinking) {
+				if (thinkingIsOn) {
+					textToSend = `${value.trim()} /think`;
+				} else {
+					textToSend = `${value.trim()} /no_think`;
+				}
+				} else {
+				textToSend = `${value.trim()}`;
+			}
 	        dispatch("submit", { text: textToSend });
 		}
 	}
@@ -160,7 +167,6 @@
 	);
 
 	let showWebSearch = $derived(!assistant);
-	//let showWebSearch = $derived(false);
 	let showImageGen = $derived(modelHasTools && !assistant);
 	let showFileUpload = $derived((modelIsMultimodal || modelHasTools) && mimeTypes.length > 0);
 	let showExtraTools = $derived(modelHasTools && !assistant);

src/lib/components/chat/ChatMessage.svelte

@@ -200,10 +200,12 @@
 				>
 					<MarkdownRenderer content={message.content} sources={webSearchSources} />
 					{#if message.metadata?.duration_seconds || message.metadata?.energy_wh_sim}
+					
 					<EnergyDisplay
-						energyWh={message.metadata?.energy_wh}
-						energyWhSim={message.metadata?.energy_wh_sim}
+						energyWh={message.metadata?.energy_wh || message.metadata?.energy_wh_sim}
+						isEstimated={message.metadata?.energy_wh === undefined}
 						durationSeconds={message.metadata?.duration_seconds}
+						isTotal={false}
 					/>
 
 				{/if}

src/lib/components/chat/ChatWindow.svelte

@@ -32,7 +32,7 @@
 	import UploadedFile from "./UploadedFile.svelte";
 	import { useSettingsStore } from "$lib/stores/settings";
 	import ModelSwitch from "./ModelSwitch.svelte";
-	import EnergySummary from "./EnergySummary.svelte";
+	import EnergyDisplay from "./EnergyDisplay.svelte";
 
 	import { fly } from "svelte/transition";
 	import { cubicInOut } from "svelte/easing";
@@ -78,6 +78,24 @@
 		);
 	let thinkingIsOn = $state(false);
 
+	// Energy display
+	let totalEnergyWh = $derived(
+		messages.reduce(
+			(total: number, msg: any) => total + (msg.metadata?.energy_wh || msg.metadata?.energy_wh_sim || 0),
+			0
+		)
+	);
+	let isEstimated = $derived(
+		messages.some((msg: any) => msg.metadata?.energy_wh === undefined && msg.from === "assistant")
+	);
+	console.log("messages", messages);	
+	let totalDurationSeconds = $derived(
+		messages.reduce(
+			(total: number, msg: any) => total + (msg.metadata?.duration_seconds || 0),
+			0
+		)
+	);
+
 	beforeNavigate(() => {
 		if (page.params.id) {
 			isSharedRecently = false;
@@ -386,11 +404,18 @@
 		<div
 	class="dark:via-gray-80 pointer-events-none absolute inset-x-0 bottom-0 z-0 mx-auto flex w-full max-w-3xl flex-col items-center justify-center bg-gradient-to-t from-white via-white/80 to-white/0 px-3.5 py-4 dark:border-gray-800 dark:from-gray-900 dark:to-gray-900/0 max-md:border-t max-md:bg-white max-md:dark:bg-gray-900 sm:px-5 md:py-8 xl:max-w-4xl [&>*]:pointer-events-auto"
 		>
-		<EnergySummary {messages} />
-	
-	
-		<div class="w-full">
+		
+		<div class="w-full">	
+			
 			<div class="flex w-full *:mb-3">
+				
+				<!-- <EnergySummary {messages} /> -->
+				<EnergyDisplay
+				energyWh={totalEnergyWh}
+				isEstimated={isEstimated}
+				durationSeconds={totalDurationSeconds}
+				isTotal={true}/>
+
 				{#if loading}
 					<StopGeneratingBtn classNames="ml-auto" onClick={() => dispatch("stop")} />
 				{:else if lastIsError}

src/lib/components/chat/EnergyDisplay.svelte

@@ -1,11 +1,9 @@
 <script lang="ts">
-	let { energyWh, energyWhSim, durationSeconds } = $props();
+	let { energyWh, isEstimated, durationSeconds, isTotal } = $props();
 
 	let showJoules = $state(false);
 	let showTooltip = $state(false);
 
-    const isEstimated = $derived(!(typeof energyWh === 'number' && energyWh !== 0));
-    const energyToDisplay = $derived(isEstimated ? energyWhSim : energyWh);
 
 	function convertToJoules(wh: number): number {
 		return wh * 3600;
@@ -62,34 +60,38 @@
     }
 </style>
 
-{#if durationSeconds || energyToDisplay}
+{#if durationSeconds || energyWh}
 	<div class="mt-2 flex gap-2 items-center relative">
 
-        
-        
-
 		<!-- Energy Box -->
-		{#if energyToDisplay}
-			<div
+		{#if energyWh}
+			<button
+                tabindex="0"
+                aria-label="Energy consumption"
 				class="text-xs text-gray-600 dark:text-gray-500 bg-gray-100 dark:bg-gray-800 px-3 py-1 rounded w-fit energy-box"
-				on:click={() => (showJoules = !showJoules)}
+				onclick={() => (showJoules = !showJoules)}
 			>
-            Energy:
+            <span class="hidden sm:inline">
+                {isTotal ? "Total " : ""}
+                Energy:
+            </span>
 				{#if showJoules}
-					{convertToJoules(energyToDisplay).toFixed(2)} J {isEstimated ? "(estimated)" : ""}
+					{convertToJoules(energyWh).toFixed(2)} J {isEstimated ? "(estimated)" : ""}
 				{:else}
-					{energyToDisplay.toFixed(4)} Wh {isEstimated ? "(estimated)" : ""}
+					{energyWh.toFixed(4)} Wh {isEstimated ? "(estimated)" : ""}
 				{/if}
-			</div>
+            </button>
 		{/if}
 
         <!-- Equivalent -->
-        <div
+        <button
+            tabindex="0"
+            aria-label="Energy consumption equivalent"
             class="text-xs text-gray-600 dark:text-gray-500 bg-gray-100 dark:bg-gray-800 px-3 py-1 rounded w-fit cursor-pointer transform hover:scale-105 transition duration-150 ease-in-out"
-            on:click={cycleEquivalent}
+            onclick={cycleEquivalent}
         >
-            {equivalents[equivalentIndex](energyToDisplay)}
-        </div>
+            {equivalents[equivalentIndex](energyWh)}
+        </button>
 
 		
         <!-- Duration -->
@@ -97,19 +99,27 @@
         <div
             class="text-xs text-gray-600 dark:text-gray-500 bg-gray-100 dark:bg-gray-800 px-3 py-1 rounded w-fit"
         > 
-            Duration: {durationSeconds.toFixed(3)} sec
+        <span class="hidden sm:inline">
+            {isTotal ? "Total " : ""}
+            Duration:
+        </span>
+            {durationSeconds.toFixed(3)} s
         </div>
     {/if}
 		
         <!-- Info button -->
-        <div
+         <span class="hidden sm:inline"> 
+        <button
+        tabindex="0"
+        aria-label="Energy consumption info"
         class="relative"
-        on:mouseover={() => (showTooltip = true)}
-        on:mouseleave={() => (showTooltip = false)}>
-            <button
+        onmouseover={() => (showTooltip = true)}
+        onmouseleave={() => (showTooltip = false)}
+        onfocus={() => (showTooltip = true)}>
+            <div
                 class="text-xs text-gray-600 dark:text-gray-500 bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded-full info-button">
                 ⓘ
-            </button>
+         </div>
 		<!-- Tooltip -->
 		{#if showTooltip}
 			<div class="tooltip">
@@ -120,7 +130,8 @@
 				{/if}
 			</div>
 		{/if}
-        </div>
+        </button>
+    </span>
         
 	</div>
 {/if}

src/lib/components/chat/EnergySummary.svelte

@@ -1,105 +0,0 @@
-<script lang="ts">
-  let { messages } = $props();
-
-  const totalEnergy = $derived(messages.reduce(
-    (total: number, msg: any) => total + (msg.metadata?.energy_wh || msg.metadata?.energy_wh_sim || 0),
-    0
-  ));
-
-  const totalDuration = $derived(messages.reduce(
-    (total: number, msg: any) => total + (msg.metadata?.duration_seconds || 0),
-    0
-  ));   
-
-  const isEstimated = $derived(!(
-    typeof messages.at(-1)?.metadata?.energy_wh === 'number' &&
-    messages.at(-1).metadata.energy_wh !== 0));
-
-  let showJoules = $state(false);
-  let equivalentIndex = $state(0);
-  let showTooltip = $state(false);
-
-  const equivalents = [
-    (wh: number) => `≈ ${((wh / 19) * 100).toFixed(2)}% of a phone charge (19Wh)`,
-    (wh: number) => `≈ ${(wh / 0.04).toFixed(2)} minutes of LED bulb (10W)`, // 0.04Wh/min
-    (wh: number) => `≈ ${(wh / 1.5).toFixed(2)} seconds of microwave (1000W)`,
-    (wh: number) => `≈ ${(wh / 0.2).toFixed(2)} pedal strokes on an e-bike (200W)`,
-    (wh: number) => `≈ ${(wh / 12).toFixed(2)} seconds of toaster use (1kW)`
-  ];
-
-  function cycleEquivalent() {
-    equivalentIndex = (equivalentIndex + 1) % equivalents.length;
-  }
-
-  function convertToJoules(wh: number): number {
-		return wh * 3600;
-	}
-</script>
-
-<style>
-    .tooltip {
-    position: absolute;
-    bottom: 100%; /* Positionne au-dessus de l’élément parent */
-    margin-bottom: 0.5rem; /* Équivalent de mb-2 */
-    left: 50%;
-    transform: translateX(-50%);
-    background-color: #f3f4f6; /* bg-gray-200 */
-    color: #1f2937; /* text-gray-800 */
-    font-size: 0.75rem; /* text-xs */
-    padding: 0.5rem 0.75rem; /* px-3 py-2 */
-    border-radius: 0.25rem; /* rounded */
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
-                0 4px 6px -4px rgba(0, 0, 0, 0.1); /* shadow-lg */
-    z-index: 10;
-    width: 16rem; /* w-64 */
-    text-align: center;
-    }
-
-</style>
-
-{#if totalEnergy > 0}
-  <div class="mb-4 flex flex-col sm:flex-row flex-wrap items-center justify-center gap-4 w-full">
-    <!-- Bloc énergie totale -->
-    <div class="text-xs text-gray-600 dark:text-gray-500 bg-gray-100 dark:bg-gray-800 px-3 py-1 rounded transform hover:scale-105 transition duration-150 ease-in-out cursor-pointer" on:click={() => (showJoules = !showJoules)}>
-        Total Energy: 
-        {#if showJoules}
-            {convertToJoules(totalEnergy).toFixed(2)} J
-        {:else}
-            {totalEnergy.toFixed(4)} Wh
-        {/if}
-      {#if isEstimated} (estimated) {/if}
-    </div>  
-
-    <!-- Bloc équivalent charge téléphone -->
-    <div class="text-xs text-gray-600 dark:text-gray-500 bg-gray-100 dark:bg-gray-800 px-3 py-1 rounded cursor-pointer transform hover:scale-105 transition duration-150 ease-in-out" on:click={cycleEquivalent}>
-      {equivalents[equivalentIndex](totalEnergy)}
-    </div>
-
-    <!-- Bloc d urée -->
-    <div class="text-xs text-gray-600 dark:text-gray-500 bg-gray-100 dark:bg-gray-800 px-3 py-1 rounded">
-      Total Duration: {totalDuration.toFixed(3)} sec
-    </div>
-
-    <!-- info button -->
-    <div
-        class="relative"
-        on:mouseover={() => (showTooltip = true)}
-        on:mouseleave={() => (showTooltip = false)}>
-            <button
-                class="text-xs text-gray-600 dark:text-gray-500 bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded-full info-button">
-                ⓘ
-            </button>
-
-      <!-- Tooltip -->
-      {#if showTooltip}
-      <div class="tooltip">
-          {#if isEstimated}
-              Estimated energy consumption based on the average GPU power and inference duration for all messages. Use Qwen/Qwen/Qwen2.5-VL-7B-Instruct model for exact results.
-          {:else}
-              Energy consumption measured directly on the GPU during inference for all messages.
-          {/if}
-      </div>
-  {/if}
-    </div>
-  </div>
-{/if}