ChatGPT app

docs/data/pages.ts

@@ -59,6 +59,14 @@ const pages: MuiPage[] = [
     pathname: '/toolpad/deployment',
     icon: 'BuildIcon',
   },
+  {
+    pathname: '/toolpad/examples',
+    icon: 'DescriptionIcon',
+    children: [
+      { pathname: '/toolpad/examples/user-admin-app' },
+      { pathname: '/toolpad/examples/chatGPT' },
+    ],
+  },
   // {
   //   pathname: '/toolpad/versioning-and-deploying',
   //   title: 'Versioning & deploying [TODO]',

docs/data/toolpad/examples/user-admin-app.md

@@ -0,0 +1,7 @@
+# Admin app example
+
+<p class="description">TBD</p>
+
+Example showcasing a CRUD admin app.
+
+Check out the [codebase]()

docs/pages/toolpad/examples/user-admin-app.js

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import {
+  demos,
+  docs,
+  demoComponents,
+} from '../../../data/toolpad/examples/user-admin-app.md?@mui/markdown';
+
+export default function Page() {
+  return <MarkdownDocs demos={demos} docs={docs} demoComponents={demoComponents} disableAd />;
+}

examples/chatGPT/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "chatGPT",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "toolpad dev",
+    "build": "toolpad build",
+    "start": "toolpad start"
+  },
+  "dependencies": {
+    "@mui/toolpad": "^0.1.7",
+    "openai": "^3.2.1"
+  }
+}

examples/chatGPT/toolpad/.gitignore

@@ -0,0 +1 @@
+.generated

examples/chatGPT/toolpad/pages/page/page.yml

@@ -0,0 +1,140 @@
+apiVersion: v1
+kind: page
+spec:
+  id: ux0chdh
+  title: Default page
+  content:
+    - component: PageRow
+      name: pageRow
+      children:
+        - component: TextField
+          name: textField1
+          props:
+            fullWidth: true
+            label: Write prompt here..
+          layout:
+            columnSize: 1.6782407407407407
+        - component: Button
+          name: button1
+          layout:
+            columnSize: 0.32175925925925924
+          props:
+            onClick:
+              $$jsExpressionAction: >+
+                const storedThread =
+                JSON.parse(localStorage.getItem("gptThread"));
+
+                let newThread;
+
+                const newPrompt = {
+                    role: "user", content: textField1.value 
+                    }  
+                if(storedThread && storedThread.length) {
+                  storedThread[storedThread.length] = newPrompt;
+                  newThread = storedThread;
+                }
+
+                else newThread = [newPrompt];
+
+
+                localStorage.setItem("gptThread", JSON.stringify(newThread));
+
+
+                askGPT.call({ messages: newThread });
+
+
+            content: Ask
+            size: medium
+            variant: outlined
+            fullWidth: true
+            loading:
+              $$jsExpression: |
+                askGPT.isLoading || askGPT.isFetching
+    - component: PageRow
+      name: pageRow4
+      children:
+        - component: DataGrid
+          name: dataGrid
+          props:
+            columns:
+              [
+                { field: role, type: string, width: 123 },
+                { field: content, type: string, width: 718 }
+              ]
+            rows:
+              $$jsExpression: |
+                JSON.parse(localStorage.getItem("gptThread"))
+            hideToolbar: false
+    - component: PageRow
+      name: pageRow3
+      children:
+        - component: Text
+          name: text1
+          props:
+            value:
+              $$jsExpression: |
+                askGPT.data.content
+            sx:
+              display: none
+    - component: PageRow
+      name: pageRow2
+      children:
+        - component: Button
+          name: button
+          props:
+            onClick:
+              $$jsExpressionAction: >-
+                const storedThread =
+                JSON.parse(localStorage.getItem("gptThread"));
+
+                let newThread; let newMessage = { role: "assistant", content: askGPT?.data?.content };
+
+                if(storedThread && storedThread.length) {
+                  storedThread[storedThread.length] = newMessage;
+                    newThread = storedThread;
+                }
+
+                else { newThread = [newMessage]}
+
+
+                localStorage.setItem("gptThread", JSON.stringify(newThread));
+            size: medium
+            variant: outlined
+            content: Answer
+            fullWidth: true
+            disabled:
+              $$jsExpression: >
+                Boolean(askGPT.isFetching || askGPT.isLoading ||
+                !askGPT.data.content)
+            loading:
+              $$jsExpression: |
+                askGPT.isLoading || askGPT.isFetching
+        - component: Button
+          name: button2
+          props:
+            content: Reset
+            size: medium
+            fullWidth: true
+            variant: outlined
+            onClick:
+              $$jsExpressionAction: localStorage.setItem("gptThread", null)
+    - component: PageRow
+      name: pageRow1
+      children:
+        - component: Text
+          name: text
+          props:
+            value:
+              $$jsExpression: |
+                askGPT.data?.content
+            sx:
+              display: none
+  queries:
+    - name: askGPT
+      mode: mutation
+      query:
+        function: askGPT
+        kind: local
+      parameters:
+        - name: prompt
+          value: Hello! What's up?

examples/chatGPT/toolpad/resources/functions.ts

@@ -0,0 +1,81 @@
+import {
+  Configuration,
+  OpenAIApi,
+  ChatCompletionRequestMessageRoleEnum,
+  ChatCompletionRequestMessage,
+} from 'openai';
+import { createFunction } from '@mui/toolpad/server';
+// import { createInterface } from 'node:readline/promises';
+// import { stdin as input, stdout as output } from 'node:process';
+
+// export const query_open3 = createFunction(
+//   async function open3({ parameters }) {
+//     const configuration = new Configuration({ apiKey: process.env.OPENAI_API_KEY });
+//     const openai = new OpenAIApi(configuration);
+
+//     let userInput = '';
+//     const messages = [{ role: 'system', content: 'Hello, What do you want to know?' }];
+
+//     while (userInput !== '0') {
+//       userInput = `${parameters.prompt}`;
+//       messages.push({ role: 'user', content: userInput });
+//       console.log(userInput);
+//       try {
+//         const response = await openai.createChatCompletion({
+//           model: 'gpt-3.5-turbo',
+//           messages,
+//         });
+
+//         const botMessage = response.data.choices[0].message;
+//         if (botMessage) {
+//           messages.push(botMessage);
+//           userInput = `${parameters.prompt}`;
+//           // botMessage.content;
+//           console.log(messages);
+//           // return botMessage.content;
+//         } else {
+//           userInput = '\nNo response, try asking again\n';
+//         }
+//       } catch (error) {
+//         console.log(error.message);
+//       }
+//     }
+//   },
+//   {
+//     parameters: {
+//       prompt: {
+//         typeDef: { type: 'string' },
+//       },
+//     },
+//   },
+// );
+
+export const askGPT = createFunction(
+  async function open4({ parameters }) {
+    const configuration = new Configuration({ apiKey: process.env.OPENAI_API_KEY });
+    const openai = new OpenAIApi(configuration);
+
+    try {
+      const response = await openai.createChatCompletion({
+        model: 'gpt-3.5-turbo',
+        messages: parameters.messages as ChatCompletionRequestMessage[],
+      });
+
+      const gptResponse = response.data?.choices[0].message ?? {
+        role: ChatCompletionRequestMessageRoleEnum.Assistant,
+        content: 'No response',
+      };
+
+      return gptResponse;
+    } catch (error) {
+      return error;
+    }
+  },
+  {
+    parameters: {
+      messages: {
+        typeDef: { type: 'array' },
+      },
+    },
+  },
+);

examples/custom-datagrid-column/toolpad/.gitignore

@@ -0,0 +1 @@
+.generated