feat: unified UI style

eosphoros-ai · Jan 4, 2024 · 35578ce · 35578ce
1 parent dbcadb4
commit 35578ce
Show file tree

Hide file tree

Showing 25 changed files with 318 additions and 376 deletions.
diff --git a/web/app/i18n.ts b/web/app/i18n.ts
@@ -181,6 +181,7 @@ const resources = {
       Advices: 'Advices',
       Retry: 'Retry',
       Load_more: 'load more',
+      new_chat: 'New Chat',
     },
   },
   zh: {
@@ -362,6 +363,7 @@ const resources = {
       Advices: '自动推荐',
       Retry: '重试',
       Load_more: '加载更多',
+      new_chat: '创建会话',
     },
   },
 };

diff --git a/web/components/chart/autoChart/index.tsx b/web/components/chart/autoChart/index.tsx
@@ -8,12 +8,15 @@ import { useEffect, useMemo, useState } from 'react';
 import { defaultAdvicesFilter } from './advisor/utils';
 import { AutoChartProps, ChartType, CustomAdvisorConfig, CustomChart, Specification } from './types';
 import { customCharts } from './charts';
+import { useColorScheme } from '@mui/joy';
 
 const { Option } = Select;
 
 export const AutoChart = (props: AutoChartProps) => {
   const { data, chartType, scopeOfCharts, ruleConfig } = props;
 
+  const { mode } = useColorScheme();
+
   const [advisor, setAdvisor] = useState<Advisor>();
   const [advices, setAdvices] = useState<Advice[]>([]);
   const [renderChartType, setRenderChartType] = useState<ChartType>();
@@ -54,21 +57,29 @@ export const AutoChart = (props: AutoChartProps) => {
       const chartTypeInput = renderChartType ?? advices[0].type;
       const spec: Specification = advices?.find((item: Advice) => item.type === chartTypeInput)?.spec ?? undefined;
       if (spec) {
-        return <Chart key={chartTypeInput} options={spec} />;
+        return (
+          <Chart
+            key={chartTypeInput}
+            options={{
+              ...spec,
+              theme: mode,
+            }}
+          />
+        );
       }
     }
   }, [advices, renderChartType]);
 
   if (renderChartType) {
     return (
       <div>
-        <Row justify="start">
+        <Row justify="start" className="mb-2">
           <Col>{i18n.t('Advices')}</Col>
           <Col style={{ marginLeft: 24 }}>
             <Select
+              className="w-52"
               value={renderChartType}
               placeholder={'Chart Switcher'}
-              style={{ width: '180px' }}
               onChange={(value) => setRenderChartType(value)}
               size={'small'}
             >
@@ -78,10 +89,7 @@ export const AutoChart = (props: AutoChartProps) => {
                 return (
                   <Option key={item.type} value={item.type}>
                     <Tooltip title={name} placement={'right'}>
-                      <div style={{ display: 'flex', alignItems: 'center' }}>
-                        <DownOutlined />
-                        <div style={{ marginLeft: '2px' }}>{name}</div>
-                      </div>
+                      <div>{name}</div>
                     </Tooltip>
                   </Option>
                 );

diff --git a/web/components/chart/bar-chart.tsx b/web/components/chart/bar-chart.tsx
@@ -1,36 +1,33 @@
 import { ChartData } from '@/types/chat';
 import { Chart } from '@berryv/g2-react';
-import { Card, CardContent, Typography } from '@mui/joy';
+import { useColorScheme } from '@mui/joy';
 
 export default function BarChart({ chart }: { key: string; chart: ChartData }) {
+  const { mode } = useColorScheme();
+
   return (
-    <div className="flex-1 min-w-0">
-      <Card className="h-full" sx={{ background: 'transparent' }}>
-        <CardContent className="h-full">
-          <Typography gutterBottom component="div">
-            {chart.chart_name}
-          </Typography>
-          <Typography gutterBottom level="body3">
-            {chart.chart_desc}
-          </Typography>
-          <div className="h-[300px]">
-            <Chart
-              style={{ height: '100%' }}
-              options={{
-                autoFit: true,
-                type: 'interval',
-                data: chart.values,
-                encode: { x: 'name', y: 'value', color: 'type' },
-                axis: {
-                  x: {
-                    labelAutoRotate: false,
-                  },
+    <div className="flex-1 min-w-0 p-4 bg-white dark:bg-theme-dark-container rounded">
+      <div className="h-full">
+        <div className="mb-2">{chart.chart_name}</div>
+        <div className="opacity-80 text-sm mb-2">{chart.chart_desc}</div>
+        <div className="h-[300px]">
+          <Chart
+            style={{ height: '100%' }}
+            options={{
+              autoFit: true,
+              theme: mode,
+              type: 'interval',
+              data: chart.values,
+              encode: { x: 'name', y: 'value', color: 'type' },
+              axis: {
+                x: {
+                  labelAutoRotate: false,
                 },
-              }}
-            />
-          </div>
-        </CardContent>
-      </Card>
+              },
+            }}
+          />
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/web/components/chart/line-chart.tsx b/web/components/chart/line-chart.tsx
@@ -1,59 +1,56 @@
 import { ChartData } from '@/types/chat';
-import { Card, CardContent, Typography } from '@mui/joy';
+import { useColorScheme } from '@mui/joy';
 import { Chart } from '@berryv/g2-react';
 
 export default function LineChart({ chart }: { chart: ChartData }) {
+  const { mode } = useColorScheme();
+
   return (
-    <div className="flex-1 min-w-0">
-      <Card className="h-full" sx={{ background: 'transparent' }}>
-        <CardContent className="h-full">
-          <Typography gutterBottom component="div">
-            {chart.chart_name}
-          </Typography>
-          <Typography gutterBottom level="body3">
-            {chart.chart_desc}
-          </Typography>
-          <div className="h-[300px]">
-            <Chart
-              style={{ height: '100%' }}
-              options={{
-                autoFit: true,
-                type: 'view',
-                data: chart.values,
-                children: [
-                  {
-                    type: 'line',
-                    encode: {
-                      x: 'name',
-                      y: 'value',
-                      color: 'type',
-                      shape: 'smooth',
-                    },
+    <div className="flex-1 min-w-0 p-4 bg-white dark:bg-theme-dark-container rounded">
+      <div className="h-full">
+        <div className="mb-2">{chart.chart_name}</div>
+        <div className="opacity-80 text-sm mb-2">{chart.chart_desc}</div>
+        <div className="h-[300px]">
+          <Chart
+            style={{ height: '100%' }}
+            options={{
+              autoFit: true,
+              theme: mode,
+              type: 'view',
+              data: chart.values,
+              children: [
+                {
+                  type: 'line',
+                  encode: {
+                    x: 'name',
+                    y: 'value',
+                    color: 'type',
+                    shape: 'smooth',
                   },
-                  {
-                    type: 'area',
-                    encode: {
-                      x: 'name',
-                      y: 'value',
-                      color: 'type',
-                      shape: 'smooth',
-                    },
-                    legend: false,
-                    style: {
-                      fillOpacity: 0.15,
-                    },
+                },
+                {
+                  type: 'area',
+                  encode: {
+                    x: 'name',
+                    y: 'value',
+                    color: 'type',
+                    shape: 'smooth',
                   },
-                ],
-                axis: {
-                  x: {
-                    labelAutoRotate: false,
+                  legend: false,
+                  style: {
+                    fillOpacity: 0.15,
                   },
                 },
-              }}
-            />
-          </div>
-        </CardContent>
-      </Card>
+              ],
+              axis: {
+                x: {
+                  labelAutoRotate: false,
+                },
+              },
+            }}
+          />
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/web/components/chart/table-chart.tsx b/web/components/chart/table-chart.tsx
@@ -1,41 +1,36 @@
 import { ChartData } from '@/types/chat';
-import { Card, CardContent, Typography, Table } from '@mui/joy';
+import { Table } from '@mui/joy';
 import { groupBy } from 'lodash';
 
 export default function TableChart({ chart }: { key: string; chart: ChartData }) {
   const data = groupBy(chart.values, 'type');
+
   return (
-    <div className="flex-1 min-w-0">
-      <Card className="h-full overflow-auto" sx={{ background: 'transparent' }}>
-        <CardContent className="h-full">
-          <Typography gutterBottom component="div">
-            {chart.chart_name}
-          </Typography>
-          <Typography gutterBottom level="body3">
-            {chart.chart_desc}
-          </Typography>
-          <div className="flex-1">
-            <Table aria-label="basic table" stripe="odd" hoverRow borderAxis="bothBetween">
-              <thead>
-                <tr>
-                  {Object.keys(data).map((key) => (
-                    <th key={key}>{key}</th>
+    <div className="flex-1 min-w-0 p-4 bg-white dark:bg-theme-dark-container rounded">
+      <div className="h-full">
+        <div className="mb-2">{chart.chart_name}</div>
+        <div className="opacity-80 text-sm mb-2">{chart.chart_desc}</div>
+        <div className="flex-1">
+          <Table aria-label="basic table" stripe="odd" hoverRow borderAxis="bothBetween">
+            <thead>
+              <tr>
+                {Object.keys(data).map((key) => (
+                  <th key={key}>{key}</th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {Object.values(data)?.[0]?.map((value, i) => (
+                <tr key={i}>
+                  {Object.keys(data)?.map((k) => (
+                    <td key={k}>{data?.[k]?.[i].value || ''}</td>
                   ))}
                 </tr>
-              </thead>
-              <tbody>
-                {Object.values(data)?.[0]?.map((value, i) => (
-                  <tr key={i}>
-                    {Object.keys(data)?.map((k) => (
-                      <td key={k}>{data?.[k]?.[i].value || ''}</td>
-                    ))}
-                  </tr>
-                ))}
-              </tbody>
-            </Table>
-          </div>
-        </CardContent>
-      </Card>
+              ))}
+            </tbody>
+          </Table>
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/web/components/chat/chat-container.tsx b/web/components/chat/chat-container.tsx
@@ -109,7 +109,7 @@ const ChatContainer = () => {
       />
       <div className="px-4 flex flex-1 flex-wrap overflow-hidden relative">
         {!!chartsData?.length && (
-          <div className="w-full xl:w-3/4 h-3/5 xl:pr-4 xl:h-full overflow-y-auto">
+          <div className="w-full pb-4 xl:w-3/4 h-3/5 xl:pr-4 xl:h-full overflow-y-auto">
             <Chart chartsData={chartsData} />
           </div>
         )}
@@ -122,8 +122,8 @@ const ChatContainer = () => {
         )}
         {/** chat panel */}
         <div
-          className={classNames('flex flex-1 flex-col overflow-hidden', {
-            'px-0 xl:pl-4 h-2/5 xl:h-full border-t xl:border-t-0 xl:border-l': scene === 'chat_dashboard',
+          className={classNames('flex flex-1 flex-col', {
+            'px-0 xl:pl-4 h-2/5 w-full xl:w-auto xl:h-full border-t xl:border-t-0 xl:border-l dark:border-gray-800': scene === 'chat_dashboard',
             'h-full lg:px-8': scene !== 'chat_dashboard',
           })}
         >

diff --git a/web/components/chat/chat-content/code-preview.tsx b/web/components/chat/chat-content/code-preview.tsx
@@ -1,10 +1,13 @@
 import { Button, message } from 'antd';
 import { CopyOutlined } from '@ant-design/icons';
-import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import { oneDark, coldarkDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import copy from 'copy-to-clipboard';
+import { useColorScheme } from '@mui/joy';
 
 export function CodePreview({ code, language }: { code: string; language: string }) {
+  const { mode } = useColorScheme();
+
   return (
     <div className="relative">
       <Button
@@ -16,7 +19,7 @@ export function CodePreview({ code, language }: { code: string; language: string
           message[success ? 'success' : 'error'](success ? 'Copy success' : 'Copy failed');
         }}
       />
-      <SyntaxHighlighter language={language} style={oneDark}>
+      <SyntaxHighlighter language={language} style={mode === 'dark' ? coldarkDark : oneDark}>
         {code}
       </SyntaxHighlighter>
     </div>

diff --git a/web/components/chat/chat-content/config.tsx b/web/components/chat/chat-content/config.tsx
@@ -37,10 +37,10 @@ const basicComponents: MarkdownComponent = {
 
     return (
       <>
-        {!inline && match ? (
+        {!inline ? (
           <CodePreview code={context} language={match?.[1] ?? 'javascript'} />
         ) : (
-          <code {...props} style={style} className="px-[6px] py-[2px] rounded bg-gray-700 text-gray-100 dark:bg-gray-100 dark:text-gray-800 text-sm">
+          <code {...props} style={style} className="p-1 mx-1 rounded bg-theme-light dark:bg-theme-dark text-sm">
             {children}
           </code>
         )}

diff --git a/web/components/chat/chat-content/index.tsx b/web/components/chat/chat-content/index.tsx
@@ -136,8 +136,8 @@ function ChatContent({ children, content, isChartChat, onLinkClick }: PropsWithC
 
   return (
     <div
-      className={classNames('relative flex flex-wrap w-full px-2 sm:px-4 py-2 sm:py-4 rounded-xl break-words', {
-        'bg-slate-100 dark:bg-[#353539]': isRobot,
+      className={classNames('relative flex flex-wrap w-full px-2 sm:px-4 py-2 sm:py-6 rounded-xl break-words', {
+        'bg-white dark:bg-[#232734]': isRobot,
         'lg:w-full xl:w-full pl-0': ['chat_with_db_execute', 'chat_dashboard'].includes(scene),
       })}
     >
@@ -151,7 +151,7 @@ function ChatContent({ children, content, isChartChat, onLinkClick }: PropsWithC
         {isRobot && isChartChat && typeof context === 'object' && (
           <div>
             {`[${context.template_name}]: `}
-            <span className="text-[#1677ff] cursor-pointer" onClick={onLinkClick}>
+            <span className="text-theme-primary cursor-pointer" onClick={onLinkClick}>
               <CodeOutlined className="mr-1" />
               {context.template_introduce || 'More Details'}
             </span>