Title case on names/title, fixing/changing icons, cursor on chat

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)
+                        ? toTitleCase(data.node.template[t].name)
-                        : toNormalCase(t)
+                        : toTitleCase(t)
                     }
                     name={t}
                     tooltipTitle={

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 cursor-pointer"
-          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"
+          onClick={() => {
+            setOpen(true);
+          }}
         >
-          <button
+          <button>
-            onClick={() => {
-              setOpen(true);
-            }}
-          >
             <div className="flex gap-3  items-center">
               <ChatBubbleBottomCenterTextIcon
                 className="h-6 w-6 mt-1"

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)
+                                      ? toTitleCase(data.node.template[t].name)
-                                      : toNormalCase(t)
+                                      : toTitleCase(t)
                                   }
                                   required={data.node.template[t].required}
                                   id={

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}>
+                  <Tooltip title={t.length > 21 ? t : ''} placement="right">
-                    <div
+                    <div key={k}>
-                      draggable
+                      <div
-                      className={" cursor-grab border-l-8 rounded-l-md"}
+                        draggable
-                      style={{
+                        className={" cursor-grab border-l-8 rounded-l-md"}
-                        borderLeftColor: nodeColors[d] ?? nodeColors.unknown,
+                        style={{
-                      }}
+                          borderLeftColor: nodeColors[d] ?? nodeColors.unknown,
-                      onDragStart={(event) =>
+                        }}
-                        onDragStart(event, {
+                        onDragStart={(event) =>
-                          type: t,
+                          onDragStart(event, {
-                          node: data[d][t],
+                            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">
+                        <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">
-                          {t}
+                          <span className="text-black dark:text-white w-36 pr-1 truncate text-xs">
-                        </span>
+                            {t}
-                        <Bars2Icon className="w-4 h-6  text-gray-400 dark:text-gray-600" />
+                          </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>

src/frontend/src/utils.ts

@@ -497,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(' ');
+}

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: {