ui: change chart saving in kai, fix kaistore actions

frontend/app/components/Kai/KaiStore.ts

@@ -334,6 +334,7 @@ class KaiStore {
     }
   };
 
+  charts = new Map<string, Record<string, any>>();
   getMessageChart = async (msgId: string, projectId: string) => {
     this.setProcessingStage({
       content: 'Generating visualization...',
@@ -353,7 +354,7 @@ class KaiStore {
         ...filters,
       };
       const metric = new Widget().fromJson(data);
-      kaiService.saveChartData(msgId, projectId, data);
+      this.charts.set(msgId, data);
       return metric;
     } catch (e) {
       console.error(e);
@@ -363,19 +364,31 @@ class KaiStore {
     }
   };
 
+  saveLatestChart = async (msgId: string, projectId: string) => {
+    const data = this.charts.get(msgId);
+    if (data) {
+      try {
+        await kaiService.saveChartData(msgId, projectId, data);
+        this.charts.delete(msgId);
+      } catch (e) {
+        console.error(e);
+      }
+    }
+  };
+
   getParsedChart = (data: string) => {
     const parsedData = JSON.parse(data);
     return new Widget().fromJson(parsedData);
   };
 
+  setUsage = (usage: { total: number; used: number; percent: number }) => {
+    this.usage = usage;
+  };
+
   checkUsage = async () => {
     try {
       const { total, used } = await kaiService.checkUsage();
-      this.usage = {
-        total,
-        used,
-        percent: Math.round((used / total) * 100),
-      };
+      this.setUsage({ total, used, percent: Math.round((used / total) * 100) });
     } catch (e) {
       console.error(e);
     }

frontend/app/components/Kai/components/ChatMsg.tsx

@@ -159,6 +159,13 @@ function ChatMsg({
       setLoadingChart(false);
     }
   };
+
+  const metricData = metric?.data;
+  React.useEffect(() => {
+    if (!chart_data && metricData && metricData.values.length > 0) {
+      kaiStore.saveLatestChart(messageId, siteId);
+    }
+  }, [metricData, chart_data]);
   return (
     <div className={cn('flex gap-2', isUser ? 'flex-row-reverse' : 'flex-row')}>
       {isUser ? (

frontend/app/components/Kai/components/ChatsModal.tsx

@@ -58,16 +58,20 @@ function ChatsModal({
         </div>
       ) : null}
       {isPending ? (
-        <div className="animate-pulse text-disabled-text">{t('Loading chats')}...</div>
+        <div className="animate-pulse text-disabled-text">
+          {t('Loading chats')}...
+        </div>
       ) : (
         <div className="overflow-y-auto flex flex-col gap-2">
-          {datedCollections.map((col) => (
+          {datedCollections.map((col, i) => (
+            <React.Fragment key={`${i}_${col.date}`}>
               <ChatCollection
                 data={col.entries}
                 date={col.date}
                 onSelect={onSelect}
                 onDelete={onDelete}
               />
+            </React.Fragment>
           ))}
         </div>
       )}