add new chat-widget component

Author: anish-work

.gitignore

@@ -1,4 +1,6 @@
 node_modules
+.yalc
+yalc.lock
 
 /.cache
 /build

app/components/ChatComponents/GooeyChatWidget.tsx

@@ -0,0 +1,35 @@
+import { GWChatWidget, GWChatWidgetProps } from "gooey-web-widget";
+
+export default function GooeyChatWidget({
+  state,
+  onChange,
+  ...rest
+}: GWChatWidgetProps & {
+  state: Record<string, any>;
+  onChange: (value: string) => void;
+}) {
+
+  const handleSend = (message: string) => {
+    // Handle the send event here
+    console.log("Message sent:", message);
+    // You can also call onChange if needed
+    onChange(message);
+  };
+
+  const handleClear = () => {
+    // Handle the clear event here
+    console.log("Chat cleared");
+    // You can also call onChange if needed
+    // onChange("");
+  };
+
+  return (
+    <div className="h-100">
+      <GWChatWidget
+        {...rest}
+        onSend={handleSend}
+        onNewConversation={handleClear}
+      />
+    </div>
+  );
+}

app/renderer.tsx

@@ -22,6 +22,7 @@ import GooeySelect from "./components/GooeySelect";
 import GooeySwitch from "./components/GooeySwitch";
 import { GooeyTooltip } from "./components/GooeyTooltip";
 import { lazyImport } from "./lazyImports";
+import GooeyChatWidget from "./components/ChatComponents/GooeyChatWidget";
 
 const { DataTable, DataTableRaw } = lazyImport(() => import("~/dataTable"));
 
@@ -338,6 +339,9 @@ function RenderedTreeNode({
     case "code-editor": {
       return <CodeEditor props={props} state={state} onChange={onChange} />;
     }
+    case "gw-chat-widget": {
+      return <GooeyChatWidget {...props} state={state} onChange={onChange} />;
+    }
     case "switch":
       return <GooeySwitch props={props} state={state} />;
     case "input": {

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "gooey-gui",
-  "version": "0.5.3",
+  "version": "0.5.4",
   "sideEffects": false,
   "scripts": {
     "build": "remix build",
@@ -44,6 +44,7 @@
     "@uppy/webcam": "^3.3.1",
     "@uppy/xhr-upload": "^3.2.0",
     "firebase-admin": "^11.9.0",
+    "gooey-web-widget": "file:.yalc/gooey-web-widget",
     "html-react-parser": "^4.0.0",
     "isbot": "^3.6.8",
     "jshint": "^2.13.6",
@@ -53,8 +54,8 @@
     "nprogress": "^0.2.0",
     "plotly.js": "^2.27.1",
     "puppeteer": "^22.14.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-plotly.js": "^2.6.0",
     "react-select": "^5.7.3",
     "react-syntax-highlighter": "^15.5.0",

package.json

@@ -922,3 +922,17 @@ def tooltip(
     )
     tooltip.mount()
     return core.NestingCtx(tooltip)
+
+def gooey_chat_widget(
+    messages,
+    config,
+    **props,
+):
+    return core.RenderTreeNode(
+        name="gw-chat-widget",
+        props=dict(
+            messages=messages,
+            config=config,
+            **props,
+        ),
+    ).mount()

py/gooey_gui/components/common.py

@@ -30,6 +30,7 @@ module.exports = {
     /p-queue/,
     /p-timeout/,
     /is-network-error/,
+    /gooey-web-widget/
   ],
   routes(defineRoutes) {
     return defineRoutes((route) => {