Merge branch 'dev' into ctransformers

2023-05-29 17:16:24 +01:00 · 2023-05-29 17:16:24 +01:00 · b9773668b4
commit b9773668b4
parent f315d78f14 4e474eaaae
16 changed files with 169 additions and 98 deletions
--- a/poetry.lock
+++ b/poetry.lock
@ -212,14 +212,14 @@ server = ["Deprecated (>=1.2.0,<1.3.0)", "PyYAML (>=5.4.1,<6.1.0)", "aiofiles (>

 [[package]]
 name = "asgiref"
-version = "3.7.1"
+version = "3.7.2"
 description = "ASGI specs, helper code, and adapters"
 category = "main"
 optional = false
 python-versions = ">=3.7"
 files = [
-    {file = "asgiref-3.7.1-py3-none-any.whl", hash = "sha256:33958cb2e4b3cd8b1b06ef295bd8605cde65b11df51d3beab39e2e149a610ab3"},
-    {file = "asgiref-3.7.1.tar.gz", hash = "sha256:8de379fcc383bcfe4507e229fc31209ea23d4831c850f74063b2c11639474dd2"},
+    {file = "asgiref-3.7.2-py3-none-any.whl", hash = "sha256:89b2ef2247e3b562a16eef663bc0e2e703ec6468e2fa8a5cd61cd449786d4f6e"},
+    {file = "asgiref-3.7.2.tar.gz", hash = "sha256:9e0ce3aa93a819ba5b45120216b23878cf6e8525eb3848653452b4192b92afed"},
 ]

 [package.dependencies]
@ -387,14 +387,14 @@ uvloop = ["uvloop (>=0.15.2)"]

 [[package]]
 name = "cachetools"
-version = "5.3.0"
+version = "5.3.1"
 description = "Extensible memoizing collections and decorators"
 category = "main"
 optional = false
-python-versions = "~=3.7"
+python-versions = ">=3.7"
 files = [
-    {file = "cachetools-5.3.0-py3-none-any.whl", hash = "sha256:429e1a1e845c008ea6c85aa35d4b98b65d6a9763eeef3e37e92728a12d1de9d4"},
-    {file = "cachetools-5.3.0.tar.gz", hash = "sha256:13dfddc7b8df938c21a940dfa6557ce6e94a2f1cdfa58eb90c805721d58f2c14"},
+    {file = "cachetools-5.3.1-py3-none-any.whl", hash = "sha256:95ef631eeaea14ba2e36f06437f36463aac3a096799e876ee55e5cdccb102590"},
+    {file = "cachetools-5.3.1.tar.gz", hash = "sha256:dce83f2d9b4e1f732a8cd44af8e8fab2dbe46201467fc98b3ef8f269092bf62b"},
 ]

 [[package]]
@ -956,21 +956,21 @@ files = [

 [[package]]
 name = "deprecated"
-version = "1.2.13"
+version = "1.2.14"
 description = "Python @deprecated decorator to deprecate old python classes, functions or methods."
 category = "main"
 optional = false
 python-versions = ">=2.7, !=3.0.*, !=3.1.*, !=3.2.*, !=3.3.*"
 files = [
-    {file = "Deprecated-1.2.13-py2.py3-none-any.whl", hash = "sha256:64756e3e14c8c5eea9795d93c524551432a0be75629f8f29e67ab8caf076c76d"},
-    {file = "Deprecated-1.2.13.tar.gz", hash = "sha256:43ac5335da90c31c24ba028af536a91d41d53f9e6901ddb021bcc572ce44e38d"},
+    {file = "Deprecated-1.2.14-py2.py3-none-any.whl", hash = "sha256:6fac8b097794a90302bdbb17b9b815e732d3c4720583ff1b198499d78470466c"},
+    {file = "Deprecated-1.2.14.tar.gz", hash = "sha256:e5323eb936458dccc2582dc6f9c322c852a775a27065ff2b0c4970b9d53d01b3"},
 ]

 [package.dependencies]
 wrapt = ">=1.10,<2"

 [package.extras]
-dev = ["PyTest", "PyTest (<5)", "PyTest-Cov", "PyTest-Cov (<2.6)", "bump2version (<1)", "configparser (<5)", "importlib-metadata (<3)", "importlib-resources (<4)", "sphinx (<2)", "sphinxcontrib-websupport (<2)", "tox", "zipp (<2)"]
+dev = ["PyTest", "PyTest-Cov", "bump2version (<1)", "sphinx (<2)", "tox"]

 [[package]]
 name = "dill"
@ -1183,25 +1183,25 @@ importlib-resources = {version = ">=5.0", markers = "python_version < \"3.10\""}

 [[package]]
 name = "fastapi"
-version = "0.92.0"
+version = "0.95.2"
 description = "FastAPI framework, high performance, easy to learn, fast to code, ready for production"
 category = "main"
 optional = false
 python-versions = ">=3.7"
 files = [
-    {file = "fastapi-0.92.0-py3-none-any.whl", hash = "sha256:ae7b97c778e2f2ec3fb3cb4fb14162129411d99907fb71920f6d69a524340ebf"},
-    {file = "fastapi-0.92.0.tar.gz", hash = "sha256:023a0f5bd2c8b2609014d3bba1e14a1d7df96c6abea0a73070621c9862b9a4de"},
+    {file = "fastapi-0.95.2-py3-none-any.whl", hash = "sha256:d374dbc4ef2ad9b803899bd3360d34c534adc574546e25314ab72c0c4411749f"},
+    {file = "fastapi-0.95.2.tar.gz", hash = "sha256:4d9d3e8c71c73f11874bcf5e33626258d143252e329a01002f767306c64fb982"},
 ]

 [package.dependencies]
 pydantic = ">=1.6.2,<1.7 || >1.7,<1.7.1 || >1.7.1,<1.7.2 || >1.7.2,<1.7.3 || >1.7.3,<1.8 || >1.8,<1.8.1 || >1.8.1,<2.0.0"
-starlette = ">=0.25.0,<0.26.0"
+starlette = ">=0.27.0,<0.28.0"

 [package.extras]
 all = ["email-validator (>=1.1.1)", "httpx (>=0.23.0)", "itsdangerous (>=1.1.0)", "jinja2 (>=2.11.2)", "orjson (>=3.2.1)", "python-multipart (>=0.0.5)", "pyyaml (>=5.3.1)", "ujson (>=4.0.1,!=4.0.2,!=4.1.0,!=4.2.0,!=4.3.0,!=5.0.0,!=5.1.0)", "uvicorn[standard] (>=0.12.0)"]
 dev = ["pre-commit (>=2.17.0,<3.0.0)", "ruff (==0.0.138)", "uvicorn[standard] (>=0.12.0,<0.21.0)"]
-doc = ["mdx-include (>=1.4.1,<2.0.0)", "mkdocs (>=1.1.2,<2.0.0)", "mkdocs-markdownextradata-plugin (>=0.1.7,<0.3.0)", "mkdocs-material (>=8.1.4,<9.0.0)", "pyyaml (>=5.3.1,<7.0.0)", "typer[all] (>=0.6.1,<0.8.0)"]
-test = ["anyio[trio] (>=3.2.1,<4.0.0)", "black (==22.10.0)", "coverage[toml] (>=6.5.0,<8.0)", "databases[sqlite] (>=0.3.2,<0.7.0)", "email-validator (>=1.1.1,<2.0.0)", "flask (>=1.1.2,<3.0.0)", "httpx (>=0.23.0,<0.24.0)", "isort (>=5.0.6,<6.0.0)", "mypy (==0.982)", "orjson (>=3.2.1,<4.0.0)", "passlib[bcrypt] (>=1.7.2,<2.0.0)", "peewee (>=3.13.3,<4.0.0)", "pytest (>=7.1.3,<8.0.0)", "python-jose[cryptography] (>=3.3.0,<4.0.0)", "python-multipart (>=0.0.5,<0.0.6)", "pyyaml (>=5.3.1,<7.0.0)", "ruff (==0.0.138)", "sqlalchemy (>=1.3.18,<1.4.43)", "types-orjson (==3.6.2)", "types-ujson (==5.6.0.0)", "ujson (>=4.0.1,!=4.0.2,!=4.1.0,!=4.2.0,!=4.3.0,!=5.0.0,!=5.1.0,<6.0.0)"]
+doc = ["mdx-include (>=1.4.1,<2.0.0)", "mkdocs (>=1.1.2,<2.0.0)", "mkdocs-markdownextradata-plugin (>=0.1.7,<0.3.0)", "mkdocs-material (>=8.1.4,<9.0.0)", "pyyaml (>=5.3.1,<7.0.0)", "typer-cli (>=0.0.13,<0.0.14)", "typer[all] (>=0.6.1,<0.8.0)"]
+test = ["anyio[trio] (>=3.2.1,<4.0.0)", "black (==23.1.0)", "coverage[toml] (>=6.5.0,<8.0)", "databases[sqlite] (>=0.3.2,<0.7.0)", "email-validator (>=1.1.1,<2.0.0)", "flask (>=1.1.2,<3.0.0)", "httpx (>=0.23.0,<0.24.0)", "isort (>=5.0.6,<6.0.0)", "mypy (==0.982)", "orjson (>=3.2.1,<4.0.0)", "passlib[bcrypt] (>=1.7.2,<2.0.0)", "peewee (>=3.13.3,<4.0.0)", "pytest (>=7.1.3,<8.0.0)", "python-jose[cryptography] (>=3.3.0,<4.0.0)", "python-multipart (>=0.0.5,<0.0.7)", "pyyaml (>=5.3.1,<7.0.0)", "ruff (==0.0.138)", "sqlalchemy (>=1.3.18,<1.4.43)", "types-orjson (==3.6.2)", "types-ujson (==5.7.0.1)", "ujson (>=4.0.1,!=4.0.2,!=4.1.0,!=4.2.0,!=4.3.0,!=5.0.0,!=5.1.0,<6.0.0)"]

 [[package]]
 name = "filelock"
@ -2394,13 +2394,13 @@ test = ["coverage", "pytest", "pytest-cov"]

 [[package]]
 name = "llama-cpp-python"
-version = "0.1.50"
+version = "0.1.55"
 description = "A Python wrapper for llama.cpp"
 category = "main"
 optional = false
 python-versions = ">=3.7"
 files = [
-    {file = "llama_cpp_python-0.1.50.tar.gz", hash = "sha256:e305ae1b9f135f94afd8dd227701e6a1cd36db9c28f736b830ec364127c00bb9"},
+    {file = "llama_cpp_python-0.1.55.tar.gz", hash = "sha256:1bc749f314a979c601b2dae22eb1f2d63fe791bc1237cce24d36b4f856be8ca2"},
 ]

 [package.dependencies]
@ -5021,14 +5021,14 @@ tests = ["cython", "littleutils", "pygments", "pytest", "typeguard"]

 [[package]]
 name = "starlette"
-version = "0.25.0"
+version = "0.27.0"
 description = "The little ASGI library that shines."
 category = "main"
 optional = false
 python-versions = ">=3.7"
 files = [
-    {file = "starlette-0.25.0-py3-none-any.whl", hash = "sha256:774f1df1983fd594b9b6fb3ded39c2aa1979d10ac45caac0f4255cbe2acb8628"},
-    {file = "starlette-0.25.0.tar.gz", hash = "sha256:854c71e73736c429c2bdb07801f2c76c9cba497e7c3cf4988fde5e95fe4cdb3c"},
+    {file = "starlette-0.27.0-py3-none-any.whl", hash = "sha256:918416370e846586541235ccd38a474c08b80443ed31c578a418e2209b3eef91"},
+    {file = "starlette-0.27.0.tar.gz", hash = "sha256:6a6b0d042acb8d469a01eba54e9cda6cbd24ac602c4cd016723117d6a7e73b75"},
 ]

 [package.dependencies]
@ -5971,14 +5971,14 @@ files = [

 [[package]]
 name = "xlsxwriter"
-version = "3.1.1"
+version = "3.1.2"
 description = "A Python module for creating Excel XLSX files."
 category = "main"
 optional = false
 python-versions = ">=3.6"
 files = [
-    {file = "XlsxWriter-3.1.1-py3-none-any.whl", hash = "sha256:b50e3bd905d7dafa6ea45210e2cc5600b4ccd104a0d3a4d4d7cf813b78426440"},
-    {file = "XlsxWriter-3.1.1.tar.gz", hash = "sha256:03459ee76f664470c4c63a8977cab624fb259d0fc1faac64dc9cc6f3cc08f945"},
+    {file = "XlsxWriter-3.1.2-py3-none-any.whl", hash = "sha256:331508ff39d610ecdaf979e458840bc1eab6e6a02cfd5d08f044f0f73636236f"},
+    {file = "XlsxWriter-3.1.2.tar.gz", hash = "sha256:78751099a770273f1c98b8d6643351f68f98ae8e6acf9d09d37dc6798f8cd3de"},
 ]

 [[package]]
@ -6150,4 +6150,4 @@ deploy = ["langchain-serve"]
 [metadata]
 lock-version = "2.0"
 python-versions = ">=3.9,<3.12"
-content-hash = "76ed90caa5b359e5c367272e7db37230e8dea200e7171f1ccfc2015eacebe1b0"
+content-hash = "e27db1a183064e9181241ce688ee70a4fee4b5df7d3ebf4b6c13eae8fffe4dcc"
--- a/pyproject.toml
+++ b/pyproject.toml
@ -22,7 +22,7 @@ langflow = "langflow.__main__:main"

 [tool.poetry.dependencies]
 python = ">=3.9,<3.12"
-fastapi = "^0.92.0"
+fastapi = "^0.95.0"
 uvicorn = "^0.20.0"
 beautifulsoup4 = "^4.11.2"
 google-search-results = "^2.4.1"
@ -30,14 +30,14 @@ google-api-python-client = "^2.79.0"
 typer = "^0.7.0"
 gunicorn = "^20.1.0"
 langchain = "^0.0.183"
-openai = "^0.27.2"
+openai = "^0.27.7"
 types-pyyaml = "^6.0.12.8"
 dill = "^0.3.6"
 pandas = "^1.5.3"
 chromadb = "^0.3.21"
 huggingface-hub = "^0.13.3"
 rich = "^13.3.3"
-llama-cpp-python = "0.1.50"
+llama-cpp-python = "^0.1.50"
 networkx = "^3.1"
 unstructured = "^0.5.11"
 pypdf = "^3.7.1"
@ -57,6 +57,7 @@ jina = "3.15.2"
 sentence-transformers = "^2.2.2"
 ctransformers = "^0.2.2"

+
 [tool.poetry.group.dev.dependencies]
 black = "^23.1.0"
 ipykernel = "^6.21.2"
--- a/src/backend/langflow/config.yaml
+++ b/src/backend/langflow/config.yaml
@ -42,6 +42,7 @@ documentloaders:
  - IMSDbLoader
  - GitbookLoader
  - ReadTheDocsLoader
+  - NotionDirectoryLoader
 embeddings:
  - OpenAIEmbeddings
  - HuggingFaceEmbeddings
@ -62,6 +63,9 @@ prompts:
  - ZeroShotPrompt
 textsplitters:
  - CharacterTextSplitter
+  - RecursiveCharacterTextSplitter
+  - LatexTextSplitter
+  - PythonCodeTextSplitter
 toolkits:
  - OpenAPIToolkit
  - JsonToolkit
--- a/src/backend/langflow/interface/document_loaders/base.py
+++ b/src/backend/langflow/interface/document_loaders/base.py
@ -118,7 +118,7 @@ class DocumentLoaderCreator(LangChainTypeCreator):
                    "value": "",
                    "display_name": "Web Page",
                }
-            elif name in {"ReadTheDocsLoader"}:
+            elif name in {"ReadTheDocsLoader", "NotionDirectoryLoader"}:
                signature["template"]["path"] = {
                    "type": "str",
                    "required": True,
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@ -1,13 +1,17 @@
 import {
  BugAntIcon,
-  CheckCircleIcon,
  Cog6ToothIcon,
-  EllipsisHorizontalCircleIcon,
-  ExclamationCircleIcon,
  InformationCircleIcon,
  TrashIcon,
 } from "@heroicons/react/24/outline";
-import { classNames, nodeColors, nodeIcons, toNormalCase } from "../../utils";
+
+import {
+  CheckCircleIcon,
+  EllipsisHorizontalCircleIcon,
+  ExclamationCircleIcon,
+} from "@heroicons/react/24/solid";
+
+import { classNames, nodeColors, nodeIcons, toNormalCase, toTitleCase } from "../../utils";
 import ParameterComponent from "./components/parameterComponent";
 import { typesContext } from "../../contexts/typesContext";
 import { useContext, useState, useEffect, useRef, Fragment } from "react";
@ -101,7 +105,9 @@ export default function GenericNode({
              color: nodeColors[types[data.type]] ?? nodeColors.unknown,
            }}
          />
-          <div className="ml-2 truncate">{data.type}</div>
+          <Tooltip title={data.type} placement="top">
+              <div className="ml-2 truncate">{data.type}</div>
+          </Tooltip>
          <div>
            <Tooltip
              title={
@ -170,7 +176,7 @@ export default function GenericNode({
                )
                  ? ""
                  : "hidden",
-                "w-6 h-6  dark:text-gray-300  hover:animate-spin"
+                "w-6 h-6  dark:text-gray-300  hover:animate-spin-once"
              )}
            ></Cog6ToothIcon>
          </button>
@ -225,8 +231,8 @@ export default function GenericNode({
                      data.node.template[t].display_name
                        ? data.node.template[t].display_name
                        : data.node.template[t].name
-                        ? toNormalCase(data.node.template[t].name)
-                        : toNormalCase(t)
+                        ? toTitleCase(data.node.template[t].name)
+                        : toTitleCase(t)
                    }
                    name={t}
                    tooltipTitle={
--- a/src/frontend/src/components/chatComponent/chatTrigger/index.tsx
+++ b/src/frontend/src/components/chatComponent/chatTrigger/index.tsx
@ -23,14 +23,12 @@ export default function ChatTrigger({ open, setOpen }) {
    >
      <div className="absolute bottom-4 right-3">
        <div
-          // style={{ backgroundColor: nodeColors["chat"] }}
-          className="border flex justify-center align-center py-1 px-3 w-12 h-12 rounded-full bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 dark:border-gray-600"
+          className="border flex justify-center align-center py-1 px-3 w-12 h-12 rounded-full bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 dark:border-gray-600 cursor-pointer"
+          onClick={() => {
+            setOpen(true);
+          }}
        >
-          <button
-            onClick={() => {
-              setOpen(true);
-            }}
-          >
+          <button>
            <div className="flex gap-3  items-center">
              <ChatBubbleBottomCenterTextIcon
                className="h-6 w-6 mt-1"
--- a/src/frontend/src/components/inputComponent/index.tsx
+++ b/src/frontend/src/components/inputComponent/index.tsx
@ -32,7 +32,7 @@ export default function InputComponent({
          disabled ? " bg-gray-200 dark:bg-gray-700" : "",
          password && !pwdVisible && myValue !== "" ? "password" : ""
        )}
-        placeholder="Type a text"
+        placeholder="Type something..."
        onChange={(e) => {
          setMyValue(e.target.value);
          onChange(e.target.value);
--- a/src/frontend/src/components/inputListComponent/index.tsx
+++ b/src/frontend/src/components/inputListComponent/index.tsx
@ -33,7 +33,7 @@ export default function InputListComponent({
              "block w-full form-input rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
              (disabled ? " bg-gray-200" : "")
            }
-            placeholder="Type a text"
+            placeholder="Type something..."
            onChange={(e) => {
              setInputList((old) => {
                let newInputList = _.cloneDeep(old);
--- a/src/frontend/src/components/promptComponent/index.tsx
+++ b/src/frontend/src/components/promptComponent/index.tsx
@ -5,6 +5,7 @@ import CodeAreaModal from "../../modals/codeAreaModal";
 import TextAreaModal from "../../modals/textAreaModal";
 import { TextAreaComponentType } from "../../types/components";
 import GenericModal from "../../modals/genericModal";
+import { TypeModal } from "../../utils";

 export default function PromptAreaComponent({
  value,
@ -30,6 +31,7 @@ export default function PromptAreaComponent({
          onClick={() => {
            openPopUp(
              <GenericModal
+                type={TypeModal.PROMPT}
                value={myValue}
                buttonText="Check & Save"
                modalTitle="Edit Prompt"
@ -51,6 +53,7 @@ export default function PromptAreaComponent({
          onClick={() => {
            openPopUp(
              <GenericModal
+                type={TypeModal.PROMPT}
                value={myValue}
                buttonText="Check & Save"
                modalTitle="Edit Prompt"
--- a/src/frontend/src/components/textAreaComponent/index.tsx
+++ b/src/frontend/src/components/textAreaComponent/index.tsx
@ -3,6 +3,7 @@ import { useContext, useEffect, useState } from "react";
 import { PopUpContext } from "../../contexts/popUpContext";
 import { TextAreaComponentType } from "../../types/components";
 import GenericModal from "../../modals/genericModal";
+import { TypeModal } from "../../utils";

 export default function TextAreaComponent({
  value,
@ -24,6 +25,7 @@ export default function TextAreaComponent({
          onClick={() => {
            openPopUp(
              <GenericModal
+                type={TypeModal.TEXT}
                buttonText="Finishing Editing"
                modalTitle="Edit Text"
                value={myValue}
@ -45,6 +47,7 @@ export default function TextAreaComponent({
          onClick={() => {
            openPopUp(
              <GenericModal
+                type={TypeModal.TEXT}
                buttonText="Finishing Editing"
                modalTitle="Edit Text"
                value={myValue}
--- a/src/frontend/src/contexts/tabsContext.tsx
+++ b/src/frontend/src/contexts/tabsContext.tsx
@ -63,7 +63,8 @@ export function TabsProvider({ children }: { children: ReactNode }) {
              console.log(node.data.node.template[key].type);
              if (node.data.node.template[key].type === "file") {
                console.log(node.data.node.template[key]);
-                node.data.node.template[key].content = "";
+                // ! Commenting this out for now, as it is causing issues with the file upload
+                // node.data.node.template[key].content = "";
              }
            });
          });
--- a/src/frontend/src/modals/NodeModal/index.tsx
+++ b/src/frontend/src/modals/NodeModal/index.tsx
@ -3,7 +3,7 @@ import { XMarkIcon } from "@heroicons/react/24/outline";
 import { Fragment, useContext, useRef, useState } from "react";
 import { PopUpContext } from "../../contexts/popUpContext";
 import { NodeDataType } from "../../types/flow";
-import { nodeColors, nodeIcons, toNormalCase } from "../../utils";
+import { nodeColors, nodeIcons, toNormalCase, toTitleCase } from "../../utils";
 import { typesContext } from "../../contexts/typesContext";
 import ModalField from "./components/ModalField";

@ -103,8 +103,8 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
                                    data.node.template[t].display_name
                                      ? data.node.template[t].display_name
                                      : data.node.template[t].name
-                                      ? toNormalCase(data.node.template[t].name)
-                                      : toNormalCase(t)
+                                      ? toTitleCase(data.node.template[t].name)
+                                      : toTitleCase(t)
                                  }
                                  required={data.node.template[t].required}
                                  id={
--- a/src/frontend/src/modals/genericModal/index.tsx
+++ b/src/frontend/src/modals/genericModal/index.tsx
@ -5,19 +5,23 @@ import { PopUpContext } from "../../contexts/popUpContext";
 import { darkContext } from "../../contexts/darkContext";
 import { checkPrompt } from "../../controllers/API";
 import { alertContext } from "../../contexts/alertContext";
+import { TypeModal } from "../../utils";
 export default function PromptAreaModal({
  value,
  setValue,
  buttonText,
  modalTitle,
+  type
 }: {
  setValue: (value: string) => void;
  value: string;
  buttonText: string;
  modalTitle: string;
+  type: number;
 }) {
-  const [myButtonText, setmyButtonText] = useState(buttonText);
-  const [myModalTitle, setMyModalTitle] = useState(modalTitle);
+  const [myButtonText] = useState(buttonText);
+  const [myModalTitle] = useState(modalTitle);
+  const [myModalType] = useState(type);
  const [open, setOpen] = useState(true);
  const [myValue, setMyValue] = useState(value);
  const { dark } = useContext(darkContext);
@ -114,36 +118,46 @@ export default function PromptAreaModal({
                      type="button"
                      className="inline-flex w-full justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm"
                      onClick={() => {
-                        checkPrompt(myValue)
-                          .then((apiReturn) => {
-                            if (apiReturn.data) {
-                              let inputVariables =
-                                apiReturn.data.input_variables;
-                              if (inputVariables.length === 0) {
-                                setErrorData({
-                                  title:
-                                    "The template you are attempting to use does not contain any variables for data entry.",
-                                });
+                        switch (myModalType) {
+                          case 1:
+                            setModalOpen(false);
+                          break;
+                          case 2:
+                            checkPrompt(myValue)
+                            .then((apiReturn) => {
+                              if (apiReturn.data) {
+                                let inputVariables =
+                                  apiReturn.data.input_variables;
+                                if (inputVariables.length === 0) {
+                                  setErrorData({
+                                    title:
+                                      "The template you are attempting to use does not contain any variables for data entry.",
+                                  });
+                                } else {
+                                  setSuccessData({
+                                    title: "Prompt is ready",
+                                  });
+                                  setModalOpen(false);
+                                  setValue(myValue);
+                                }
                              } else {
-                                setSuccessData({
-                                  title: "Prompt is ready",
+                                setErrorData({
+                                  title: "Something went wrong, please try again",
                                });
-                                setModalOpen(false);
-                                setValue(myValue);
                              }
-                            } else {
-                              setErrorData({
-                                title: "Something went wrong, please try again",
+                            })
+                            .catch((error) => {
+                              return setErrorData({
+                                title:
+                                  "There is something wrong with this prompt, please review it",
+                                list: [error.response.data.detail],
                              });
-                            }
-                          })
-                          .catch((error) => {
-                            return setErrorData({
-                              title:
-                                "There is something wrong with this prompt, please review it",
-                              list: [error.response.data.detail],
                            });
-                          });
+                          break;
+                        
+                          default:
+                            break;
+                        }
                      }}
                    >
                      {myButtonText}
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
@ -4,6 +4,7 @@ import { nodeColors, nodeIcons, nodeNames } from "../../../../utils";
 import { useContext, useEffect, useState } from "react";
 import { typesContext } from "../../../../contexts/typesContext";
 import { APIClassType, APIObjectType } from "../../../../types/api";
+import Tooltip from "../../../../components/TooltipComponent";

 export default function ExtraSidebar() {
  const { data } = useContext(typesContext);
@ -33,28 +34,30 @@ export default function ExtraSidebar() {
              {Object.keys(data[d])
                .sort()
                .map((t: string, k) => (
-                  <div key={k}>
-                    <div
-                      draggable
-                      className={" cursor-grab border-l-8 rounded-l-md"}
-                      style={{
-                        borderLeftColor: nodeColors[d] ?? nodeColors.unknown,
-                      }}
-                      onDragStart={(event) =>
-                        onDragStart(event, {
-                          type: t,
-                          node: data[d][t],
-                        })
-                      }
-                    >
-                      <div className="flex w-full justify-between text-sm px-3 py-1 items-center border-dashed border-gray-400 dark:border-gray-600 border-l-0 rounded-md rounded-l-none border">
-                        <span className="text-black dark:text-white w-36 pr-1 truncate text-xs">
-                          {t}
-                        </span>
-                        <Bars2Icon className="w-4 h-6  text-gray-400 dark:text-gray-600" />
+                  <Tooltip title={t.length > 21 ? t : ''} placement="right">
+                    <div key={k}>
+                      <div
+                        draggable
+                        className={" cursor-grab border-l-8 rounded-l-md"}
+                        style={{
+                          borderLeftColor: nodeColors[d] ?? nodeColors.unknown,
+                        }}
+                        onDragStart={(event) =>
+                          onDragStart(event, {
+                            type: t,
+                            node: data[d][t],
+                          })
+                        }
+                      >
+                        <div className="flex w-full justify-between text-sm px-3 py-1 items-center border-dashed border-gray-400 dark:border-gray-600 border-l-0 rounded-md rounded-l-none border">
+                          <span className="text-black dark:text-white w-36 pr-1 truncate text-xs">
+                            {t}
+                          </span>
+                          <Bars2Icon className="w-4 h-6  text-gray-400 dark:text-gray-600" />
+                        </div>
                      </div>
                    </div>
-                  </div>
+                  </Tooltip>
                ))}
              {Object.keys(data[d]).length === 0 && (
                <div className="text-gray-400 text-center">Coming soon</div>
--- a/src/frontend/src/utils.ts
+++ b/src/frontend/src/utils.ts
@ -25,6 +25,11 @@ export function classNames(...classes: Array<string>) {
  return classes.filter(Boolean).join(" ");
 }

+export enum TypeModal {
+  TEXT = 1,
+  PROMPT = 2 
+}
+
 export const textColors = {
  white: "text-white",
  red: "text-red-700",
@ -492,3 +497,35 @@ export const programmingLanguages: languageMap = {
  css: ".css",
  // add more file extensions here, make sure the key is same as language prop in CodeBlock.tsx component
 };
+
+export function toTitleCase(str: string) {
+	let result = str
+		.split("_")
+		.map((word, index) => {
+			if (index === 0) {
+
+				return checkUpperWords(word[0].toUpperCase() + word.slice(1).toLowerCase());
+			}
+			return checkUpperWords(word.toLowerCase());
+		})
+		.join(" ");
+
+	return result
+		.split("-")
+		.map((word, index) => {
+			if (index === 0) {
+				return checkUpperWords(word[0].toUpperCase() + word.slice(1).toLowerCase());
+			}
+			return checkUpperWords(word.toLowerCase());
+		})
+		.join(" ");
+}
+
+export const upperCaseWords: string[] = ["llm", "uri"];
+export function checkUpperWords(str: string) {
+  const words = str.split(' ').map((word) => {
+    return upperCaseWords.includes(word.toLowerCase()) ? word.toUpperCase() : word[0].toUpperCase() + word.slice(1).toLowerCase();
+  });
+
+  return words.join(' ');
+}
--- a/src/frontend/tailwind.config.js
+++ b/src/frontend/tailwind.config.js
@ -17,6 +17,7 @@ module.exports = {

      animation: {
        "pulse-green": "pulseGreen 1s linear",
+        'spin-once': 'spin 1s linear 0.7'
      },
      keyframes: {
        pulseGreen: {