Added Chat Widget HTML API Tab

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,7 +174,7 @@ export default function CodeTabsComponent({
           className="api-modal-tabs-content"
           key={index} // Remember to add a unique key prop
         >
-          {index < 3 ? (
+          {index < 4 ? (
             <SyntaxHighlighter
               className="mt-0 h-full w-full overflow-auto custom-scroll"
               language={tab.mode}
@@ -182,7 +182,7 @@ export default function CodeTabsComponent({
             >
               {tab.code}
             </SyntaxHighlighter>
-          ) : index === 3 ? (
+          ) : index === 4 ? (
             <>
               <div className="api-modal-according-display">
                 <div

src/frontend/src/modals/ApiModal/index.tsx

@@ -21,6 +21,7 @@ import {
   getCurlCode,
   getPythonApiCode,
   getPythonCode,
+  getWidgetCode,
 } from "../../utils/utils";
 import BaseModal from "../baseModal";
 
@@ -43,6 +44,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 +69,13 @@ const ApiModal = forwardRef(
         language: "py",
         code: pythonCode,
       },
+      {
+        name: "Chat Widget HTML",
+        mode: "html",
+        image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
+        language: "py",
+        code: widgetCode,
+      },
     ]);
 
     function startState() {
@@ -111,6 +120,13 @@ const ApiModal = forwardRef(
             image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
             code: pythonCode,
           },
+          {
+            name: "Chat Widget HTML",
+            mode: "html",
+            image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
+            language: "py",
+            code: widgetCode,
+          },
           {
             name: "Tweaks",
             mode: "python",
@@ -143,6 +159,13 @@ const ApiModal = forwardRef(
             language: "py",
             code: pythonCode,
           },
+          {
+            name: "Chat Widget HTML",
+            mode: "html",
+            image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
+            language: "py",
+            code: widgetCode,
+          },
         ]);
       }
     }, [flow["data"]["nodes"], open]);
@@ -210,13 +233,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);
     }

src/frontend/src/utils/utils.ts

@@ -364,7 +364,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(
@@ -386,3 +386,27 @@ 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>
+
+<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>`;
+}