Skip to content

add new chat-widget component #56

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

add new chat-widget component #56

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
node_modules
.yalc
yalc.lock

/.cache
/build
Expand Down
35 changes: 35 additions & 0 deletions app/components/ChatComponents/GooeyChatWidget.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}) {
Comment on lines +3 to +10
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Correctness: The state prop is declared but never used in the component, which creates unnecessary props and could lead to confusion for developers using this component.

📝 Committable Code Suggestion

‼️ Ensure you review the code suggestion before committing it to the branch. Make sure it replaces the highlighted code, contains no missing lines, and has no issues with indentation.

Suggested change
export default function GooeyChatWidget({
state,
onChange,
...rest
}: GWChatWidgetProps & {
state: Record<string, any>;
onChange: (value: string) => void;
}) {
export default function GooeyChatWidget({
onChange,
...rest
}: GWChatWidgetProps & {
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);
};
Comment on lines +12 to +17
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Remove console.log statement in production code.

Console statements should be removed from production code as they can impact performance and may leak sensitive information.

  const handleSend = (message: string) => {
    // Handle the send event here
-   console.log("Message sent:", message);
    // You can also call onChange if needed
    onChange(message);
  };
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
const handleSend = (message: string) => {
// Handle the send event here
console.log("Message sent:", message);
// You can also call onChange if needed
onChange(message);
};
const handleSend = (message: string) => {
// Handle the send event here
// 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("");
};
Comment on lines +19 to +24
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Correctness: The handleClear function doesn't call onChange with an empty string, making the clear functionality incomplete. The commented code should be uncommented to properly reset the state.

📝 Committable Code Suggestion

‼️ Ensure you review the code suggestion before committing it to the branch. Make sure it replaces the highlighted code, contains no missing lines, and has no issues with indentation.

Suggested change
const handleClear = () => {
// Handle the clear event here
console.log("Chat cleared");
// You can also call onChange if needed
// onChange("");
};
const handleClear = () => {
// Handle the clear event here
console.log("Chat cleared");
// Reset the state when clearing the chat
onChange("");
};

Comment on lines +12 to +24
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Security: The component contains console.log statements that should be removed before production code is committed, as they can expose sensitive information and impact performance.

📝 Committable Code Suggestion

‼️ Ensure you review the code suggestion before committing it to the branch. Make sure it replaces the highlighted code, contains no missing lines, and has no issues with indentation.

Suggested change
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("");
};
const handleSend = (message: string) => {
// Handle the send event here
onChange(message);
};
const handleClear = () => {
// Handle the clear event here
onChange("");
};

Comment on lines +19 to +24
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Resolve commented-out code and remove console.log.

The handler contains a commented-out onChange call and a console log statement. Either uncomment the onChange call if it's needed or remove the comment entirely, and remove the console log statement.

  const handleClear = () => {
    // Handle the clear event here
-   console.log("Chat cleared");
    // You can also call onChange if needed
-   // onChange("");
+   onChange(""); // Uncomment if you need to notify parent component of clearing
  };
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
const handleClear = () => {
// Handle the clear event here
console.log("Chat cleared");
// You can also call onChange if needed
// onChange("");
};
const handleClear = () => {
// Handle the clear event here
// You can also call onChange if needed
onChange(""); // Uncomment if you need to notify parent component of clearing
};


return (
<div className="h-100">
<GWChatWidget
{...rest}
onSend={handleSend}
onNewConversation={handleClear}
/>
</div>
);
}
4 changes: 4 additions & 0 deletions app/renderer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"));

Expand Down Expand Up @@ -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": {
Expand Down
148 changes: 99 additions & 49 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

7 changes: 4 additions & 3 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "gooey-gui",
"version": "0.5.3",
"version": "0.5.4",
"sideEffects": false,
"scripts": {
"build": "remix build",
Expand Down Expand Up @@ -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",
Expand All @@ -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",
Comment on lines +57 to +58
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

React version upgrade requires type definition updates

React and ReactDOM have been upgraded from v17 to v18.2.0, but the type definitions in devDependencies still reference v17 (lines 77-78).

Update the TypeScript type definitions to match the React version:

-  "@types/react": "^17.0.2",
-  "@types/react-dom": "^17.0.2",
+  "@types/react": "^18.2.0",
+  "@types/react-dom": "^18.2.0",
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
"react": "^18.2.0",
"react-dom": "^18.2.0",
"@types/react": "^18.2.0",
"@types/react-dom": "^18.2.0",

"react-plotly.js": "^2.6.0",
"react-select": "^5.7.3",
"react-syntax-highlighter": "^15.5.0",
Expand Down
14 changes: 14 additions & 0 deletions py/gooey_gui/components/common.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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()
Comment on lines +926 to +938
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Correctness: The gooey_chat_widget function returns the result of .mount() which is likely None, but should return a core.NestingCtx object like other similar widget functions in the file.

📝 Committable Code Suggestion

‼️ Ensure you review the code suggestion before committing it to the branch. Make sure it replaces the highlighted code, contains no missing lines, and has no issues with indentation.

Suggested change
def gooey_chat_widget(
messages,
config,
**props,
):
return core.RenderTreeNode(
name="gw-chat-widget",
props=dict(
messages=messages,
config=config,
**props,
),
).mount()
def gooey_chat_widget(
messages,
config,
**props,
):
node = core.RenderTreeNode(
name="gw-chat-widget",
props=dict(
messages=messages,
config=config,
**props,
),
)
node.mount()
return core.NestingCtx(node)

1 change: 1 addition & 0 deletions remix.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ module.exports = {
/p-queue/,
/p-timeout/,
/is-network-error/,
/gooey-web-widget/
],
routes(defineRoutes) {
return defineRoutes((route) => {
Expand Down