├── .eslintrc.cjs
├── .gitattributes
├── .gitignore
├── LICENSE
├── README.md
├── api
    └── vizchat.ts
├── index.html
├── package.json
├── postcss.config.js
├── public
    ├── datasets
    │   ├── cars.json
    │   └── students.json
    └── kanaries.ico
├── src
    ├── App.css
    ├── App.tsx
    ├── components
    │   ├── datasetCreation
    │   │   ├── dataTable.tsx
    │   │   ├── index.tsx
    │   │   └── pagination.tsx
    │   ├── dropdownContext.tsx
    │   ├── modal.tsx
    │   ├── monaco
    │   │   └── index.tsx
    │   ├── notify
    │   │   ├── index.tsx
    │   │   └── useNotification.tsx
    │   ├── react-vega.tsx
    │   ├── selectMenu.tsx
    │   ├── spinner.tsx
    │   ├── upgradeGuide
    │   │   ├── auth.ts
    │   │   └── index.tsx
    │   ├── vizChat.tsx
    │   └── welcomePrompt.tsx
    ├── index.css
    ├── interface.ts
    ├── main.tsx
    ├── services
    │   └── llm.ts
    ├── theme.ts
    ├── utils
    │   ├── index.ts
    │   ├── inferType.ts
    │   └── messageData.ts
    └── vite-env.d.ts
├── tailwind.config.js
├── tsconfig.json
├── tsconfig.node.json
├── vite.config.ts
└── yarn.lock


/.eslintrc.cjs:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   env: { browser: true, es2020: true },
 3 |   extends: [
 4 |     'eslint:recommended',
 5 |     'plugin:@typescript-eslint/recommended',
 6 |     'plugin:react-hooks/recommended',
 7 |   ],
 8 |   parser: '@typescript-eslint/parser',
 9 |   parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
10 |   plugins: ['react-refresh'],
11 |   rules: {
12 |     'react-refresh/only-export-components': 'warn',
13 |   },
14 | }
15 | 


--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | # Auto detect text files and perform LF normalization
2 | * text=auto
3 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | .env
26 | .vercel
27 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | Elastic License 2.0 (ELv2)
 2 | Elastic License
 3 | Acceptance
 4 | By using the software, you agree to all of the terms and conditions below.
 5 | 
 6 | Copyright License
 7 | The licensor grants you a non-exclusive, royalty-free, worldwide, non-sublicensable, non-transferable license to use, copy, distribute, make available, and prepare derivative works of the software, in each case subject to the limitations and conditions below.
 8 | 
 9 | Limitations
10 | You may not provide the software to third parties as a hosted or managed service, where the service provides users with access to any substantial set of the features or functionality of the software.
11 | 
12 | You may not move, change, disable, or circumvent the license key functionality in the software, and you may not remove or obscure any functionality in the software that is protected by the license key.
13 | 
14 | You may not alter, remove, or obscure any licensing, copyright, or other notices of the licensor in the software. Any use of the licensor’s trademarks is subject to applicable law.
15 | 
16 | Patents
17 | The licensor grants you a license, under any patent claims the licensor can license, or becomes able to license, to make, have made, use, sell, offer for sale, import and have imported the software, in each case subject to the limitations and conditions in this license. This license does not cover any patent claims that you cause to be infringed by modifications or additions to the software. If you or your company make any written claim that the software infringes or contributes to infringement of any patent, your patent license for the software granted under these terms ends immediately. If your company makes such a claim, your patent license ends immediately for work on behalf of your company.
18 | 
19 | Notices
20 | You must ensure that anyone who gets a copy of any part of the software from you also gets a copy of these terms.
21 | 
22 | If you modify the software, you must include in any modified copies of the software prominent notices stating that you have modified the software.
23 | 
24 | No Other Rights
25 | These terms do not imply any licenses other than those expressly granted in these terms.
26 | 
27 | Termination
28 | If you use the software in violation of these terms, such use is not licensed, and your licenses will automatically terminate. If the licensor provides you with a notice of your violation, and you cease all violation of this license no later than 30 days after you receive that notice, your licenses will be reinstated retroactively. However, if you violate these terms after such reinstatement, any additional violation of these terms will cause your licenses to terminate automatically and permanently.
29 | 
30 | No Liability
31 | As far as the law allows, the software comes as is, without any warranty or condition, and the licensor will not be liable to you for any damages arising out of these terms or the use or nature of the software, under any kind of legal claim.
32 | 
33 | Definitions
34 | The licensor is the entity offering these terms, and the software is the software the licensor makes available under these terms, including any portion of it.
35 | 
36 | you refers to the individual or entity agreeing to these terms.
37 | 
38 | your company is any legal entity, sole proprietorship, or other kind of organization that you work for, plus all organizations that have control over, are under the control of, or are under common control with that organization. control means ownership of substantially all the assets of an entity, or the power to direct its management and policies by vote, contract, or otherwise. Control can be direct or indirect.
39 | 
40 | your licenses are all the licenses granted to you for the software under these terms.
41 | 
42 | use means anything you do with the software requiring one of your licenses.
43 | 
44 | trademark means trademarks, service marks, and similar rights.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # VizGPT: AI Data Visualization, Make contextual data visualization with Chat Interface
 2 | 
 3 | https://github.com/ObservedObserver/viz-gpt/assets/22167673/a09032d3-f3c8-4cdf-ac14-89df8754fd9f
 4 | 
 5 | 
 6 | Use GPT to generate visualization from datasets with natural language. You can edit the visualization in the context step by step to make it more precise without retyping the complex query. VizGPT turns your text queries and chat into data visualization or charts.
 7 | 
 8 | You can try it at [Playground](https://vizgpt.ai/)
 9 | or vizGPT on Kanaries [kanaries-vizgpt](https://kanaries.net/home/products)
10 | 
11 | #### Why VizGPT
12 | 
13 | There exist lots of great visualization products in the world, such as Tableau, pygwalker. The traditional drag-and-drop visualization tool is hard to use for people unfamiliar with configs and viz/data transformations. For example, making a tableau heatmap requires bin transformations to both axes and then dragging the measure to color. It is hard for people unfamiliar with data visualization to make a heatmap.
14 | 
15 | Some text2viz tools accept natural language to generate the visualization. However, they are not flexible enough to allow users to edit the visualization. For example, if the user wants to change the color of the heatmap, they have to retype the whole sentence.
16 | 
17 | With VizGPT, you can build visualizations step by step with a chat interface. You can edit/adjust visualizations in the context. It allows you to explore the data first without figuring out how to build complex visualization initially, especially when unfamiliar with the data.
18 | 
19 | Besides, VizGPT focus on text based visual exploration. It allows users to discover new insights from visualization and ask new questions based on the insights they just find.
20 | 
21 | ## Features & Roadmap
22 | + [x] Natural language to data visualization [vega-lite](https://github.com/vega/vega-lite)
23 | + [x] Use chat context to edit your visualization. Allow users to change the chart if it is not what they expected
24 | + [x] Explore the data step by step by chatting with visualizations.
25 | + [x] Upload your own dataset (CSV) to make visulizations.
26 | + [ ] Save the visualizations and chat history.
27 | + [ ] Allow user to use visualization editor (like [graphic-walker](https://github.com/Kanaries/graphic-walker) or [vega-editor](https://github.com/vega/editor)) to edit the visualization and show the edit to GPT to make better visualization as the user prefers.
28 | 
29 | > vizGPT is now good at drawing data visualizations, not data transformations/preparation/computation. You can use other tools like Kanaries/RATH to prepare the data first and then use vizGPT to draw the visualization.
30 | 
31 | ## vizGPT + RAG
32 | I also build a RAG version of vizGPT, which can be accessed at [vizgpt.ai](https://vizgpt.ai), it contains RAG special for vega/vega-lite and SQL. 
33 | 
34 | ## Chat to Viz Example
35 | <img src="https://github.com/ObservedObserver/viz-gpt/assets/22167673/3788bb64-9441-4c1a-b709-307f9bc47e3d" width="68%" alt="vizapt-1" />
36 | 
37 | <img src="https://github.com/ObservedObserver/viz-gpt/assets/22167673/50fc05a3-7511-489d-bb6f-5e0b7568e9cf" width="68%" alt="vizapt-2" />
38 | 
39 | <img src="https://github.com/ObservedObserver/viz-gpt/assets/22167673/5506e5f5-f209-4721-a2ee-61e59180f08f" width="68%" alt="vizapt-3" />
40 | 
41 | ![Xnapper-2023-05-10-00 28 07](https://github.com/ObservedObserver/viz-gpt/assets/22167673/9ffb763a-d18d-4867-a974-5ab02131ce1f)
42 | 
43 | ![Xnapper-2023-05-10-01 05 15](https://github.com/ObservedObserver/viz-gpt/assets/22167673/cd2d45c9-f0d4-431c-8ced-5c1228ad24a7)
44 | 
45 | 
46 | 
47 | ### Add custom CSV file
48 | 
49 | Click `upload CSV button to add your own data. You can view or edit your data's metas at data view. The metas are inferred automatically by default. You can edit it anytime you want to make the visualization more precise.
50 | 
51 | ![data view](https://github.com/ObservedObserver/viz-gpt/assets/22167673/a490e364-bcd1-418f-80eb-62e47faf4330)
52 | 
53 | 
54 | 
55 | ## Local Development
56 | 
57 | #### step 1
58 | Create a `.env` file at the root of the project with the following contents:
59 | 
60 | ```
61 | BASE_URL=<Azure OpenAI BaseURL>
62 | DEPLOYMENT_NAME=<Deployment Name>
63 | AZURE_OPENAI_KEY=<Your key>
64 | ```
65 | 
66 | #### step 2
67 | 
68 | Install dependencies:
69 | 
70 | ```bash
71 | yarn install
72 | ```
73 | 
74 | #### step 3
75 | 
76 | Then run `vercel dev` or `npm run dev` to start the server at port 3000.
77 | 


--------------------------------------------------------------------------------
/api/vizchat.ts:
--------------------------------------------------------------------------------
  1 | /* eslint-disable @typescript-eslint/ban-ts-comment */
  2 | import { VercelRequest, VercelResponse } from "@vercel/node";
  3 | import { IMessage } from "../src/services/llm";
  4 | import fetch from "node-fetch";
  5 | import { IField } from "../src/interface";
  6 | 
  7 | interface RequestBody {
  8 |     messages: IMessage[];
  9 |     metas: IField[];
 10 | }
 11 | export interface IResponseData {
 12 |     id: string;
 13 |     object: string;
 14 |     model: string;
 15 |     usage: {
 16 |         prompt_tokens: number;
 17 |         completion_tokens: number;
 18 |         total_tokens: number;
 19 |     };
 20 |     choices: { message: { role: string; content: string } }[];
 21 | }
 22 | 
 23 | const TEMPERATURE = 0.05;
 24 | 
 25 | export default async function (req: VercelRequest, res: VercelResponse) {
 26 |     const { messages = [], metas = [] } = req.body as RequestBody;
 27 |     const systemMessage: IMessage = {
 28 |         role: "system",
 29 |         content: `You are a great assistant at vega-lite visualization creation. No matter what the user ask, you should always response with a valid vega-lite specification in JSON.
 30 | 
 31 |             You should create the vega-lite specification based on user's query.
 32 | 
 33 |             Besides, Here are some requirements:
 34 |             1. Do not contain the key called 'data' in vega-lite specification.
 35 |             2. If the user ask many times, you should generate the specification based on the previous context.
 36 |             3. You should consider to aggregate the field if it is quantitative and the chart has a mark type of react, bar, line, area or arc.
 37 |             4. Consider to use bin for field if it is a chart like heatmap or histogram.
 38 |             5. The available fields in the dataset and their types are:
 39 |             ${metas
 40 |                 .map((field) => `${field.name} (${field.semanticType})`)
 41 |                 .join(", ")}
 42 |             `,
 43 |     };
 44 |     // If the field is aggregated or transformed, the field title in spec should contains both the aggregate/transform info and the column title. For example, the title of field sales aggregated by mean should be "Mean(Sales)",
 45 |     if (messages.length === 0 || metas.length === 0) {
 46 |         res.status(400).json({
 47 |             success: false,
 48 |             message: `[vizchat error] messages or metas is empty.`,
 49 |         });
 50 |         return;
 51 |     }
 52 |     if (messages[messages.length - 1].role === "user") {
 53 |         messages[
 54 |             messages.length - 1
 55 |         ].content = `Translate text delimited by triple backticks into vega-lite specification in JSON string.
 56 |         \`\`\`
 57 |         ${messages[messages.length - 1].content}
 58 |         \`\`\`
 59 |         `;
 60 |         //  If there is no valid vega-lite specification or the instruction is not clear, you can recommend a chart from the given dataset and print in vega-lite JSON string.
 61 |     }
 62 |     try {
 63 |         const data = await getCompletion([systemMessage, ...messages]);
 64 |         res.status(200).json({
 65 |             success: true,
 66 |             data: data,
 67 |         });
 68 |     } catch (error) {
 69 |         res.status(500).json({
 70 |             success: false,
 71 |             message: `[vizchat error] failed task.`,
 72 |         });
 73 |     }
 74 |     return;
 75 | }
 76 | 
 77 | async function getCompletion(messages): Promise<IResponseData> {
 78 |     if (preferAzureOpenAI()) {
 79 |         return getAzureOpenAICompletion(messages);
 80 |     }
 81 |     return getOpenAICompletion(messages)
 82 | }
 83 | 
 84 | function preferAzureOpenAI(): boolean {
 85 |     return !!(process.env.BASE_URL && process.env.DEPLOYMENT_NAME && process.env.AZURE_OPENAI_KEY);
 86 | }
 87 | 
 88 | async function getAzureOpenAICompletion(messages): Promise<IResponseData> {
 89 |     const url = `${process.env.BASE_URL}/openai/deployments/${process.env.DEPLOYMENT_NAME}/chat/completions?api-version=2023-03-15-preview`;
 90 |     const response = await fetch(url, {
 91 |         method: "POST",
 92 |         // @ts-ignore
 93 |         headers: {
 94 |             "Content-Type": "application/json",
 95 |             // @ts-ignore
 96 |             "api-key": process.env.AZURE_OPENAI_KEY,
 97 |         },
 98 |         body: JSON.stringify({
 99 |             messages,
100 |             temperature: TEMPERATURE,
101 |         }),
102 |     });
103 |     const data = (await response.json()) as IResponseData;
104 |     return data;
105 | }
106 | 
107 | 
108 | async function getOpenAICompletion(messages): Promise<IResponseData> {
109 |     const url = "https://api.openai.com/v1/chat/completions";
110 |     const response = await fetch(url, {
111 |         method: "POST",
112 |         headers: {
113 |             "Content-Type": "application/json",
114 |             "Authorization": `Bearer ${process.env.OPENAI_KEY}`
115 |         },
116 |         body: JSON.stringify({
117 |             "model": "gpt-3.5-turbo",
118 |             messages: messages,
119 |             temperature: TEMPERATURE,
120 |             n: 1,
121 |         }),
122 |     });
123 | 
124 |     const data = await response.json();
125 |     return data as IResponseData;
126 | }
127 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>VizGPT</title>
 7 |     <meta content="Make contextual data visualization with Chat Interface. keywords: chartGPT, vizGPT, text2viz, text2chart" name="description" />
 8 |     <link rel="icon" type="image/svg+xml" href="/kanaries.ico" />
 9 |   </head>
10 |   <body>
11 |     <div id="root"></div>
12 |     <script type="module" src="/src/main.tsx"></script>
13 |   </body>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "viz-gpt",
 3 |   "private": true,
 4 |   "version": "0.0.1",
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "dev": "vite",
 8 |     "build": "tsc && vite build",
 9 |     "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
10 |     "preview": "vite preview",
11 |     "dev:vercel": "vercel dev"
12 |   },
13 |   "prettier": {
14 |     "tabWidth": 4,
15 |     "printWidth": 120
16 |   },
17 |   "dependencies": {
18 |     "@headlessui/react": "^1.7.14",
19 |     "@heroicons/react": "^2.0.17",
20 |     "@kanaries/web-data-loader": "^0.1.7",
21 |     "@monaco-editor/react": "^4.5.1",
22 |     "@tailwindcss/forms": "^0.5.3",
23 |     "@vercel/analytics": "^1.0.1",
24 |     "@vercel/node": "^2.14.1",
25 |     "immer": "^10.0.1",
26 |     "monaco-editor": "^0.38.0",
27 |     "react": "^18.2.0",
28 |     "react-dom": "^18.2.0",
29 |     "styled-components": "^6.0.0-rc.1",
30 |     "vega": "^5.25.0",
31 |     "vega-embed": "^6.22.1",
32 |     "vega-lite": "^5.9.0"
33 |   },
34 |   "devDependencies": {
35 |     "@types/react": "^18.0.28",
36 |     "@types/react-dom": "^18.0.11",
37 |     "@types/styled-components": "^5.1.26",
38 |     "@typescript-eslint/eslint-plugin": "^5.57.1",
39 |     "@typescript-eslint/parser": "^5.57.1",
40 |     "@vitejs/plugin-react": "^4.0.0",
41 |     "autoprefixer": "^10.4.14",
42 |     "eslint": "^8.38.0",
43 |     "eslint-plugin-react-hooks": "^4.6.0",
44 |     "eslint-plugin-react-refresh": "^0.3.4",
45 |     "node-fetch": "^3.3.1",
46 |     "postcss": "^8.4.23",
47 |     "tailwindcss": "^3.3.2",
48 |     "typescript": "^5.0.2",
49 |     "vite": "^4.3.2"
50 |   }
51 | }
52 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 |     plugins: {
3 |         tailwindcss: {},
4 |         autoprefixer: {},
5 |     },
6 | };
7 | 


--------------------------------------------------------------------------------
/public/kanaries.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ObservedObserver/viz-gpt/b694660ab4dcd1ba91710f879d9ef57eb760f0ea/public/kanaries.ico


--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ObservedObserver/viz-gpt/b694660ab4dcd1ba91710f879d9ef57eb760f0ea/src/App.css


--------------------------------------------------------------------------------
/src/App.tsx:
--------------------------------------------------------------------------------
  1 | /* eslint-disable no-useless-escape */
  2 | import { useCallback, useEffect, useState } from "react";
  3 | import { track } from '@vercel/analytics';
  4 | import { IMessage, chatCompletation } from "./services/llm";
  5 | import { matchQuote } from "./utils";
  6 | import { IDataset } from "./interface";
  7 | import VizChat from "./components/vizChat";
  8 | import SelectMenu from "./components/selectMenu";
  9 | import { PaperAirplaneIcon, TrashIcon } from "@heroicons/react/20/solid";
 10 | import Spinner from "./components/spinner";
 11 | import DatasetCreation from "./components/datasetCreation";
 12 | import DataTable from "./components/datasetCreation/dataTable";
 13 | import { produce } from "immer";
 14 | import { useNotification } from "./components/notify/useNotification";
 15 | import { WelcomePrompt } from "./components/welcomePrompt";
 16 | import { useMessageData } from "./utils/messageData";
 17 | 
 18 | type DSItem =
 19 |     | {
 20 |           key: string;
 21 |           name: string;
 22 |           url: string;
 23 |           type: "demo";
 24 |       }
 25 |     | {
 26 |           key: string;
 27 |           name: string;
 28 |           dataset: IDataset;
 29 |           type: "custom";
 30 |       };
 31 | 
 32 | const EXAMPLE_DATASETS: DSItem[] = [
 33 |     {
 34 |         key: "cars",
 35 |         name: "Cars Dataset",
 36 |         url: "/datasets/cars.json",
 37 |         type: "demo",
 38 |     },
 39 |     {
 40 |         key: "students",
 41 |         name: "Students Dataset",
 42 |         url: "/datasets/students.json",
 43 |         type: "demo",
 44 |     },
 45 | ];
 46 | 
 47 | const HomePage = function HomePage() {
 48 |     const [userQuery, setUserQuery] = useState("");
 49 |     const [loading, setLoading] = useState(false);
 50 |     const [dataset, setDataset] = useState<IDataset | null>(null);
 51 |     const [dsList, setDsList] = useState<DSItem[]>(EXAMPLE_DATASETS);
 52 |     const [pivotKey, setPivotKey] = useState<string>("viz");
 53 |     const [datasetKey, setDatasetKey] = useState<string>(
 54 |         EXAMPLE_DATASETS[0].key
 55 |     );
 56 |     const [chat, setChat] = useState<IMessage[]>([]);
 57 |     const { notify } = useNotification();
 58 | 
 59 |     useEffect(() => {
 60 |         const currentDatasetInfo =
 61 |             dsList.find((dataset) => dataset.key === datasetKey) ?? dsList[0];
 62 |         if (currentDatasetInfo.type === "demo") {
 63 |             fetch(currentDatasetInfo.url)
 64 |                 .then((res) => res.json())
 65 |                 .then((res) => {
 66 |                     setDataset(res);
 67 |                 })
 68 |                 .catch(() => {
 69 |                     notify(
 70 |                         {
 71 |                             title: "Error",
 72 |                             message: "Dataset not found",
 73 |                             type: "error",
 74 |                         },
 75 |                         3000
 76 |                     );
 77 |                 });
 78 |         } else {
 79 |             setDataset(currentDatasetInfo.dataset);
 80 |         }
 81 |     }, [datasetKey, dsList, notify]);
 82 | 
 83 |     const startQuery = useCallback(() => {
 84 |         setLoading(true);
 85 |         const latestQuery: IMessage = {
 86 |             role: "user",
 87 |             content: userQuery,
 88 |         };
 89 |         const fields = dataset?.fields ?? [];
 90 |         track('query', { query: userQuery, chatSize: chat.length, keys: fields.map(f => f.fid).join(',') })
 91 |         chatCompletation([...chat, latestQuery], fields)
 92 |             .then((res) => {
 93 |                 if (res.choices.length > 0) {
 94 |                     const spec = matchQuote(
 95 |                         res.choices[0].message.content,
 96 |                         "{",
 97 |                         "}"
 98 |                     );
 99 |                     if (spec) {
100 |                         setChat([...chat, latestQuery, res.choices[0].message]);
101 |                     } else {
102 |                         setChat([...chat, latestQuery, {
103 |                             role: 'assistant',
104 |                             content: 'There is no relative visualization for your query. Please check the dataset and try again.',
105 |                         }]);
106 |                         // throw new Error(
107 |                         //     "No visualization matches your instruction.\n" +
108 |                         //         res.choices[0].message.content
109 |                         // );
110 |                     }
111 |                 }
112 |             })
113 |             .catch((err) => {
114 |                 notify(
115 |                     {
116 |                         title: "Error",
117 |                         message: err.message,
118 |                         type: "error",
119 |                     },
120 |                     3000
121 |                 );
122 |             })
123 |             .finally(() => {
124 |                 setLoading(false);
125 |                 setUserQuery("");
126 |             });
127 |     }, [userQuery, chat, dataset, notify]);
128 | 
129 |     const clearChat = useCallback(() => {
130 |         setChat([]);
131 |     }, []);
132 | 
133 |     const feedbackHandler = useCallback(
134 |         (messages: IMessage[], mIndex: number, action: string) => {
135 |             // todo: implement feedback handler
136 |             track('feedback', { query: messages[0]?.content, ans: messages[1]?.content, action })
137 |             notify({
138 |                 title: "Feedback",
139 |                 message: "Thanks for your feedback!",
140 |                 type: "success",
141 |             }, 1000)
142 |         },
143 |         [notify]
144 |     );
145 | 
146 |     const datasetCreateHandler = useCallback((ds: IDataset) => {
147 |         const timeString = new Date().toISOString().replace(/:/g, "-");
148 |         const k = "custom-" + timeString; 
149 |         setDsList((l) => [
150 |             ...l,
151 |             {
152 |                 name: "Custom Dataset" + l.length,
153 |                 key: k,
154 |                 dataset: ds,
155 |                 type: "custom",
156 |             },
157 |         ]);
158 |         setDatasetKey(k);
159 |     }, []);
160 | 
161 |     useMessageData(datasetCreateHandler);
162 | 
163 |     return (
164 |         <div className="container mx-auto dark:bg-zinc-900 dark:text-gray-50">
165 |             <div className="text-5xl font-extrabold flex justify-center mt-8">
166 |                 <h1 className="bg-clip-text text-transparent bg-gradient-to-r from-pink-500 to-violet-500">
167 |                     VizGPT
168 |                 </h1>
169 |                 
170 |             </div>
171 |             <p className="text-center my-2">
172 |                 Make contextual data visualization with Chat Interface from tabular datasets.
173 |             </p>
174 |             <div className="flex items-end my-2">
175 |                 <div>
176 |                     <SelectMenu
177 |                         label="Dataset"
178 |                         items={dsList}
179 |                         selectedKey={datasetKey}
180 |                         onChange={(dsKey) => {
181 |                             setDatasetKey(dsKey);
182 |                         }}
183 |                     />
184 |                 </div>
185 |                 <DatasetCreation onDatasetCreated={datasetCreateHandler} />
186 |                 <div className="ml-4">
187 |                     <span className="isolate inline-flex rounded-md shadow-sm">
188 |                         <button
189 |                             type="button"
190 |                             className={`relative inline-flex items-center rounded-l-md px-3 py-2 text-sm font-semibold text-gray-900 dark:text-gray-50 ring-1 ring-inset ring-gray-300 dark:ring-gray-500 hover:bg-indigo-500 hover:text-white focus:z-10 ${
191 |                                 pivotKey === "viz"
192 |                                     ? "bg-indigo-600 border-indigo-600 text-white"
193 |                                     : ""
194 |                             }`}
195 |                             onClick={() => {
196 |                                 setPivotKey("viz");
197 |                             }}
198 |                         >
199 |                             Chat to Viz
200 |                         </button>
201 |                         <button
202 |                             type="button"
203 |                             className={`relative -ml-px inline-flex items-center rounded-r-md px-3 py-2 text-sm font-semibold text-gray-900 dark:text-gray-50 ring-1 ring-inset ring-gray-300 dark:ring-gray-500 hover:bg-indigo-500 hover:text-white focus:z-10 ${
204 |                                 pivotKey === "data"
205 |                                     ? "bg-indigo-600 border-indigo-600 text-white"
206 |                                     : ""
207 |                             }`}
208 |                             onClick={() => {
209 |                                 setPivotKey("data");
210 |                             }}
211 |                         >
212 |                             Data
213 |                         </button>
214 |                     </span>
215 |                 </div>
216 |             </div>
217 |             {pivotKey === "viz" && (
218 |                 <div className="flex flex-col space-between">
219 |                     {dataset && chat.length === 0 && (
220 |                         <WelcomePrompt
221 |                             metas={dataset.fields}
222 |                             onPromptClick={(p) => {
223 |                                 setUserQuery(p);
224 |                             }}
225 |                         />
226 |                     )}
227 |                     {dataset && chat.length > 0 && (
228 |                         <VizChat
229 |                             dataset={dataset}
230 |                             messages={chat}
231 |                             onDelete={(message, mIndex) => {
232 |                                 if (message.role === "user") {
233 |                                     setChat((c) => {
234 |                                         const newChat = [...c];
235 |                                         newChat.splice(mIndex, 2);
236 |                                         return newChat;
237 |                                     });
238 |                                 } else if (message.role === 'assistant') {
239 |                                     setChat((c) => {
240 |                                         const newChat = [...c];
241 |                                         newChat.splice(mIndex - 1, 2);
242 |                                         return newChat;
243 |                                     });
244 |                                 }
245 |                             }}
246 |                             onUserFeedback={feedbackHandler}
247 |                         />
248 |                     )}
249 |                     <div className="right-0 py-8 flex">
250 |                         <button
251 |                             type="button"
252 |                             className="flex items-center grow-0 rounded-l-md border border-gray-300 dark:border-gray-500 px-2.5 py-1.5 text-sm text-gray-500 dark:text-gray-500 shadow-sm hover:bg-gray-200 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:opacity-50 disabled:cursor-not-allowed"
253 |                             disabled={loading}
254 |                             onClick={clearChat}
255 |                         >
256 |                             Clear
257 |                             {!loading && <TrashIcon className="w-4 ml-1" />}
258 |                         </button>
259 |                         <input
260 |                             type="text"
261 |                             className="block w-full border-0 py-1.5 text-gray-900 dark:text-gray-50 shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-500 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 dark:bg-gray-900"
262 |                             placeholder="what visualization your want to draw from the dataset"
263 |                             value={userQuery}
264 |                             onChange={(e) => setUserQuery(e.target.value)}
265 |                             onKeyDown={(e) => {
266 |                                 if (e.key === "Enter" && loading === false && userQuery.length > 0) {
267 |                                     startQuery();
268 |                                 }
269 |                             }}
270 |                         />
271 |                         <button
272 |                             type="button"
273 |                             className="flex items-center grow-0 rounded-r-md bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:opacity-50 disabled:cursor-not-allowed"
274 |                             disabled={loading || userQuery.length === 0}
275 |                             onClick={startQuery}
276 |                         >
277 |                             Visualize
278 |                             {!loading && (
279 |                                 <PaperAirplaneIcon className="w-4 ml-1" />
280 |                             )}
281 |                             {loading && <Spinner />}
282 |                         </button>
283 |                     </div>
284 |                 </div>
285 |             )}
286 |             {pivotKey === "data" && (
287 |                 <div>
288 |                     {dataset && (
289 |                         <DataTable
290 |                             data={dataset.dataSource}
291 |                             metas={dataset.fields}
292 |                             onMetaChange={(fid, fIndex, meta) => {
293 |                                 const nextDataset = produce(
294 |                                     dataset,
295 |                                     (draft) => {
296 |                                         draft.fields[fIndex] = {
297 |                                             ...draft.fields[fIndex],
298 |                                             ...meta,
299 |                                         };
300 |                                     }
301 |                                 );
302 |                                 setDataset(nextDataset);
303 |                             }}
304 |                         />
305 |                     )}
306 |                 </div>
307 |             )}
308 |         </div>
309 |     );
310 | };
311 | 
312 | export default HomePage;
313 | 


--------------------------------------------------------------------------------
/src/components/datasetCreation/dataTable.tsx:
--------------------------------------------------------------------------------
  1 | import React, { useMemo, useState } from "react";
  2 | import styled from "styled-components";
  3 | import { IField, IRow } from "../../interface";
  4 | import Pagination from "./pagination";
  5 | import { ChevronUpDownIcon } from "@heroicons/react/24/outline";
  6 | import DropdownContext from "../dropdownContext"
  7 | 
  8 | interface DataTableProps {
  9 |     size?: number;
 10 |     metas: IField[];
 11 |     data: IRow[];
 12 |     onMetaChange: (fid: string, fIndex: number, meta: Partial<IField>) => void;
 13 | }
 14 | const Container = styled.div`
 15 |     overflow-x: auto;
 16 |     max-height: 660px;
 17 |     overflow-y: auto;
 18 |     table {
 19 |         box-sizing: content-box;
 20 |         border-collapse: collapse;
 21 |         font-size: 12px;
 22 |         tbody {
 23 |             td {
 24 |             }
 25 |             td.number {
 26 |                 text-align: right;
 27 |             }
 28 |             td.text {
 29 |                 text-align: left;
 30 |             }
 31 |         }
 32 |     }
 33 | `;
 34 | const SEMANTIC_TYPE_LIST = ["nominal", "ordinal", "quantitative", "temporal"];
 35 | // function getCellType(field: IField): 'number' | 'text' {
 36 | //     return field.dataType === 'number' || field.dataType === 'integer' ? 'number' : 'text';
 37 | // }
 38 | function getHeaderType(field: IField): "number" | "text" {
 39 |     return field.semanticType !== "quantitative" ? "text" : "number";
 40 | }
 41 | 
 42 | function getHeaderClassNames(field: IField) {
 43 |     return field.semanticType !== "quantitative" ? "border-t-4 border-blue-400" : "border-t-4 border-purple-400";
 44 | }
 45 | 
 46 | function getSemanticColors(field: IField): string {
 47 |     switch (field.semanticType) {
 48 |         case "nominal":
 49 |             return "border border-transparent bg-sky-100 text-sky-800 dark:bg-sky-900 dark:text-sky-100 dark:border-sky-600";
 50 |         case "ordinal":
 51 |             return "border border-transparent bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-100 dark:border-indigo-600";
 52 |         case "quantitative":
 53 |             return "border border-transparent bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-100 dark:border-purple-600";
 54 |         case "temporal":
 55 |             return "border border-transparent bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-100 dark:border-yellow-600";
 56 |         default:
 57 |             return "border border-transparent bg-gray-400";
 58 |     }
 59 | }
 60 | 
 61 | const DataTable: React.FC<DataTableProps> = (props) => {
 62 |     const { size = 10, data, metas, onMetaChange } = props;
 63 |     const [pageIndex, setPageIndex] = useState(0);
 64 | 
 65 |     const semanticTypeList = useMemo<{ value: string; label: string }[]>(() => {
 66 |         return SEMANTIC_TYPE_LIST.map((st) => ({
 67 |             value: st,
 68 |             label: st
 69 |         }));
 70 |     }, []);
 71 | 
 72 |     const from = pageIndex * size;
 73 |     const to = Math.min((pageIndex + 1) * size, data.length - 1);
 74 | 
 75 |     return (
 76 |         <Container className="rounded border-gray-200 dark:border-gray-700 border">
 77 |             <Pagination
 78 |                 total={data.length}
 79 |                 from={from + 1}
 80 |                 to={to + 1}
 81 |                 onNext={() => {
 82 |                     setPageIndex(Math.min(Math.ceil(data.length / size) - 1, pageIndex + 1));
 83 |                 }}
 84 |                 onPrev={() => {
 85 |                     setPageIndex(Math.max(0, pageIndex - 1));
 86 |                 }}
 87 |             />
 88 |             <table className="min-w-full divide-y">
 89 |                 <thead className="bg-gray-50 dark:bg-gray-900">
 90 |                     <tr className="divide-x divide-gray-200 dark:divide-gray-700">
 91 |                         {metas.map((field, fIndex) => (
 92 |                             <th key={field.fid} className={""}>
 93 |                                 <div
 94 |                                     className={
 95 |                                         getHeaderClassNames(field) +
 96 |                                         " whitespace-nowrap py-3.5 px-6 text-left text-xs font-semibold text-gray-900 dark:text-gray-50 sm:pl-6"
 97 |                                     }
 98 |                                 >
 99 |                                     <b>{field.name || field.fid}</b>
100 |                                     <div>
101 |                                         <DropdownContext
102 |                                             options={semanticTypeList}
103 |                                             onSelect={(value) => {
104 |                                                 onMetaChange(field.fid, fIndex, {
105 |                                                     semanticType: value as IField["semanticType"],
106 |                                                 });
107 |                                             }}
108 |                                         >
109 |                                             <span
110 |                                                 className={
111 |                                                     "cursor-pointer inline-flex px-2.5 py-0.5 text-xs font-medium mt-1 rounded-full text-xs " +
112 |                                                     getSemanticColors(field)
113 |                                                 }
114 |                                             >
115 |                                                 {field.semanticType}
116 |                                                 <ChevronUpDownIcon className="ml-2 w-3" />
117 |                                             </span>
118 |                                         </DropdownContext>
119 |                                     </div>
120 |                                 </div>
121 |                             </th>
122 |                         ))}
123 |                     </tr>
124 |                 </thead>
125 |                 <tbody className="divide-y divide-gray-100 dark:divide-gray-700 bg-white dark:bg-zinc-900">
126 |                     {data.slice(from, to + 1).map((row, index) => (
127 |                         <tr className={"divide-x divide-gray-200 dark:divide-gray-700 " + (index % 2 ? "bg-gray-50 dark:bg-gray-900" : "")} key={index}>
128 |                             {metas.map((field) => (
129 |                                 <td
130 |                                     key={field.fid + index}
131 |                                     className={
132 |                                         getHeaderType(field) +
133 |                                         " whitespace-nowrap py-2 pl-4 pr-3 text-xs text-gray-500 dark:text-gray-300 sm:pl-6"
134 |                                     }
135 |                                 >
136 |                                     {`${row[field.fid]}`}
137 |                                 </td>
138 |                             ))}
139 |                         </tr>
140 |                     ))}
141 |                 </tbody>
142 |             </table>
143 |         </Container>
144 |     );
145 | };
146 | 
147 | export default DataTable;
148 | 


--------------------------------------------------------------------------------
/src/components/datasetCreation/index.tsx:
--------------------------------------------------------------------------------
  1 | import { useCallback, useRef, useState } from "react";
  2 | import { produce } from "immer";
  3 | import { IDataset, IRow } from "../../interface";
  4 | import { FileReader } from "@kanaries/web-data-loader";
  5 | import { inferDatasetMeta } from "../../utils/inferType";
  6 | import Modal from "../modal";
  7 | import DataTable from "./dataTable";
  8 | import UpgradeGuide from "../upgradeGuide";
  9 | import { hasAccess } from "../upgradeGuide/auth";
 10 | import { track } from "@vercel/analytics";
 11 | 
 12 | interface DatasetCreationProps {
 13 |     onDatasetCreated: (dataset: IDataset) => void;
 14 | }
 15 | 
 16 | export default function DatasetCreation(props: DatasetCreationProps) {
 17 |     const { onDatasetCreated } = props;
 18 |     const fileRef = useRef<HTMLInputElement>(null);
 19 |     const [modalOpen, setModalOpen] = useState(false);
 20 |     const [tmpDataset, setTmpDataset] = useState<IDataset | null>(null);
 21 |     const showTrigger = useRef<(show: boolean) => void>(null);
 22 | 
 23 |     const fileUpload = useCallback(
 24 |         (e: React.ChangeEvent<HTMLInputElement>) => {
 25 |             const files = e.target.files;
 26 |             if (files !== null) {
 27 |                 const file = files[0];
 28 |                 FileReader.csvReader({
 29 |                     file,
 30 |                     config: { type: "reservoirSampling", size: Infinity },
 31 |                     encoding: 'utf-8'
 32 |                 }).then((data) => {
 33 |                     const dataset = inferDatasetMeta(data as IRow[]);
 34 |                     // onDatasetCreated(dataset);
 35 |                     setModalOpen(true);
 36 |                     setTmpDataset(dataset);
 37 |                 });
 38 |             }
 39 |         },
 40 |         []
 41 |     );
 42 | 
 43 |     return (
 44 |         <div>
 45 |             <UpgradeGuide showTrigger={showTrigger} />
 46 |             <button
 47 |                 type="button"
 48 |                 className="ml-4 rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
 49 |                 onClick={() => {
 50 |                     if (showTrigger.current && !hasAccess()) {
 51 |                         showTrigger.current(true)
 52 |                         track("csvTrial", { path: window.location.href });
 53 |                     } else {
 54 |                         fileRef.current?.click();
 55 |                     }
 56 |                 }}
 57 |             >
 58 |                 Upload CSV Data
 59 |             </button>
 60 |             <input
 61 |                 type="file"
 62 |                 ref={fileRef}
 63 |                 className="hidden"
 64 |                 onChange={fileUpload}
 65 |             />
 66 |             <Modal
 67 |                 show={modalOpen}
 68 |                 onClose={() => {
 69 |                     setModalOpen(false);
 70 |                 }}
 71 |             >
 72 |                 {tmpDataset && (
 73 |                     <DataTable
 74 |                         data={tmpDataset.dataSource}
 75 |                         metas={tmpDataset.fields}
 76 |                         onMetaChange={(fid, fIndex, meta) => {
 77 |                             const nextDataset = produce(tmpDataset, (draft) => {
 78 |                                 draft.fields[fIndex] = {
 79 |                                     ...draft.fields[fIndex],
 80 |                                     ...meta,
 81 |                                 };
 82 |                             });
 83 |                             setTmpDataset(nextDataset);
 84 |                         }}
 85 |                     />
 86 |                 )}
 87 |                 <div>
 88 |                     <button
 89 |                         type="button"
 90 |                         className="ml-4 rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
 91 |                         onClick={() => {
 92 |                             if (tmpDataset) {
 93 |                                 onDatasetCreated(tmpDataset as IDataset);
 94 |                             }
 95 |                             setModalOpen(false);
 96 |                         }}
 97 |                     >
 98 |                         Confirm
 99 |                     </button>
100 |                 </div>
101 |             </Modal>
102 |         </div>
103 |     );
104 | }
105 | 


--------------------------------------------------------------------------------
/src/components/datasetCreation/pagination.tsx:
--------------------------------------------------------------------------------
 1 | interface PaginationProps {
 2 |     from: number;
 3 |     to: number;
 4 |     total: number;
 5 |     onPrev: () => void;
 6 |     onNext: () => void;
 7 | }
 8 | export default function Pagination(props: PaginationProps) {
 9 |     const { from, to, total, onNext, onPrev } = props;
10 |     return (
11 |         <nav
12 |             className="flex items-center justify-between border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-zinc-900 px-4 py-3 sm:px-6"
13 |             aria-label="Pagination"
14 |         >
15 |             <div className="hidden sm:block">
16 |                 <p className="text-sm text-gray-800 dark:text-gray-100">
17 |                     Showing <span className="font-medium">{from}</span> to{" "}
18 |                     <span className="font-medium">{to}</span> of{" "}
19 |                     <span className="font-medium">{total}</span> results
20 |                 </p>
21 |             </div>
22 |             <div className="flex flex-1 justify-between sm:justify-end">
23 |                 <button
24 |                     onClick={() => {
25 |                         onPrev();
26 |                     }}
27 |                     className="relative inline-flex items-center rounded-md border border-gray-300 bg-white dark:bg-zinc-900 px-2.5 py-1.5 text-xs font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800"
28 |                 >
29 |                     Last
30 |                 </button>
31 |                 <button
32 |                     onClick={() => {
33 |                         onNext();
34 |                     }}
35 |                     className="relative ml-3 inline-flex items-center rounded-md border border-gray-300 bg-white dark:bg-zinc-900  px-2.5 py-1.5 text-xs font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800"
36 |                 >
37 |                     Next
38 |                 </button>
39 |             </div>
40 |         </nav>
41 |     );
42 | }
43 | 


--------------------------------------------------------------------------------
/src/components/dropdownContext.tsx:
--------------------------------------------------------------------------------
 1 | import React, { Fragment } from "react";
 2 | import { Menu, Transition } from "@headlessui/react";
 3 | 
 4 | function classNames(...classes: string[]) {
 5 |     return classes.filter(Boolean).join(" ");
 6 | }
 7 | 
 8 | export interface IDropdownContextOption {
 9 |     label: string;
10 |     value: string;
11 |     disabled?: boolean;
12 | }
13 | interface IDropdownContextProps {
14 |     options?: IDropdownContextOption[];
15 |     disable?: boolean;
16 |     onSelect?: (value: string, index: number) => void;
17 |     children: React.ReactNode;
18 | }
19 | const DropdownContext: React.FC<IDropdownContextProps> = (props) => {
20 |     const { options = [], disable } = props;
21 | 
22 |     if (disable) {
23 |         return <Fragment>{props.children}</Fragment>;
24 |     }
25 | 
26 |     return (
27 |         <Menu as="span" className="relative block text-left">
28 |             <Menu.Button className="block w-full text-left">{props.children}</Menu.Button>
29 | 
30 |             <Transition
31 |                 as={Fragment}
32 |                 enter="transition ease-out duration-100"
33 |                 enterFrom="transform opacity-0 scale-95"
34 |                 enterTo="transform opacity-100 scale-100"
35 |                 leave="transition ease-in duration-75"
36 |                 leaveFrom="transform opacity-100 scale-100"
37 |                 leaveTo="transform opacity-0 scale-95"
38 |             >
39 |                 <Menu.Items className="absolute left-0 z-50 mt-2 w-56 origin-top-right rounded-md bg-white dark:bg-zinc-900  shadow-lg border border-gray-50 dark:border-gray-800 ring-1 ring-black ring-opacity-5 focus:outline-none">
40 |                     <div className="py-1">
41 |                         {options.map((option, index) => (
42 |                             <Menu.Item key={option.value}>
43 |                                 {(p) => (
44 |                                     <span
45 |                                         className={classNames(
46 |                                             p.active ? "bg-gray-100 text-gray-900 dark:bg-gray-800 dark:text-gray-50" : "text-gray-700 dark:text-gray-200",
47 |                                             "block px-4 py-2 text-sm"
48 |                                         )}
49 |                                         onClick={() => {
50 |                                             props.onSelect && !props.disable && props.onSelect(option.value, index);
51 |                                         }}
52 |                                     >
53 |                                     {option.label}
54 |                                     </span>
55 |                                 )}
56 |                             </Menu.Item>
57 |                         ))}
58 |                     </div>
59 |                 </Menu.Items>
60 |             </Transition>
61 |         </Menu>
62 |     );
63 | };
64 | 
65 | export default DropdownContext;
66 | 


--------------------------------------------------------------------------------
/src/components/modal.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useRef } from "react";
 2 | import styled from "styled-components";
 3 | import {
 4 |     XMarkIcon,
 5 | } from "@heroicons/react/24/outline";
 6 | 
 7 | const Background = styled.div({
 8 |     position: "fixed",
 9 |     left: 0,
10 |     top: 0,
11 |     width: "100vw",
12 |     height: "100vh",
13 |     backdropFilter: "blur(1px)",
14 |     zIndex: 25535,
15 | });
16 | 
17 | const Container = styled.div`
18 |     width: 98%;
19 |     @media (min-width: 600px) {
20 |         width: 80%;
21 |     }
22 |     @media (min-width: 1100px) {
23 |         width: 880px;
24 |     }
25 |     max-height: 800px;
26 |     overflow: auto;
27 |     > div.container {
28 |         padding: 0.5em 1em 1em 1em;
29 |     }
30 |     position: fixed;
31 |     left: 50%;
32 |     top: 50%;
33 |     transform: translate(-50%, -50%);
34 |     /* box-shadow: 0px 0px 12px 3px rgba(0, 0, 0, 0.19); */
35 |     border-radius: 4px;
36 |     z-index: 999;
37 | `;
38 | interface ModalProps {
39 |     onClose?: () => void;
40 |     show?: boolean;
41 |     title?: string;
42 |     children?: React.ReactNode;
43 | }
44 | const Modal: React.FC<ModalProps> = (props) => {
45 |     const { onClose, title, show } = props;
46 |     const prevMouseDownTimeRef = useRef(0);
47 |     return (
48 |         <Background
49 |             // This is a safer replacement of onClick handler.
50 |             // onClick also happens if the click event is begun by pressing mouse button
51 |             // at a different element and then released when the mouse is moved on the target element.
52 |             // This case is required to be prevented, especially disturbing when interacting
53 |             // with a Slider component.
54 |             className={
55 |                 "border border-gray-300 dark:border-gray-600 " +
56 |                 (show ? "block" : "hidden")
57 |             }
58 |             onMouseDown={() => (prevMouseDownTimeRef.current = Date.now())}
59 |             onMouseOut={() => (prevMouseDownTimeRef.current = 0)}
60 |             onMouseUp={() => {
61 |                 if (Date.now() - prevMouseDownTimeRef.current < 1000) {
62 |                     onClose?.();
63 |                 }
64 |             }}
65 |         >
66 |             <Container
67 |                 role="dialog"
68 |                 className="bg-white dark:bg-zinc-900 shadow-lg rounded-md border border-gray-100 dark:border-gray-800"
69 |                 onMouseDown={(e) => e.stopPropagation()}
70 |             >
71 |                 <div className="absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
72 |                     <button
73 |                         type="button"
74 |                         className="rounded-md bg-white dark:bg-zinc-900 text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
75 |                         onClick={() => {
76 |                             onClose?.();
77 |                         }}
78 |                     >
79 |                         <span className="sr-only">Close</span>
80 |                         <XMarkIcon className="h-6 w-6" aria-hidden="true" />
81 |                     </button>
82 |                 </div>
83 |                 <div className="px-6 pt-4 text-base font-semibold leading-6 text-gray-900 dark:text-gray-50">
84 |                     {title}
85 |                 </div>
86 |                 <div className="container">{props.children}</div>
87 |             </Container>
88 |         </Background>
89 |     );
90 | };
91 | 
92 | export default Modal;
93 | 


--------------------------------------------------------------------------------
/src/components/monaco/index.tsx:
--------------------------------------------------------------------------------
 1 | import * as monaco from 'monaco-editor';
 2 | import MonacoEditor, { loader } from '@monaco-editor/react';
 3 | import editorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker";
 4 | import jsonWorker from "monaco-editor/esm/vs/language/json/json.worker?worker";
 5 | import cssWorker from "monaco-editor/esm/vs/language/css/css.worker?worker";
 6 | import htmlWorker from "monaco-editor/esm/vs/language/html/html.worker?worker";
 7 | import tsWorker from "monaco-editor/esm/vs/language/typescript/ts.worker?worker";
 8 | 
 9 | 
10 | if (!self.MonacoEnvironment) {
11 |     self.MonacoEnvironment = {
12 |         getWorker(_, label) {
13 |             if (label === "json") {
14 |                 return new jsonWorker();
15 |             }
16 |             if (label === "css" || label === "scss" || label === "less") {
17 |                 return new cssWorker();
18 |             }
19 |             if (label === "html" || label === "handlebars" || label === "razor") {
20 |                 return new htmlWorker();
21 |             }
22 |             if (label === "typescript" || label === "javascript") {
23 |                 return new tsWorker();
24 |             }
25 |             return new editorWorker();
26 |         },
27 |     };
28 |     loader.config({ monaco });
29 |     loader.init();
30 | }
31 | 
32 | 
33 | export default MonacoEditor;


--------------------------------------------------------------------------------
/src/components/notify/index.tsx:
--------------------------------------------------------------------------------
  1 | import {
  2 |     Fragment,
  3 |     useState,
  4 |     createContext,
  5 |     useCallback,
  6 |     ReactElement,
  7 | } from "react";
  8 | import { Transition } from "@headlessui/react";
  9 | import { CheckCircleIcon } from "@heroicons/react/24/outline";
 10 | import { XMarkIcon } from "@heroicons/react/20/solid";
 11 | 
 12 | export interface INotification {
 13 |     title: string;
 14 |     message: string;
 15 |     type: "success" | "error" | "info" | "warning";
 16 | }
 17 | 
 18 | export const NotificationContext = createContext<{
 19 |     notify: (not: INotification, t: number) => void;
 20 | }>(null!);
 21 | 
 22 | function getNotificationIcon(type: INotification["type"]) {
 23 |     switch (type) {
 24 |         case "success":
 25 |             return (
 26 |                 <CheckCircleIcon
 27 |                     className="h-6 w-6 text-green-400"
 28 |                     aria-hidden="true"
 29 |                 />
 30 |             );
 31 |         case "error":
 32 |             return (
 33 |                 <XMarkIcon
 34 |                     className="h-6 w-6 text-red-400"
 35 |                     aria-hidden="true"
 36 |                 />
 37 |             );
 38 |         case "info":
 39 |             return (
 40 |                 <CheckCircleIcon
 41 |                     className="h-6 w-6 text-blue-400"
 42 |                     aria-hidden="true"
 43 |                 />
 44 |             );
 45 |         case "warning":
 46 |             return (
 47 |                 <CheckCircleIcon
 48 |                     className="h-6 w-6 text-yellow-400"
 49 |                     aria-hidden="true"
 50 |                 />
 51 |             );
 52 |     }
 53 | }
 54 | 
 55 | const NotificationWrapper: React.FC<{ children: ReactElement }> = (props) => {
 56 |     const [show, setShow] = useState(false);
 57 |     const [notification, setNotification] = useState<INotification | null>(
 58 |         null
 59 |     );
 60 | 
 61 |     const notify = useCallback((not: INotification, t: number) => {
 62 |         setShow(true);
 63 |         setNotification(not);
 64 |         setTimeout(() => {
 65 |             setShow(false);
 66 |         }, t);
 67 |     }, []);
 68 | 
 69 |     return (
 70 |         <NotificationContext.Provider value={{ notify }}>
 71 |             {props.children}
 72 |             {/* Global notification live region, render this permanently at the end of the document */}
 73 |             {notification && (
 74 |                 <div
 75 |                     aria-live="assertive"
 76 |                     className="pointer-events-none fixed inset-0 flex items-end px-4 py-6 sm:items-start sm:p-6"
 77 |                 >
 78 |                     <div className="flex w-full flex-col items-center space-y-4 sm:items-end">
 79 |                         {/* Notification panel, dynamically insert this into the live region when it needs to be displayed */}
 80 |                         <Transition
 81 |                             show={show}
 82 |                             as={Fragment}
 83 |                             enter="transform ease-out duration-300 transition"
 84 |                             enterFrom="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
 85 |                             enterTo="translate-y-0 opacity-100 sm:translate-x-0"
 86 |                             leave="transition ease-in duration-100"
 87 |                             leaveFrom="opacity-100"
 88 |                             leaveTo="opacity-0"
 89 |                         >
 90 |                             <div className="pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg bg-zinc-700 shadow-lg ring-1 ring-black ring-opacity-5">
 91 |                                 <div className="p-4">
 92 |                                     <div className="flex items-start">
 93 |                                         <div className="flex-shrink-0">
 94 |                                             {getNotificationIcon(
 95 |                                                 notification.type
 96 |                                             )}
 97 |                                         </div>
 98 |                                         <div className="ml-3 w-0 flex-1 pt-0.5">
 99 |                                             <p className="text-sm font-medium text-gray-50">
100 |                                                 {notification.title}
101 |                                             </p>
102 |                                             <p className="mt-1 text-sm text-gray-300">
103 |                                                 {notification.message}
104 |                                             </p>
105 |                                         </div>
106 |                                         <div className="ml-4 flex flex-shrink-0">
107 |                                             <button
108 |                                                 type="button"
109 |                                                 className="inline-flex rounded-md bg-zinc-900 text-gray-400 hover:text-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
110 |                                                 onClick={() => {
111 |                                                     setShow(false);
112 |                                                 }}
113 |                                             >
114 |                                                 <span className="sr-only">
115 |                                                     Close
116 |                                                 </span>
117 |                                                 <XMarkIcon
118 |                                                     className="h-5 w-5"
119 |                                                     aria-hidden="true"
120 |                                                 />
121 |                                             </button>
122 |                                         </div>
123 |                                     </div>
124 |                                 </div>
125 |                             </div>
126 |                         </Transition>
127 |                     </div>
128 |                 </div>
129 |             )}
130 |         </NotificationContext.Provider>
131 |     );
132 | };
133 | 
134 | export default NotificationWrapper;
135 | 


--------------------------------------------------------------------------------
/src/components/notify/useNotification.tsx:
--------------------------------------------------------------------------------
1 | import { useContext } from "react";
2 | import { NotificationContext } from ".";
3 | 
4 | export function useNotification() {
5 |     return useContext(NotificationContext);
6 | }


--------------------------------------------------------------------------------
/src/components/react-vega.tsx:
--------------------------------------------------------------------------------
 1 | import { useEffect, useRef } from "react";
 2 | import embed, { vega } from 'vega-embed';
 3 | import { IRow } from "../interface";
 4 | import { VegaTheme, useCurrentMediaTheme } from "../theme";
 5 | 
 6 | interface ReactVegaProps {
 7 |     spec: any;
 8 |     data?: IRow[];
 9 | }
10 | 
11 | const ReactVega: React.FC<ReactVegaProps> = ({ spec, data }) => {
12 |     const container = useRef<HTMLDivElement>(null);
13 | 
14 |     const theme = useCurrentMediaTheme();
15 | 
16 |     useEffect(() => {
17 |         if (container.current && data) {
18 |             spec.data = {
19 |                 name: 'dataSource'
20 |             }
21 |             embed(container.current, spec, { actions: false, config: VegaTheme[theme] }).then(res => {
22 |                 res.view.change('dataSource', vega.changeset().remove(() => true).insert(data))
23 |                 res.view.resize();
24 |                 res.view.runAsync();
25 |             })
26 |         }
27 |     }, [spec, data, theme])
28 |     return <div ref={container}></div>
29 | };
30 | 
31 | export default ReactVega;


--------------------------------------------------------------------------------
/src/components/selectMenu.tsx:
--------------------------------------------------------------------------------
  1 | import { Fragment } from "react";
  2 | import { Listbox, Transition } from "@headlessui/react";
  3 | import { CheckIcon, ChevronUpDownIcon } from "@heroicons/react/20/solid";
  4 | 
  5 | function classNames(...classes: string[]) {
  6 |     return classes.filter(Boolean).join(" ");
  7 | }
  8 | 
  9 | interface MenuProps {
 10 |     label: string;
 11 |     items: { key: string; name: string }[];
 12 |     selectedKey: string;
 13 |     onChange: (key: string) => void;
 14 | }
 15 | 
 16 | export default function SelectMenu(props: MenuProps) {
 17 |     const { items, selectedKey, onChange, label } = props;
 18 | 
 19 |     const selectedItem = items.find((item) => item.key === selectedKey);
 20 | 
 21 |     return (
 22 |         <Listbox value={selectedKey} onChange={onChange}>
 23 |             {({ open }) => (
 24 |                 <>
 25 |                     <Listbox.Label className="block text-sm font-medium leading-6 text-gray-900 mr-2">
 26 |                         {label}
 27 |                     </Listbox.Label>
 28 |                     <div className="relative mt-2">
 29 |                         <Listbox.Button className="relative w-full cursor-default rounded-md bg-white dark:bg-zinc-900 py-1.5 pl-3 pr-10 text-left text-gray-900 dark:text-gray-50 shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-600 sm:text-sm sm:leading-6">
 30 |                             <span className="block truncate">
 31 |                                 {selectedItem?.name}
 32 |                             </span>
 33 |                             <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
 34 |                                 <ChevronUpDownIcon
 35 |                                     className="h-5 w-5 text-gray-400"
 36 |                                     aria-hidden="true"
 37 |                                 />
 38 |                             </span>
 39 |                         </Listbox.Button>
 40 | 
 41 |                         <Transition
 42 |                             show={open}
 43 |                             as={Fragment}
 44 |                             leave="transition ease-in duration-100"
 45 |                             leaveFrom="opacity-100"
 46 |                             leaveTo="opacity-0"
 47 |                         >
 48 |                             <Listbox.Options className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white dark:bg-zinc-900 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
 49 |                                 {items.map((item) => (
 50 |                                     <Listbox.Option
 51 |                                         key={item.key}
 52 |                                         className={({ active }) =>
 53 |                                             classNames(
 54 |                                                 active
 55 |                                                     ? "bg-indigo-600 text-white"
 56 |                                                     : "text-gray-900 dark:text-gray-50",
 57 |                                                 "relative cursor-default select-none py-2 pl-3 pr-9"
 58 |                                             )
 59 |                                         }
 60 |                                         value={item.key}
 61 |                                     >
 62 |                                         {({ selected, active }) => (
 63 |                                             <>
 64 |                                                 <span
 65 |                                                     className={classNames(
 66 |                                                         selected
 67 |                                                             ? "font-semibold"
 68 |                                                             : "font-normal",
 69 |                                                         "block truncate"
 70 |                                                     )}
 71 |                                                 >
 72 |                                                     {item.name}
 73 |                                                 </span>
 74 | 
 75 |                                                 {selected ? (
 76 |                                                     <span
 77 |                                                         className={classNames(
 78 |                                                             active
 79 |                                                                 ? "text-white"
 80 |                                                                 : "text-indigo-600",
 81 |                                                             "absolute inset-y-0 right-0 flex items-center pr-4"
 82 |                                                         )}
 83 |                                                     >
 84 |                                                         <CheckIcon
 85 |                                                             className="h-5 w-5"
 86 |                                                             aria-hidden="true"
 87 |                                                         />
 88 |                                                     </span>
 89 |                                                 ) : null}
 90 |                                             </>
 91 |                                         )}
 92 |                                     </Listbox.Option>
 93 |                                 ))}
 94 |                             </Listbox.Options>
 95 |                         </Transition>
 96 |                     </div>
 97 |                 </>
 98 |             )}
 99 |         </Listbox>
100 |     );
101 | }
102 | 


--------------------------------------------------------------------------------
/src/components/spinner.tsx:
--------------------------------------------------------------------------------
 1 | export default function Spinner() {
 2 |     return (
 3 |         <svg className="animate-spin ml-2 mr-2 h-5 w-5 text-white" viewBox="0 0 24 24">
 4 |             <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
 5 |             <path
 6 |                 className="opacity-75"
 7 |                 fill="currentColor"
 8 |                 d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
 9 |             ></path>
10 |         </svg>
11 |     );
12 | }


--------------------------------------------------------------------------------
/src/components/upgradeGuide/auth.ts:
--------------------------------------------------------------------------------
1 | const PROVIDERS = [
2 |     'kanaries.net',
3 |     // 'localhost'
4 | ]
5 | export function hasAccess () {
6 |     return PROVIDERS.includes(location.hostname.split('.').slice(-2).join('.'))
7 | }


--------------------------------------------------------------------------------
/src/components/upgradeGuide/index.tsx:
--------------------------------------------------------------------------------
  1 | import React, { Fragment, useEffect, useState } from "react";
  2 | import Modal from "../modal";
  3 | import { CheckIcon } from "@heroicons/react/20/solid";
  4 | import { track } from "@vercel/analytics";
  5 | 
  6 | const includedFeatures = ["Customized Datasets", "Editable charts", "Chat to Charts", "Sharing"];
  7 | 
  8 | interface UpgradeGuideProps {
  9 |     showTrigger: {
 10 |         current: (show: boolean) => void;
 11 |     }
 12 | }
 13 | const UpgradeGuide: React.FC<UpgradeGuideProps> = props => {
 14 |     const [show, setShow] = useState<boolean>(false);
 15 | 
 16 |     useEffect(() => {
 17 |         props.showTrigger.current = (s: boolean) => {
 18 |             setShow(s)
 19 |         }
 20 |     }, [props.showTrigger])
 21 | 
 22 |     return (
 23 |         <Fragment>
 24 |             <Modal
 25 |                 show={show}
 26 |                 onClose={() => {
 27 |                     setShow(false);
 28 |                 }}
 29 |             >
 30 |                 <div className="p-8">
 31 |                     <div className="">
 32 |                         <div className="mx-auto max-w-7xl px-6 px-8">
 33 |                             <div className="mx-auto max-w-2xl text-center">
 34 |                                 <h2 className="text-3xl font-bold tracking-tight text-gray-900 dark:text-gray-50 text-4xl">
 35 |                                     Analysis your datasets in VizGPT
 36 |                                 </h2>
 37 |                                 <p className="mt-6 text-lg leading-8 text-gray-600 dark:text-gray-400">
 38 |                                 Purchase an early bird special and receive a year of our Pro Plan plus a 50% recurring discount when we launch in November.
 39 |                                 </p>
 40 |                             </div>
 41 |                             <div className="mx-auto my-6 max-w-2xl rounded-3xl ring-1 ring-gray-200 dark:ring-gray-700 lg:mx-0 lg:flex lg:max-w-none">
 42 |                                 <div className="p-2 p-6 lg:flex-auto">
 43 |                                     <h3 className="text-2xl font-bold tracking-tight text-gray-900 dark:text-gray-50">
 44 |                                         vizGPT Plus
 45 |                                     </h3>
 46 |                                     <p className="mt-2 text-base leading-7 text-gray-600 dark:text-gray-300">
 47 |                                         Using VizGPT to analysis your own dataset in vizGPT.
 48 |                                     </p>
 49 |                                     <div className="mt-4 flex items-center gap-x-4">
 50 |                                         <h4 className="flex-none text-sm font-semibold leading-6 text-indigo-600 dark:text-indigo-400">
 51 |                                             What’s included
 52 |                                         </h4>
 53 |                                         <div className="h-px flex-auto bg-gray-100 dark:bg-gray-700" />
 54 |                                     </div>
 55 |                                     <ul
 56 |                                         role="list"
 57 |                                         className="mt-2 grid grid-cols-1 gap-4 text-sm leading-6 text-gray-600 dark:text-gray-300 sm:grid-cols-2 sm:gap-6"
 58 |                                     >
 59 |                                         {includedFeatures.map((feature) => (
 60 |                                             <li key={feature} className="flex gap-x-3">
 61 |                                                 <CheckIcon
 62 |                                                     className="h-6 w-5 flex-none text-indigo-600 dark:text-indigo-400"
 63 |                                                     aria-hidden="true"
 64 |                                                 />
 65 |                                                 {feature}
 66 |                                             </li>
 67 |                                         ))}
 68 |                                     </ul>
 69 |                                 </div>
 70 |                                 <div className="-mt-2 p-2 lg:mt-0 max-w-md flex-shrink-0">
 71 |                                     <div className="rounded-2xl bg-gray-50 dark:bg-gray-800 py-4 text-center ring-1 ring-inset ring-gray-900/5">
 72 |                                         <div className="mx-auto max-w-xs px-4">
 73 |                                             <p className="text-base font-semibold text-gray-600 dark:text-gray-300">
 74 |                                             Become a early bird of vizGPT Plus
 75 |                                             </p>
 76 |                                             <p className="mt-6 flex items-baseline justify-center gap-x-2">
 77 |                                                 <span className="text-5xl font-bold tracking-tight text-gray-900 dark:text-gray-50">$48</span>
 78 |                                                 <span className="text-sm font-semibold leading-6 tracking-wide text-gray-600 dark:text-gray-300">
 79 |                                                     USD/year
 80 |                                                 </span>
 81 |                                             </p>
 82 |                                             <a
 83 |                                                 className="mt-10 block w-full rounded-md bg-indigo-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
 84 |                                                 onClick={() => {
 85 |                                                     track('vizgpt-plus-reserve')
 86 |                                                     setTimeout(() => {
 87 |                                                         window.open("https://pay.kanaries.net/b/9AQ6qj6Jtd942EU4gg", "_blank");
 88 |                                                     }, 300)
 89 |         
 90 |                                                 }}
 91 |                                             >
 92 |                                                 Reserve
 93 |                                             </a>
 94 |                                             <p className="mt-6 text-xs leading-5 text-gray-600 dark:text-gray-400">
 95 |                                                 Purchase an early bird special and receive a year of our Pro Plan plus a 50% recurring discount when we launch in November
 96 |                                             </p>
 97 |                                         </div>
 98 |                                     </div>
 99 |                                 </div>
100 |                             </div>
101 |                         </div>
102 |                     </div>
103 |                 </div>
104 |             </Modal>
105 |         </Fragment>
106 |     );
107 | };
108 | 
109 | export default UpgradeGuide;
110 | 


--------------------------------------------------------------------------------
/src/components/vizChat.tsx:
--------------------------------------------------------------------------------
  1 | import { useEffect, useRef } from "react";
  2 | import { IDataset } from "../interface";
  3 | import { IMessage } from "../services/llm";
  4 | import { getValidVegaSpec } from "../utils";
  5 | import ReactVega from "./react-vega";
  6 | import { HandThumbDownIcon, HandThumbUpIcon, TrashIcon, UserIcon } from "@heroicons/react/20/solid";
  7 | import { CpuChipIcon } from "@heroicons/react/24/outline";
  8 | import DataTable from "./datasetCreation/dataTable";
  9 | 
 10 | interface VizChatProps {
 11 |     messages: IMessage[];
 12 |     dataset: IDataset;
 13 |     onDelete?: (message: IMessage, mIndex: number) => void;
 14 |     onUserFeedback?: (messagePair: IMessage[], mIndex: number, action: string) => void;
 15 | }
 16 | 
 17 | const VizChat: React.FC<VizChatProps> = ({ messages, dataset, onDelete, onUserFeedback }) => {
 18 |     const container = useRef<HTMLDivElement>(null);
 19 |     useEffect(() => {
 20 |         if (container.current) {
 21 |             container.current.scrollTop = container.current.scrollHeight;
 22 |         }
 23 |     }, [messages]);
 24 |     return (
 25 |         <div className="border-2 border-zinc-100 dark:border-zinc-800 overflow-y-auto" ref={container} style={{ maxHeight: "80vh" }}>
 26 |             {messages.map((message, index) => {
 27 |                 if (message.role === "assistant") {
 28 |                     const spec = getValidVegaSpec(message.content, dataset);
 29 |                     if (spec) {
 30 |                         return (
 31 |                             <div className="p-4 flex justify-top" key={index}>
 32 |                                 <div className="grow-0">
 33 |                                     <div className="inline-block h-10 w-10 rounded-full mx-4 bg-indigo-500 text-white flex items-center justify-center">
 34 |                                         <CpuChipIcon className="w-6" />
 35 |                                     </div>
 36 |                                 </div>
 37 |                                 <div className="grow pl-8">
 38 |                                     <ReactVega spec={spec} data={dataset.dataSource ?? []} />
 39 |                                 </div>
 40 |                                 <div className="float-right flex gap-4 items-start">
 41 |                                     <HandThumbUpIcon
 42 |                                         className="w-4 text-gray-500 dark:text-gray-300 cursor-pointer hover:scale-125"
 43 |                                         onClick={() => {
 44 |                                             onUserFeedback &&
 45 |                                                 onUserFeedback([messages[index - 1], message], index, "like");
 46 |                                         }}
 47 |                                     />
 48 |                                     <HandThumbDownIcon
 49 |                                         className="w-4 text-gray-500 dark:text-gray-300 cursor-pointer hover:scale-125"
 50 |                                         onClick={() => {
 51 |                                             onUserFeedback &&
 52 |                                                 onUserFeedback([messages[index - 1], message], index, "dislike");
 53 |                                         }}
 54 |                                     />
 55 |                                     <TrashIcon
 56 |                                         className="w-4 text-gray-500 dark:text-gray-300 cursor-pointer hover:scale-125"
 57 |                                         onClick={() => {
 58 |                                             onDelete && onDelete(message, index);
 59 |                                         }}
 60 |                                     />
 61 |                                 </div>
 62 |                             </div>
 63 |                         );
 64 |                     } else {
 65 |                         return (
 66 |                             <div className="p-4 flex justify-top" key={index}>
 67 |                                 <div className="grow-0">
 68 |                                     <div className="inline-block h-10 w-10 rounded-full mx-4 bg-indigo-500 text-white flex items-center justify-center">
 69 |                                         <CpuChipIcon className="w-6" />
 70 |                                     </div>
 71 |                                 </div>
 72 |                                 <div className="grow pl-8 overflow-x-auto">
 73 |                                     <p>{message.content}</p>
 74 |                                     <DataTable
 75 |                                         data={dataset.dataSource}
 76 |                                         metas={dataset.fields}
 77 |                                         onMetaChange={() => {
 78 |                                             console.log("meta changed");
 79 |                                         }}
 80 |                                     />
 81 |                                 </div>
 82 |                             </div>
 83 |                         );
 84 |                     }
 85 |                 }
 86 |                 return (
 87 |                     <div className="p-4 bg-zinc-100 dark:bg-zinc-800 flex" key={index}>
 88 |                         <div className="grow-0">
 89 |                             <div className="inline-block h-10 w-10 rounded-full mx-4 bg-green-500 text-white flex items-center justify-center">
 90 |                                 <UserIcon className="w-6" />
 91 |                             </div>
 92 |                         </div>
 93 |                         <div className="grow pl-8">
 94 |                             <p>{message.content}</p>
 95 |                         </div>
 96 |                         <div className="float-right">
 97 |                             <TrashIcon
 98 |                                 className="w-4 text-gray-500 dark:text-gray-300 cursor-pointer hover:scale-125"
 99 |                                 onClick={() => {
100 |                                     onDelete && onDelete(message, index);
101 |                                 }}
102 |                             />
103 |                         </div>
104 |                     </div>
105 |                 );
106 |             })}
107 |         </div>
108 |     );
109 | };
110 | 
111 | export default VizChat;
112 | 


--------------------------------------------------------------------------------
/src/components/welcomePrompt.tsx:
--------------------------------------------------------------------------------
 1 | import { IField } from "../interface";
 2 | 
 3 | interface WelcomePromptProps {
 4 |     metas: IField[];
 5 |     onPromptClick?: (prompt: string) => void;
 6 | }
 7 | export function WelcomePrompt(props: WelcomePromptProps) {
 8 |     const { metas, onPromptClick } = props;
 9 |     const measure = metas.find((meta) => meta.semanticType === "quantitative");
10 |     const dimension =
11 |         metas.find((meta) => meta.semanticType === "temporal") ||
12 |         metas.find((meta) => meta.semanticType === "nominal");
13 |     const prompts: string[] = [
14 |         `Show the distribution of ${measure ? measure.name : metas[0].name}.`,
15 |         `How ${measure.name} diffs in ${dimension.name} ?`,
16 |         `Recommend a random chart from this dataset for me.`,
17 |     ];
18 |     return (
19 |         <div className="mx-auto grid grid-cols-3 py-4 text-sm">
20 |             {prompts.map((prompt, pIndex) => {
21 |                 return (
22 |                     <div
23 |                         onClick={() => {
24 |                             if (onPromptClick) {
25 |                                 onPromptClick(prompt);
26 |                             }
27 |                         }}
28 |                         key={pIndex}
29 |                         className="border border-gray-200 dark:border-gray-700 p-4 m-2 rounded-md text-gray-700 dark:text-gray-200 hover:shadow-lg cursor-pointer"
30 |                     >
31 |                         <p>{prompt}</p>
32 |                     </div>
33 |                 );
34 |             })}
35 |         </div>
36 |     );
37 | }
38 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | html {
 6 |     margin: 0px;
 7 |     padding: 0px;
 8 |     background-color: #fff;
 9 | }
10 | 
11 | @media (prefers-color-scheme: dark) {
12 |     html {
13 |         background-color: #18181b;
14 |     }
15 | }
16 | 
17 | body {
18 |     /* font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
19 |       'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
20 |       sans-serif; */
21 |     /* -webkit-font-smoothing: antialiased;
22 |     -moz-osx-font-smoothing: grayscale; */
23 |     margin: 0px;
24 |     padding: 0px;
25 | }


--------------------------------------------------------------------------------
/src/interface.ts:
--------------------------------------------------------------------------------
 1 | export type ISemanticType = 'quantitative' | 'nominal' | 'ordinal' | 'temporal';
 2 | 
 3 | export interface IField {
 4 |     fid: string;
 5 |     name: string;
 6 |     semanticType: ISemanticType;
 7 | }
 8 | 
 9 | export interface IRow {
10 |     [key: string]: any;
11 | }
12 | 
13 | export interface IDataset {
14 |     fields: IField[];
15 |     dataSource: IRow[];
16 | }
17 | export type IDarkMode = 'media' | 'light' | 'dark';
18 | 


--------------------------------------------------------------------------------
/src/main.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import ReactDOM from "react-dom/client";
 3 | import App from "./App";
 4 | import "./index.css";
 5 | import { inject, track } from "@vercel/analytics";
 6 | import NotificationWrapper from "./components/notify";
 7 | 
 8 | inject();
 9 | 
10 | track("pageview", {
11 |     path: window.location.href,
12 | });
13 | 
14 | ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
15 |     <React.StrictMode>
16 |       <NotificationWrapper>
17 |         <App />
18 |       </NotificationWrapper>
19 |     </React.StrictMode>
20 | );
21 | 


--------------------------------------------------------------------------------
/src/services/llm.ts:
--------------------------------------------------------------------------------
 1 | import { IField } from "../interface";
 2 | 
 3 | export interface IMessage {
 4 |     role: string;
 5 |     content: string;
 6 | }
 7 | export interface IResponse {
 8 |     id: string;
 9 |     object: string;
10 |     model: string;
11 |     usage: {
12 |         prompt_tokens: number;
13 |         completion_tokens: number;
14 |         total_tokens: number;
15 |     };
16 |     choices: { message: { role: string; content: string } }[];
17 | }
18 | 
19 | export async function chatCompletation(
20 |     messages: IMessage[], metas: IField[]
21 | ): Promise<IResponse> {
22 |     const url = `/api/vizchat`;
23 |     const res = await fetch(url, {
24 |         method: "POST",
25 |         headers: {
26 |             "Content-Type": "application/json",
27 |         },
28 |         body: JSON.stringify({
29 |             messages,
30 |             metas
31 |         }),
32 |     });
33 |     const result = (await res.json()) as {
34 |         data: IResponse;
35 |         success: boolean;
36 |         message?: string;
37 |     };
38 |     if (result.success) {
39 |         return result.data;
40 |     } else {
41 |         throw new Error(result.message ?? "Unknown error");
42 |     }
43 | }
44 | 


--------------------------------------------------------------------------------
/src/theme.ts:
--------------------------------------------------------------------------------
 1 | 
 2 | import { useEffect, useState } from "react";
 3 | import { IDarkMode } from "./interface";
 4 | 
 5 | const DEFAULT_COLOR = "#5B8FF9";
 6 | const DARK_COMMON_DESIGN = {
 7 |     background: "transparent",
 8 |     header: {
 9 |         titleColor: "#d1d5db", // change title color to white
10 |         labelColor: "#d1d5db", // change label color to white
11 |     },
12 |     axis: {
13 |         gridColor: "#666",
14 |         domainColor: "#d1d5db", // change axis color to white
15 |         tickColor: "#d1d5db", // change tick color to white
16 |         labelColor: "#d1d5db", // change label color to white
17 |         titleColor: "#d1d5db", // change title color to white
18 |     },
19 |     legend: {
20 |         labelColor: "#d1d5db", // change legend label color to white
21 |         titleColor: "#d1d5db" // change legend title color to white
22 |     },
23 |     view: {
24 |         stroke: '#666'
25 |     }
26 | }
27 | export const VegaTheme = {
28 |     light: {
29 |         background: "transparent",
30 |     },
31 |     dark: DARK_COMMON_DESIGN
32 | } as const;
33 | 
34 | export function currentMediaTheme(): "dark" | "light" {
35 |     if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
36 |         return "dark";
37 |     } else {
38 |         return "light";
39 |     }
40 | }
41 | 
42 | export function useCurrentMediaTheme(mode: IDarkMode | undefined = 'media'): "dark" | "light" {
43 |     const [theme, setTheme] = useState<"dark" | "light">(mode === 'media' ? currentMediaTheme() : mode);
44 | 
45 |     useEffect(() => {
46 |         if (mode === 'media') {
47 |             const mediaQuery = window.matchMedia?.("(prefers-color-scheme: dark)") as MediaQueryList | undefined;
48 |             const listener = (e: MediaQueryListEvent) => {
49 |                 setTheme(e.matches ? "dark" : "light");
50 |             };
51 |             mediaQuery?.addEventListener("change", listener);
52 |             return () => {
53 |                 mediaQuery?.removeEventListener("change", listener);
54 |             };
55 |         } else {
56 |             setTheme(mode);
57 |         }
58 |     }, [mode]);
59 | 
60 |     return theme;
61 | }
62 | 


--------------------------------------------------------------------------------
/src/utils/index.ts:
--------------------------------------------------------------------------------
 1 | import { IDataset } from "../interface";
 2 | 
 3 | export function matchQuote(str: string, left: string, right: string) {
 4 |     let stack = 0;
 5 |     let start = -1;
 6 |     let end = -1;
 7 |     for (let i = 0; i < str.length; i++) {
 8 |         if (str[i] === left) {
 9 |             if (stack === 0) {
10 |                 start = i;
11 |             }
12 |             stack++;
13 |         }
14 |         if (str[i] === right) {
15 |             stack--;
16 |             if (stack === 0) {
17 |                 end = i;
18 |                 break;
19 |             }
20 |         }
21 |     }
22 |     if (start !== -1 && end !== -1) {
23 |         return str.substring(start, end + 1);
24 |     }
25 |     return null;
26 | }
27 | 
28 | type JsonValue = string | number | boolean | null | JsonArray | JsonObject;
29 | type JsonObject = { [key: string]: JsonValue };
30 | type JsonArray = Array<JsonValue>;
31 | type Callback = (key: string, value: JsonValue, node: JsonObject) => void;
32 | 
33 | function traverseJson(json: JsonValue, callback: Callback, prefix: string, parent: JsonObject | JsonArray | null = null): void {
34 |   if (typeof json === 'object' && json !== null) {
35 |     if (Array.isArray(json)) {
36 |       (json as JsonArray).forEach((value, index) => {
37 |         const newPrefix = `${prefix}[${index}]`;
38 |         traverseJson(value, callback, newPrefix, json);
39 |       });
40 |     } else {
41 |       Object.entries(json as JsonObject).forEach(([key, value]) => {
42 |         const newPrefix = prefix ? `${prefix}.${key}` : key;
43 |         traverseJson(value, callback, newPrefix, json as JsonObject);
44 |       });
45 |     }
46 |   } else {
47 |     if (parent !== null && !Array.isArray(parent)) {
48 |       callback(prefix, json, parent);
49 |     }
50 |   }
51 | }
52 | 
53 | export function getValidVegaSpec (content: string, dataset: IDataset): object | null {
54 |     const raw = matchQuote(content, '{', '}');
55 |     if (raw) {
56 |         try {
57 |             const spec = JSON.parse(raw);
58 |             traverseJson(spec, (k, v, fieldDef) => {
59 |                 // console.log({ k, v, fieldDef })
60 |                 if (fieldDef.field) {
61 |                     const fn = (fieldDef.aggregate || fieldDef.timeUnit || (fieldDef.bin && 'bin')) as string
62 |                     const field = dataset.fields.find(f => f.name === v);
63 |                     if (!field) {
64 |                         return;
65 |                     }
66 |                     if (fn) {
67 |                         fieldDef.title = `${fn.toUpperCase()}(${field.name})`;
68 |                     } else {
69 |                         fieldDef.title = field.name;
70 |                     }
71 |                     fieldDef.field = field.fid
72 |                 }
73 |             }, '')
74 |             return spec
75 |         } catch (e) {
76 |             return null
77 |         }
78 |     }
79 |     return null;
80 | }


--------------------------------------------------------------------------------
/src/utils/inferType.ts:
--------------------------------------------------------------------------------
 1 | import { IDataset, IField, IRow, ISemanticType } from "../interface";
 2 | 
 3 | const COMMON_TIME_FORMAT: RegExp[] = [
 4 |     /^\d{4}-\d{2}-\d{2}$/, // YYYY-MM-DD
 5 |     /^\d{2}\/\d{2}\/\d{4}$/, // MM/DD/YYYY
 6 |     /^\d{2}\/\d{2}\/\d{4}$/, // DD/MM/YYYY
 7 |     /^\d{4}\/\d{2}\/\d{2}$/, // YYYY/MM/DD
 8 |     /^\d{4}\.\d{2}\.\d{2}$/, // YYYY.MM.DD
 9 |     /^\d{4}-\d{2}-\d{2}\s\d{2}:\d{2}:\d{2}$/, // YYYY-MM-DD HH:MM:SS
10 |     /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}$/, // YYYY-MM-DDTHH:MM:SS (ISO-8601)
11 | ];
12 | 
13 | /**
14 |  * check if this array is a date time array based on some common date format
15 |  * @param data string array
16 |  * @returns
17 |  */
18 | export function isDateTimeArray(data: string[]): boolean {
19 |     let isDateTime = true;
20 |     for (const d of data) {
21 |         let isDateTimeItem = false;
22 |         for (const r of COMMON_TIME_FORMAT) {
23 |             if (r.test(d)) {
24 |                 isDateTimeItem = true;
25 |                 break;
26 |             }
27 |         }
28 |         if (!isDateTimeItem) {
29 |             isDateTime = false;
30 |             break;
31 |         }
32 |     }
33 |     return isDateTime;
34 | }
35 | 
36 | export function isNumericArray(data: any[]): boolean {
37 |     return data.every((item) => {
38 |         // Check if the item is already a number
39 |         if (typeof item === 'number') {
40 |             return true;
41 |         }
42 | 
43 |         // Check if the item can be converted into a number
44 |         const number = parseFloat(item);
45 |         return !isNaN(number) && isFinite(item);
46 |     });
47 | }
48 | 
49 | export function inferSemanticType(data: IRow[], fid: string): ISemanticType {
50 |     const values = data.map((row) => row[fid]);
51 | 
52 |     let st: ISemanticType = isNumericArray(values) ? 'quantitative' : 'nominal';
53 |     if (st === 'nominal') {
54 |         if (isDateTimeArray(data.map((row) => `${row[fid]}`))) st = 'temporal';
55 |     }
56 |     return st;
57 | }
58 | 
59 | export function inferDatasetMeta (data: IRow[]): IDataset {
60 |     if (data.length === 0) {
61 |         return {
62 |             fields: [],
63 |             dataSource: data
64 |         }
65 |     }
66 |     const keys = Object.keys(data[0])
67 |     const fields: IField[] = keys.map(key => {
68 |         const semanticType = inferSemanticType(data, key)
69 |         return {
70 |             fid: key,
71 |             name: key,
72 |             semanticType: semanticType
73 |         }
74 |     })
75 |     return {
76 |         fields,
77 |         dataSource: data
78 |     }
79 | }


--------------------------------------------------------------------------------
/src/utils/messageData.ts:
--------------------------------------------------------------------------------
 1 | import { useEffect } from "react";
 2 | import { IDataset, IField, IRow } from "../interface";
 3 | 
 4 | interface IDataMessage {
 5 |     data: IRow[];
 6 |     metas: IField[];
 7 | }
 8 | export function useMessageData (datasetCreateHandler: (ds: IDataset) => void) {
 9 |     useEffect(() => {
10 |         const handler = (ev: MessageEvent<IDataMessage>) => {
11 |             const msg = ev.data;
12 |             const { data, metas } = msg;
13 |             if (data instanceof Array && metas instanceof Array) {
14 |                 datasetCreateHandler({
15 |                     dataSource: data,
16 |                     fields: metas.map(f => ({
17 |                         fid: f.fid,
18 |                         name: f.name ?? f.fid,
19 |                         semanticType: f.semanticType
20 |                     }))
21 |                 })
22 |                 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
23 |                 // @ts-ignore
24 |                 ev.source.postMessage(true, ev.origin)
25 |             }
26 |             
27 | 
28 |         }
29 |         window.addEventListener('message', handler);
30 |         return () => {
31 |             window.removeEventListener('message', handler)
32 |         }
33 |     }, [datasetCreateHandler])
34 | }


--------------------------------------------------------------------------------
/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | import forms from "@tailwindcss/forms";
 2 | /** @type {import('tailwindcss').Config} */
 3 | export default {
 4 |     darkMode: "media",
 5 |     content: ["./src/**/*.{html,ts,tsx}"],
 6 |     theme: {
 7 |         extend: {},
 8 |     },
 9 |     safelist: [
10 |         {
11 |             pattern: /(bg|border)-(indigo)-([1-9]00)/,
12 |         }
13 |     ],
14 |     plugins: [forms],
15 | };
16 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ESNext",
 4 |     "lib": ["DOM", "DOM.Iterable", "ESNext"],
 5 |     "module": "ESNext",
 6 |     "skipLibCheck": true,
 7 | 
 8 |     /* Bundler mode */
 9 |     "moduleResolution": "node",
10 |     "resolveJsonModule": true,
11 |     "isolatedModules": true,
12 |     "noEmit": true,
13 |     "jsx": "react-jsx",
14 |     "allowSyntheticDefaultImports": true,
15 |   },
16 |   "include": ["src", "api"],
17 |   "references": [{ "path": "./tsconfig.node.json" }]
18 | }
19 | 


--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "composite": true,
 4 |     "skipLibCheck": true,
 5 |     "module": "ESNext",
 6 |     "moduleResolution": "bundler",
 7 |     "allowSyntheticDefaultImports": true
 8 |   },
 9 |   "include": ["vite.config.ts"]
10 | }
11 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 | 
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 |   plugins: [react()],
7 | })
8 | 


--------------------------------------------------------------------------------