ui: kai charting

frontend/app/components/Charts/SankeyChart.tsx

@@ -195,7 +195,7 @@ const EChartsSankey: React.FC<Props> = (props) => {
               header: {
                 fontWeight: '600',
                 fontSize: 12,
-                color: '#333',
+                color: 'var(--color-gray-darkest)',
                 overflow: 'truncate',
                 paddingBottom: '.5rem',
                 paddingLeft: '14px',
@@ -203,16 +203,16 @@ const EChartsSankey: React.FC<Props> = (props) => {
               },
               body: {
                 fontSize: 12,
-                color: '#000',
+                color: 'var(--color-black)',
               },
               percentage: {
                 fontSize: 12,
-                color: '#454545',
+                color: 'var(--color-gray-dark)',
               },
               sessions: {
                 fontSize: 12,
                 fontFamily: "mono, 'monospace', sans-serif",
-                color: '#999999',
+                color: 'var(--color-gray-dark)',
               },
               clickIcon: {
                 backgroundColor: {
@@ -266,6 +266,7 @@ const EChartsSankey: React.FC<Props> = (props) => {
           },
           tooltip: {
             formatter: sankeyTooltip(echartNodes, nodeValues),
+            backgroundColor: 'var(--color-white)',
           },
           nodeAlign: 'left',
           nodeWidth: 40,

frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx

@@ -44,6 +44,7 @@ interface Props {
   isSaved?: boolean;
   isTemplate?: boolean;
   isPreview?: boolean;
+  height?: number;
 }
 
 function WidgetChart(props: Props) {
@@ -52,7 +53,7 @@ function WidgetChart(props: Props) {
     triggerOnce: true,
     rootMargin: '200px 0px',
   });
-  const { isSaved = false, metric, isTemplate } = props;
+  const { isSaved = false, metric, isTemplate, height } = props;
   const { dashboardStore, metricStore } = useStore();
   const _metric: any = props.metric;
   const data = _metric.data;
@@ -283,6 +284,7 @@ function WidgetChart(props: Props) {
             hideLegend
             onClick={onChartClick}
             label={t('Conversion')}
+            height={height}
           />
         );
       }
@@ -293,6 +295,7 @@ function WidgetChart(props: Props) {
           data={data}
           compData={compData}
           isWidget={isSaved || isTemplate}
+          height={height}
         />
       );
     }
@@ -308,6 +311,7 @@ function WidgetChart(props: Props) {
           metric={defaultMetric}
           data={data}
           predefinedKey={_metric.metricOf}
+          height={height}
         />
       );
     }
@@ -331,6 +335,7 @@ function WidgetChart(props: Props) {
             compData={compDataCopy}
             onSeriesFocus={onFocus}
             onClick={onChartClick}
+            height={height}
             label={
               _metric.metricOf === 'sessionCount'
                 ? t('Number of Sessions')
@@ -360,6 +365,7 @@ function WidgetChart(props: Props) {
         return (
           <BarChart
             inGrid={!props.isPreview}
+            height={height}
             data={chartData}
             compData={compDataCopy}
             params={params}
@@ -378,6 +384,7 @@ function WidgetChart(props: Props) {
       if (viewType === 'progressChart') {
         return (
           <ColumnChart
+            height={height}
             inGrid={!props.isPreview}
             horizontal
             data={chartData}
@@ -396,6 +403,7 @@ function WidgetChart(props: Props) {
       if (viewType === 'pieChart') {
         return (
           <PieChart
+            height={height}
             inGrid={!props.isPreview}
             data={chartData}
             onSeriesFocus={onFocus}
@@ -412,6 +420,7 @@ function WidgetChart(props: Props) {
           <CustomMetricPercentage
             inGrid={!props.isPreview}
             data={data[0]}
+            height={height}
             colors={colors}
             params={params}
             label={
@@ -451,6 +460,7 @@ function WidgetChart(props: Props) {
         return (
           <BugNumChart
             values={values}
+            height={height}
             inGrid={!props.isPreview}
             colors={colors}
             onSeriesFocus={onFocus}
@@ -470,6 +480,7 @@ function WidgetChart(props: Props) {
           <CustomMetricTableSessions
             metric={_metric}
             data={data}
+            height={height}
             isTemplate={isTemplate}
             isEdit={!isSaved && !isTemplate}
           />
@@ -480,6 +491,7 @@ function WidgetChart(props: Props) {
           <CustomMetricTableErrors
             metric={_metric}
             data={data}
+            height={height}
             // isTemplate={isTemplate}
             isEdit={!isSaved && !isTemplate}
           />
@@ -490,6 +502,7 @@ function WidgetChart(props: Props) {
           <SessionsBy
             metric={_metric}
             data={data}
+            height={height}
             onClick={onChartClick}
             isTemplate={isTemplate}
           />
@@ -518,18 +531,18 @@ function WidgetChart(props: Props) {
           </div>
         );
       }
-      return <ClickMapCard />;
+      return <ClickMapCard height={height} />;
     }
 
     if (metricType === INSIGHTS) {
-      return <InsightsCard data={data} />;
+      return <InsightsCard height={height} data={data} />;
     }
 
     if (metricType === USER_PATH && data && data.links) {
       const isUngrouped = props.isPreview
         ? !(_metric.hideExcess ?? true)
         : false;
-      const height = props.isPreview ? 550 : 240;
+      const height = props.height ? props.height : props.isPreview ? 550 : 240;
       return (
         <SankeyChart
           height={height}
@@ -548,6 +561,7 @@ function WidgetChart(props: Props) {
       if (viewType === 'trend') {
         return (
           <LineChart
+            height={height}
             data={data}
             colors={colors}
             params={params}

frontend/app/components/Kai/KaiService.ts

@@ -84,7 +84,7 @@ export default class KaiService extends AiService {
   getMsgChart = async (
     messageId: string,
     projectId: string,
-  ): Promise<{ filters: any[]; chart: string; eventsOrder: string }> => {
+  ): Promise<string> => {
     const r = await this.client.get(
       `/kai/${projectId}/chats/data/${messageId}`,
     );

frontend/app/components/Kai/KaiStore.ts

@@ -211,7 +211,7 @@ class KaiStore {
 
   bumpUsage = () => {
     this.usage.used += 1;
-    this.usage.percent = Math.max(
+    this.usage.percent = Math.min(
       (this.usage.used / this.usage.total) * 100,
       100,
     );
@@ -314,27 +314,13 @@ class KaiStore {
       supports_visualization: false,
     });
     try {
-      const filters = await kaiService.getMsgChart(msgId, projectId);
+      const filtersStr = await kaiService.getMsgChart(msgId, projectId);
+      const filters = JSON.parse(filtersStr);
       const data = {
-        metricId: undefined,
-        dashboardId: undefined,
-        widgetId: undefined,
-        metricOf: undefined,
-        metricType: undefined,
-        metricFormat: undefined,
-        viewType: undefined,
-        name: 'Kai Visualization',
-        series: [
-          {
-            name: 'Kai Visualization',
-            filter: {
-              eventsOrder: filters.eventsOrder,
-              filters: filters.filters,
-            },
-          },
-        ],
+        ...filters,
       };
       const metric = new Widget().fromJson(data);
+      kaiService.saveChartData(msgId, projectId, data);
       return metric;
     } catch (e) {
       console.error(e);
@@ -355,7 +341,7 @@ class KaiStore {
       this.usage = {
         total,
         used,
-        percent: (used / total) * 100,
+        percent: Math.round((used / total) * 100),
       };
     } catch (e) {
       console.error(e);

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

@@ -138,8 +138,8 @@ function ChatMsg({
           <Markdown remarkPlugins={[remarkGfm]}>{text}</Markdown>
         </div>
         {metric ? (
-          <div className="p-2 border-gray-light rounded-lg shadow">
-            <WidgetChart metric={metric} isPreview />
+          <div className="p-2 border-gray-light rounded-lg shadow bg-glassWhite mb-2">
+            <WidgetChart metric={metric} isPreview height={360} />
           </div>
         ) : null}
         {isUser ? (

frontend/app/components/Kai/components/Usage.tsx

@@ -2,9 +2,6 @@ import React from 'react';
 import { kaiStore } from '../KaiStore';
 import { observer } from 'mobx-react-lite';
 import { Progress, Tooltip } from 'antd';
-const getUsageColor = (percent: number) => {
-  return 'disabled-text';
-};
 
 function Usage() {
   const usage = kaiStore.usage;
@@ -12,12 +9,16 @@ function Usage() {
   if (usage.total === 0) {
     return null;
   }
+
+  const roundPercent = Math.round((usage.used / usage.total) * 100);
   return (
     <div>
       <Tooltip title={`Daily response limit (${usage.used}/${usage.total})`}>
         <Progress
-          percent={usage.percent}
-          strokeColor={usage.percent < 99 ? 'var(--color-main)' : 'var(--color-red)'}
+          percent={roundPercent}
+          strokeColor={
+            roundPercent < 99 ? 'var(--color-main)' : 'var(--color-red)'
+          }
           showInfo={false}
           type="circle"
           size={24}