Chat widget api (#688)

2023-07-27 17:40:11 -03:00 · 2023-07-27 17:40:11 -03:00 · 58ce967e01
commit 58ce967e01
parent aeca627222 397c665536
22 changed files with 390 additions and 74 deletions
--- a/docs/docs/guidelines/chat-widget.mdx
+++ b/docs/docs/guidelines/chat-widget.mdx
@ -0,0 +1,200 @@
+import ThemedImage from "@theme/ThemedImage";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+import ZoomableImage from "/src/theme/ZoomableImage.js";
+import ReactPlayer from "react-player";
+import Admonition from '@theme/Admonition';
+
+# Chat Widget
+
+<div style={{ marginBottom: "20px" }}>
+  The <b>Langflow Chat Widget</b> is a powerful web component that enables
+  communication with a Langflow project. This widget allows for a chat interface embedding,
+  allowing the integration of Langflow into web applications effortlessly.
+</div>
+
+## Features
+
+🌟 **Seamless Integration:** Easily integrate the Langflow Chat Widget into your website or web application with just a few lines of JavaScript.
+
+🚀 **Interactive Chat Interface:** Engage your users with a user-friendly conversation, powered by Langflow's advanced language understanding capabilities.
+
+🎛️ **Customizable Styling:** Customize the appearance of the chat widget to match your application's design and branding.
+
+🌐 **Multilingual Support:** Communicate with users in multiple languages, opening up your application to a global audience.
+
+---
+
+## Usage
+
+<div style={{ marginBottom: "20px" }}>
+  You can get the HTML code embedded with the chat by clicking the Code button
+  at the Sidebar after building a flow.
+</div>
+
+<div
+  style={{ marginBottom: "20px", width: "100%", display: "flex", justifyContent: "center" }}
+>
+  <ZoomableImage
+    alt="Docusaurus themed image"
+    sources={{
+      light: useBaseUrl("img/widget-sidebar.png"),
+    }}
+    style={{ width: "100%", maxWidth: "600px", margin: "0 auto" }}
+  />
+</div>
+
+<div style={{ marginBottom: "20px" }}>
+  Clicking the Chat Widget HTML tab, you'll get the code to be
+  inserted. Read below to learn how to use it with HTML, React and Angular.
+</div>
+
+<div style={{ marginBottom: "20px" }}>
+  <ZoomableImage
+    alt="Docusaurus themed image"
+    sources={{
+      light: useBaseUrl("img/widget-code.png"),
+    }}
+    style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
+  />
+</div>
+
+---
+
+### HTML
+
+The Chat Widget can be embedded into any HTML page, inside a _`<body>`_ tag, as demonstrated in the video below.
+
+<div
+  style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
+>
+  <ReactPlayer playing controls url="/videos/langflow_widget.mp4" />
+</div>
+
+---
+
+### React
+
+To embed the Chat Widget using React, you'll need to insert this _`<script>`_ tag into the React *index.html* file, inside the _`<body>`_ tag:
+
+```html
+<script src="https://cdn.jsdelivr.net/gh/logspace-ai/langflow-embedded-chat@main/dist/build/static/js/bundle.min.js"></script>
+```
+
+Then, declare your Web Component and encapsulate it in a React component.
+
+```jsx
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      "langflow-chat": any;
+    }
+  }
+}
+
+export default function ChatWidget({ className }) {
+  return (
+    <div className={className}>
+      <langflow-chat
+        chat_inputs='{"your_key":"value"}'
+        chat_input_field="your_chat_key"
+        flow_id="your_flow_id"
+        host_url="langflow_url"
+      ></langflow-chat>
+    </div>
+  );
+}
+```
+
+Finally, you can place the component anywhere in your code to display the Chat Widget.
+
+---
+
+### Angular
+
+To use it in Angular, first add this _`<script>`_ tag into the Angular *index.html* file, inside the _`<body>`_ tag.
+
+```html
+<script src="https://cdn.jsdelivr.net/gh/logspace-ai/langflow-embedded-chat@main/dist/build/static/js/bundle.min.js"></script>
+```
+
+When you use a custom web component in an Angular template, the Angular compiler might show a warning when it doesn't recognize the custom elements by default. To suppress this warning, add _`CUSTOM_ELEMENTS_SCHEMA`_ to the module's _`@NgModule.schemas`_.
+
+- Open the module file (it typically ends with *.module.ts*) where you'd add the _`langflow-chat`_ web component.
+- Import _`CUSTOM_ELEMENTS_SCHEMA`_ at the top of the file:
+
+```ts
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
+```
+
+- Add _`CUSTOM_ELEMENTS_SCHEMA`_ to the 'schemas' array inside the '@NgModule' decorator:
+
+```ts
+@NgModule({
+  declarations: [
+    // ... Other components and directives ...
+  ],
+  imports: [
+    // ... Other imported modules ...
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA], // Add the CUSTOM_ELEMENTS_SCHEMA here
+})
+export class YourModule {}
+```
+
+In your Angular project, find the component belonging to the module where _`CUSTOM_ELEMENTS_SCHEMA`_ was added.
+
+- Inside the template, add the _`langflow-chat`_ tag to include the Chat Widget in your component's view:
+
+```jsx
+<langflow-chat
+  chat_inputs='{"your_key":"value"}'
+  chat_input_field="your_chat_key"
+  flow_id="your_flow_id"
+  host_url="langflow_url"
+></langflow-chat>
+```
+
+<Admonition type="info">
+  <ul>
+    <li>_`CUSTOM_ELEMENTS_SCHEMA`_ is a built-in schema that allows Angular to recognize custom elements.</li>
+    <li>Adding _`CUSTOM_ELEMENTS_SCHEMA`_ tells Angular to allow custom elements in your templates, and it will suppress the warning related to unknown elements like _`langflow-chat`_.</li>
+    <li>Notice that you can only use the Chat Widget in components that are part of the module where you added _`CUSTOM_ELEMENTS_SCHEMA`_.</li>
+  </ul>
+</Admonition>
+
+---
+
+## Configuration
+
+Use the widget API to customize your Chat Widget:
+
+<Admonition type="caution">
+  Props with the type JSON need to be passed as Stringified JSONs, with the format &#123;<span>"key":"value"</span>&#125;.
+</Admonition>
+
+
+| Prop                  | Type    | Required | Description                                                                                                                                                      |
+| --------------------- | ------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| bot_message_style     | JSON    | No       | Applies custom formatting to bot messages.                                                                                                                       |
+| chat_input_field      | String  | Yes      | Defines the type of the input field for chat messages.                                                                                                           |
+| chat_inputs           | JSON    | Yes      | Determines the chat input elements and their respective values.                                                                                                  |
+| chat_output_key       | String  | No       | Specifies which output to display if multiple outputs are available.                                                                                             |
+| chat_position         | String  | No       | Positions the chat window on the screen (options include: top-left, top-center, top-right, center-left, center-right, bottom-right, bottom-center, bottom-left). |
+| chat_trigger_style    | JSON    | No       | Styles the chat trigger button.                                                                                                                                  |
+| chat_window_style     | JSON    | No       | Customizes the overall appearance of the chat window.                                                                                                            |
+| error_message_style   | JSON    | No       | Sets the format for error messages within the chat window.                                                                                                       |
+| flow_id               | String  | Yes      | Identifies the flow that the component is associated with.                                                                                                       |
+| height                | Number  | No       | Sets the height of the chat window in pixels.                                                                                                                    |
+| host_url              | String  | Yes      | Specifies the URL of the host for chat component communication.                                                                                                  |
+| input_container_style | JSON    | No       | Applies styling to the container where chat messages are entered.                                                                                                |
+| input_style           | JSON    | No       | Sets the style for the chat input field.                                                                                                                         |
+| online                | Boolean | No       | Toggles the online status of the chat component.                                                                                                                 |
+| online_message        | String  | No       | Sets a custom message to display when the chat component is online.                                                                                              |
+| placeholder           | String  | No       | Sets the placeholder text for the chat input field.                                                                                                              |
+| placeholder_sending   | String  | No       | Sets the placeholder text to display while a message is being sent.                                                                                              |
+| send_button_style     | JSON    | No       | Sets the style for the send button in the chat window.                                                                                                           |
+| send_icon_style       | JSON    | No       | Sets the style for the send icon in the chat window.                                                                                                             |
+| tweaks                | JSON    | No       | Applies additional custom adjustments for the associated flow.                                                                                                   |
+| user_message_style    | JSON    | No       | Determines the formatting for user messages in the chat window.                                                                                                  |
+| width                 | Number  | No       | Sets the width of the chat window in pixels.                                                                                                                     |
+| window_title          | String  | No       | Sets the title displayed in the chat window's header or title bar.                                                                                               |
--- a/docs/sidebars.js
+++ b/docs/sidebars.js
@ -21,6 +21,7 @@ module.exports = {
        "guidelines/collection",
        "guidelines/prompt-customization",
        "guidelines/chat-interface",
+        "guidelines/chat-widget",
        "guidelines/custom-component",
      ],
    },
--- a/docs/static/img/widget-code.png
+++ b/docs/static/img/widget-code.png
--- a/docs/static/img/widget-sidebar.png
+++ b/docs/static/img/widget-sidebar.png
--- a/docs/static/videos/langflow_widget.mp4
+++ b/docs/static/videos/langflow_widget.mp4
--- a/src/frontend/src/components/chatComponent/index.tsx
+++ b/src/frontend/src/components/chatComponent/index.tsx
@ -12,9 +12,8 @@ import { NodeType } from "../../types/flow";

 export default function Chat({ flow }: ChatType) {
  const [open, setOpen] = useState(false);
-  const [isBuilt, setIsBuilt] = useState(false);
  const [canOpen, setCanOpen] = useState(false);
-  const { tabsState } = useContext(TabsContext);
+  const { tabsState, isBuilt, setIsBuilt } = useContext(TabsContext);

  useEffect(() => {
    const handleKeyDown = (event: KeyboardEvent) => {
--- a/src/frontend/src/components/codeAreaComponent/index.tsx
+++ b/src/frontend/src/components/codeAreaComponent/index.tsx
@ -45,7 +45,7 @@ export default function CodeAreaComponent({
              editNode
                ? "input-edit-node input-dialog"
                : (disabled ? " input-disable input-ring " : "") +
-                  " input-primary text-muted-foreground "
+                  " primary-input text-muted-foreground "
            }
          >
            {myValue !== "" ? myValue : "Type something..."}
--- a/src/frontend/src/components/codeTabsComponent/index.tsx
+++ b/src/frontend/src/components/codeTabsComponent/index.tsx
@ -145,7 +145,7 @@ export default function CodeTabsComponent({
            </TabsTrigger>
          ))}
        </TabsList>
-        {Number(activeTab) < 3 && (
+        {Number(activeTab) < 4 && (
          <div className="float-right mx-1 flex gap-2">
            <button
              className="flex items-center gap-1.5 rounded bg-none p-1 text-xs text-gray-500 dark:text-gray-300"
@ -174,15 +174,23 @@ export default function CodeTabsComponent({
          className="api-modal-tabs-content"
          key={index} // Remember to add a unique key prop
        >
-          {index < 3 ? (
-            <SyntaxHighlighter
-              className="mt-0 h-full w-full overflow-auto custom-scroll"
-              language={tab.mode}
-              style={oneDark}
-            >
-              {tab.code}
-            </SyntaxHighlighter>
-          ) : index === 3 ? (
+          {index < 4 ? (
+            <>
+              {tab.description && (
+                <div
+                  className="mb-2 w-full text-left text-sm"
+                  dangerouslySetInnerHTML={{ __html: tab.description }}
+                ></div>
+              )}
+              <SyntaxHighlighter
+                className="mt-0 h-full w-full overflow-auto custom-scroll"
+                language={tab.mode}
+                style={oneDark}
+              >
+                {tab.code}
+              </SyntaxHighlighter>
+            </>
+          ) : index === 4 ? (
            <>
              <div className="api-modal-according-display">
                <div
--- a/src/frontend/src/components/inputFileComponent/index.tsx
+++ b/src/frontend/src/components/inputFileComponent/index.tsx
@ -102,8 +102,8 @@ export default function InputFileComponent({
            editNode
              ? "input-edit-node input-dialog text-muted-foreground"
              : disabled
-              ? "input-disable input-dialog input-primary"
-              : "input-dialog input-primary text-muted-foreground"
+              ? "input-disable input-dialog primary-input"
+              : "input-dialog primary-input text-muted-foreground"
          }
        >
          {myValue !== "" ? myValue : "No file"}
--- a/src/frontend/src/components/promptComponent/index.tsx
+++ b/src/frontend/src/components/promptComponent/index.tsx
@ -51,7 +51,7 @@ export default function PromptAreaComponent({
              editNode
                ? "input-edit-node input-dialog"
                : (disabled ? " input-disable text-ring " : "") +
-                  " input-primary text-muted-foreground "
+                  " primary-input text-muted-foreground "
            }
          >
            {value !== "" ? value : "Type your prompt here..."}
--- a/src/frontend/src/components/ui/input.tsx
+++ b/src/frontend/src/components/ui/input.tsx
@ -9,7 +9,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
    return (
      <input
        type={type}
-        className={cn("nopan nodrag noundo nocopy input-primary", className)}
+        className={cn("nopan nodrag noundo nocopy primary-input", className)}
        ref={ref}
        {...props}
      />
--- a/src/frontend/src/constants/constants.ts
+++ b/src/frontend/src/constants/constants.ts
@ -497,4 +497,8 @@ export const USER_PROJECTS_HEADER = "My Collection";
 * @constant
 *
 */
-export const URL_EXCLUDED_FROM_ERROR_RETRIES = ["/api/v1/validate/code", "/api/v1/custom_component", "/api/v1/validate/prompt"];
+export const URL_EXCLUDED_FROM_ERROR_RETRIES = [
+  "/api/v1/validate/code",
+  "/api/v1/custom_component",
+  "/api/v1/validate/prompt",
+];
--- a/src/frontend/src/contexts/tabsContext.tsx
+++ b/src/frontend/src/contexts/tabsContext.tsx
@ -40,6 +40,8 @@ const TabsContextInitialValue: TabsContextType = {
  downloadFlows: () => {},
  uploadFlows: () => {},
  uploadFlow: () => {},
+  isBuilt: false,
+  setIsBuilt: (state: boolean) => {},
  hardReset: () => {},
  saveFlow: async (flow: FlowType) => {},
  lastCopiedSelection: null,
@ -583,10 +585,14 @@ export function TabsProvider({ children }: { children: ReactNode }) {
    }
  }

+  const [isBuilt, setIsBuilt] = useState(false);
+
  return (
    <TabsContext.Provider
      value={{
        saveFlow,
+        isBuilt,
+        setIsBuilt,
        lastCopiedSelection,
        setLastCopiedSelection,
        hardReset,
--- a/src/frontend/src/controllers/API/api.tsx
+++ b/src/frontend/src/controllers/API/api.tsx
@ -1,7 +1,7 @@
 import axios, { AxiosError, AxiosInstance } from "axios";
 import { useContext, useEffect, useRef } from "react";
-import { alertContext } from "../../contexts/alertContext";
 import { URL_EXCLUDED_FROM_ERROR_RETRIES } from "../../constants/constants";
+import { alertContext } from "../../contexts/alertContext";

 // Create a new Axios instance
 const api: AxiosInstance = axios.create({
--- a/src/frontend/src/controllers/API/index.ts
+++ b/src/frontend/src/controllers/API/index.ts
@ -1,4 +1,4 @@
-import axios, { AxiosResponse } from "axios";
+import { AxiosResponse } from "axios";
 import { ReactFlowJsonObject } from "reactflow";
 import { api } from "../../controllers/API/api";
 import { APIObjectType, sendAllProps } from "../../types/api/index";
--- a/src/frontend/src/index.tsx
+++ b/src/frontend/src/index.tsx
@ -5,9 +5,12 @@ import ContextWrapper from "./contexts";
 import reportWebVitals from "./reportWebVitals";

 import { ApiInterceptor } from "./controllers/API/api";
-import "./style/applies.css";
-import "./style/classes.css";
+// @ts-ignore
 import "./style/index.css";
+// @ts-ignore
+import "./style/applies.css";
+// @ts-ignore
+import "./style/classes.css";

 const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
--- a/src/frontend/src/modals/ApiModal/index.tsx
+++ b/src/frontend/src/modals/ApiModal/index.tsx
@ -21,6 +21,7 @@ import {
  getCurlCode,
  getPythonApiCode,
  getPythonCode,
+  getWidgetCode,
 } from "../../utils/utils";
 import BaseModal from "../baseModal";

@ -29,9 +30,11 @@ const ApiModal = forwardRef(
    {
      flow,
      children,
+      disable,
    }: {
      flow: FlowType;
      children: ReactNode;
+      disable: boolean;
    },
    ref
  ) => {
@ -43,6 +46,7 @@ const ApiModal = forwardRef(
    const pythonApiCode = getPythonApiCode(flow, tweak.current, tabsState);
    const curl_code = getCurlCode(flow, tweak.current, tabsState);
    const pythonCode = getPythonCode(flow, tweak.current, tabsState);
+    const widgetCode = getWidgetCode(flow, tabsState);
    const tweaksCode = buildTweaks(flow);
    const [tabs, setTabs] = useState([
      {
@ -67,6 +71,15 @@ const ApiModal = forwardRef(
        language: "py",
        code: pythonCode,
      },
+      {
+        name: "Chat Widget HTML",
+        description:
+          "Insert this code anywhere in your &lt;body&gt; tag. To use with react and other libs, check our <a class='link-color' href='https://langflow.org/guidelines/widget'>documentation</a>.",
+        mode: "html",
+        image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
+        language: "py",
+        code: widgetCode,
+      },
    ]);

    function startState() {
@ -111,6 +124,15 @@ const ApiModal = forwardRef(
            image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
            code: pythonCode,
          },
+          {
+            name: "Chat Widget HTML",
+            description:
+              "Insert this code anywhere in your &lt;body&gt; tag. To use with react and other libs, check our <a class='link-color' href='https://langflow.org/guidelines/widget'>documentation</a>.",
+            mode: "html",
+            image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
+            language: "py",
+            code: widgetCode,
+          },
          {
            name: "Tweaks",
            mode: "python",
@ -143,6 +165,15 @@ const ApiModal = forwardRef(
            language: "py",
            code: pythonCode,
          },
+          {
+            name: "Chat Widget HTML",
+            description:
+              "Insert this code anywhere in your &lt;body&gt; tag. To use with react and other libs, check our <a class='link-color' href='https://langflow.org/guidelines/widget'>documentation</a>.",
+            mode: "html",
+            image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
+            language: "py",
+            code: widgetCode,
+          },
        ]);
      }
    }, [flow["data"]["nodes"], open]);
@ -210,13 +241,15 @@ const ApiModal = forwardRef(
        tweak.current.push(newTweak);
      }

-      const pythonApiCode = getPythonApiCode(flow, tweak.current);
-      const curl_code = getCurlCode(flow, tweak.current);
-      const pythonCode = getPythonCode(flow, tweak.current);
+      const pythonApiCode = getPythonApiCode(flow, tweak.current, tabsState);
+      const curl_code = getCurlCode(flow, tweak.current, tabsState);
+      const pythonCode = getPythonCode(flow, tweak.current, tabsState);
+      const widgetCode = getWidgetCode(flow, tabsState);

      tabs[0].code = curl_code;
      tabs[1].code = pythonApiCode;
      tabs[2].code = pythonCode;
+      tabs[3].code = widgetCode;

      setTweak(tweak.current);
    }
@ -253,7 +286,7 @@ const ApiModal = forwardRef(
    }

    return (
-      <BaseModal open={open} setOpen={setOpen}>
+      <BaseModal open={open} setOpen={setOpen} disable={disable}>
        <BaseModal.Trigger>{children}</BaseModal.Trigger>
        <BaseModal.Header description={EXPORT_CODE_DIALOG}>
          <span className="pr-2">Code</span>
--- a/src/frontend/src/modals/baseModal/index.tsx
+++ b/src/frontend/src/modals/baseModal/index.tsx
@ -46,11 +46,13 @@ interface BaseModalProps {
  ];
  open?: boolean;
  setOpen?: (open: boolean) => void;
+  disable?: boolean;
  size?: "smaller" | "small" | "medium" | "large" | "large-h-full";
 }
 function BaseModal({
  open,
  setOpen,
+  disable = false,
  children,
  size = "large",
 }: BaseModalProps) {
@ -99,7 +101,10 @@ function BaseModal({
  //UPDATE COLORS AND STYLE CLASSSES
  return (
    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger className="w-full" hidden={triggerChild ? false : true}>
+      <DialogTrigger
+        className={"w-full " + (disable ? "button-disable" : "")}
+        hidden={triggerChild ? false : true}
+      >
        {triggerChild}
      </DialogTrigger>
      <DialogContent className={minWidth}>
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
@ -19,7 +19,7 @@ import DisclosureComponent from "../DisclosureComponent";

 export default function ExtraSidebar() {
  const { data } = useContext(typesContext);
-  const { flows, tabId, uploadFlow, tabsState, saveFlow } =
+  const { flows, tabId, uploadFlow, tabsState, saveFlow, isBuilt } =
    useContext(TabsContext);
  const { setSuccessData, setErrorData } = useContext(alertContext);
  const [dataFilter, setFilterData] = useState(data);
@ -61,52 +61,68 @@ export default function ExtraSidebar() {
  return (
    <div className="side-bar-arrangement">
      <div className="side-bar-buttons-arrangement">
-        <ShadTooltip content="Import" side="top">
-          <button
-            className="extra-side-bar-buttons"
-            onClick={() => {
-              uploadFlow();
-            }}
-          >
-            <IconComponent name="FileUp" className="side-bar-button-size " />
-          </button>
-        </ShadTooltip>
-
-        <ShadTooltip content="Export" side="top">
+        <div className="side-bar-button">
+          <ShadTooltip content="Import" side="top">
+            <button
+              className="extra-side-bar-buttons"
+              onClick={() => {
+                uploadFlow();
+              }}
+            >
+              <IconComponent name="FileUp" className="side-bar-button-size " />
+            </button>
+          </ShadTooltip>
+        </div>
+        <div className="side-bar-button">
          <ExportModal>
-            <div className={classNames("extra-side-bar-buttons")}>
-              <IconComponent name="FileDown" className="side-bar-button-size" />
-            </div>
-          </ExportModal>
-        </ShadTooltip>
-        <ShadTooltip content="Code" side="top">
-          {flow && flow.data && (
-            <ApiModal flow={flow}>
+            <ShadTooltip content="Export" side="top">
              <div className={classNames("extra-side-bar-buttons")}>
-                <IconComponent name="Code2" className="side-bar-button-size" />
+                <IconComponent
+                  name="FileDown"
+                  className="side-bar-button-size"
+                />
              </div>
-            </ApiModal>
-          )}
+            </ShadTooltip>
+          </ExportModal>
+        </div>
+        <ShadTooltip content={"Code"} side="top">
+          <div className="side-bar-button">
+            {flow && flow.data && (
+              <ApiModal flow={flow} disable={!isBuilt}>
+                <div className={classNames("extra-side-bar-buttons")}>
+                  <IconComponent
+                    name="Code2"
+                    className={
+                      "side-bar-button-size" +
+                      (isBuilt ? " " : " extra-side-bar-save-disable")
+                    }
+                  />
+                </div>
+              </ApiModal>
+            )}
+          </div>
        </ShadTooltip>
-
-        <ShadTooltip content="Save" side="top">
-          <button
-            className="extra-side-bar-buttons"
-            onClick={(event) => {
-              saveFlow(flow);
-              setSuccessData({ title: "Changes saved successfully" });
-            }}
-            disabled={!isPending}
-          >
-            <IconComponent
-              name="Save"
+        <div className="side-bar-button">
+          <ShadTooltip content="Save" side="top">
+            <button
              className={
-                "side-bar-button-size" +
-                (isPending ? " " : " extra-side-bar-save-disable")
+                "extra-side-bar-buttons " + (isPending ? "" : "button-disable")
              }
-            />
-          </button>
-        </ShadTooltip>
+              onClick={(event) => {
+                saveFlow(flow);
+                setSuccessData({ title: "Changes saved successfully" });
+              }}
+            >
+              <IconComponent
+                name="Save"
+                className={
+                  "side-bar-button-size" +
+                  (isPending ? " " : " extra-side-bar-save-disable")
+                }
+              />
+            </button>
+          </ShadTooltip>
+        </div>
      </div>
      <Separator />
      <div className="side-bar-search-div-placement">
--- a/src/frontend/src/style/applies.css
+++ b/src/frontend/src/style/applies.css
@ -107,6 +107,12 @@
  .side-bar-buttons-arrangement {
    @apply mb-2 mt-2 flex w-full items-center justify-between gap-2 px-2;
  }
+  .side-bar-button {
+    @apply flex w-full;
+  }
+  .button-disable {
+    @apply pointer-events-none;
+  }
  .extra-side-bar-buttons {
    @apply relative inline-flex w-full items-center justify-center rounded-md bg-background   px-2 py-2 text-foreground shadow-sm ring-1 ring-inset ring-input transition-all duration-500 ease-in-out;
  }
@ -116,20 +122,20 @@
  .button-div-style {
    @apply flex gap-2;
  }
-  .input-primary {
+  .primary-input {
    @apply form-input block w-full truncate rounded-md border-border bg-background px-3 text-left shadow-sm placeholder:text-muted-foreground focus:border-ring focus:placeholder-transparent focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 sm:text-sm;
  }

-  /* The same as input-primary but no-truncate */
+  /* The same as primary-input but no-truncate */
  .textarea-primary {
    @apply form-input block w-full rounded-md border-border bg-background px-3 text-left shadow-sm placeholder:text-muted-foreground focus:border-ring focus:placeholder-transparent focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 sm:text-sm;
  }

  .input-edit-node {
-    @apply input-primary w-full border-border pb-0.5 pt-0.5 text-left;
+    @apply primary-input w-full pb-0.5 pt-0.5 text-left;
  }
  .input-search {
-    @apply input-primary mx-2 pr-7;
+    @apply primary-input mx-2 pr-7;
  }
  .input-disable {
    @apply border-transparent bg-border placeholder:text-ring;
@ -414,7 +420,7 @@
    @apply input-edit-node relative pr-8;
  }
  .dropdown-component-false-outline {
-    @apply input-primary py-2 pl-3 pr-10 text-left;
+    @apply primary-input py-2 pl-3 pr-10 text-left;
  }
  .dropdown-component-display {
    @apply block w-full truncate bg-background;
@ -780,6 +786,9 @@
  .node-modal-button-box {
    @apply flex-max-width flex-row-reverse bg-input px-4 pb-3;
  }
+  .link-color {
+    @apply font-semibold text-foreground;
+  }
  .node-modal-button {
    @apply inline-flex w-full justify-center rounded-md border border-transparent bg-status-red px-4 py-2 text-base font-medium text-background shadow-sm hover:bg-ring sm:ml-3 sm:w-auto sm:text-sm;
  }
--- a/src/frontend/src/types/tabs/index.ts
+++ b/src/frontend/src/types/tabs/index.ts
@ -18,6 +18,8 @@ export type TabsContextType = {
  ) => void;
  downloadFlows: () => void;
  uploadFlows: () => void;
+  isBuilt: boolean;
+  setIsBuilt: (state: boolean) => void;
  uploadFlow: (newFlow?: boolean, file?: File) => void;
  hardReset: () => void;
  getNodeId: (nodeType: string) => string;
--- a/src/frontend/src/utils/utils.ts
+++ b/src/frontend/src/utils/utils.ts
@ -467,7 +467,7 @@ export function getCurlCode(

 /**
 * Function to get the python code for the API
- * @param {string} flowName - The name of the flow
+ * @param {string} flow - The current flow
 * @returns {string} - The python code
 */
 export function getPythonCode(
@ -489,3 +489,33 @@ flow = load_flow_from_json("${flowName}.json", tweaks=TWEAKS)
 inputs = ${inputs}
 flow(inputs)`;
 }
+
+/**
+ * Function to get the widget code for the API
+ * @param {string} flow - The current flow.
+ * @returns {string} - The widget code
+ */
+export function getWidgetCode(flow: FlowType, tabsState?: TabsState): string {
+  const flowId = flow.id;
+  const flowName = flow.name;
+  const inputs = buildInputs(tabsState, flow.id);
+
+  return `<script src="https://cdn.jsdelivr.net/gh/logspace-ai/langflow-embedded-chat@main/dist/build/static/js/bundle.min.js"></script>
+
+<!-- chat_inputs: Stringified JSON with all the input keys and its values. The value of the key that is defined
+as chat_input_field will be overwritten by the chat message.
+chat_input_field: Input key that you want the chat to send the user message with. -->
+<langflow-chat
+  window_title="${flowName}"
+  flow_id="${flowId}"
+  ${
+    tabsState[flow.id] && tabsState[flow.id].formKeysData
+      ? `chat_inputs='${inputs}'
+  chat_input_field="${
+    Object.keys(tabsState[flow.id].formKeysData.input_keys)[0]
+  }"
+  `
+      : ""
+  }host_url="http://localhost:7860" 
+></langflow-chat>`;
+}