From a624cee8db0e9577656ae43ccb594d3f208b474b Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Wed, 26 Jul 2023 07:55:12 -0300
Subject: [PATCH] Added Chat Widget HTML API Tab

---
 .../components/codeTabsComponent/index.tsx    |  6 ++--
 src/frontend/src/modals/ApiModal/index.tsx    | 31 +++++++++++++++++--
 src/frontend/src/utils/utils.ts               | 26 +++++++++++++++-
 3 files changed, 56 insertions(+), 7 deletions(-)

diff --git a/src/frontend/src/components/codeTabsComponent/index.tsx b/src/frontend/src/components/codeTabsComponent/index.tsx
index 1357e0c79..8d68641bb 100644
--- 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,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
diff --git a/src/frontend/src/modals/ApiModal/index.tsx b/src/frontend/src/modals/ApiModal/index.tsx
index 1cbcff6c2..92bb7b52f 100644
--- 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";
 
@@ -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);
     }
diff --git a/src/frontend/src/utils/utils.ts b/src/frontend/src/utils/utils.ts
index 962d1de48..6e5baafaa 100644
--- a/src/frontend/src/utils/utils.ts
+++ b/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>`;
+}