feat: Kl 15 rebrand the new workbench [old]

src/frontend/.gitignore

@@ -11,6 +11,9 @@
 # production
 /build
 
+# ide
+.vscode
+
 # misc
 .DS_Store
 .env.local

src/frontend/src/components/common/crashErrorComponent/index.tsx

@@ -44,7 +44,7 @@ export default function CrashErrorComponent({
 
             <CardFooter>
               <div className="m-auto mt-4 flex justify-center">
-                <Button onClick={resetErrorBoundary}>Restart Langflow</Button>
+                <Button onClick={resetErrorBoundary}>Restart Workbench</Button>
 
                 <a
                   href="https://github.com/langflow-ai/langflow/issues/new"

src/frontend/src/components/common/kendraLabsLogo/index.tsx

@@ -0,0 +1,26 @@
+import KendraLabsLogo from "@/assets/KendraLabsLogo200x200.png";
+import ChainLogo from "@/assets/logo.svg?react";
+import { ENABLE_NEW_LOGO } from "@/customization/feature-flags";
+import React from "react";
+
+interface LogoProps {
+  title?: string;
+  className?: string;
+  chainClassName?: string;
+  alt?: string;
+}
+
+const Logo: React.FC<LogoProps> = ({
+  title = "Kendra Labs Logo",
+  className = "absolute h-[18px] w-[18px]",
+  chainClassName = "absolute h-[18px] w-[18px]",
+  alt = "Kendra Labs Logo",
+}) => {
+  return ENABLE_NEW_LOGO ? (
+    <img src={KendraLabsLogo} className={className} alt={alt} />
+  ) : (
+    <ChainLogo title={title} className={chainClassName} />
+  );
+};
+
+export default Logo;

src/frontend/src/components/core/appHeaderComponent/index.tsx

@@ -1,16 +1,12 @@
 import AlertDropdown from "@/alerts/alertDropDown";
-import DataStaxLogo from "@/assets/DataStaxLogo.svg?react";
-import LangflowLogo from "@/assets/LangflowLogo.svg?react";
 import ForwardedIconComponent from "@/components/common/genericIconComponent";
+import Logo from "@/components/common/kendraLabsLogo";
 import ShadTooltip from "@/components/common/shadTooltipComponent";
 import { Button } from "@/components/ui/button";
 import { Separator } from "@/components/ui/separator";
 import { CustomOrgSelector } from "@/customization/components/custom-org-selector";
 import { CustomProductSelector } from "@/customization/components/custom-product-selector";
-import {
-  ENABLE_DATASTAX_LANGFLOW,
-  ENABLE_NEW_LOGO,
-} from "@/customization/feature-flags";
+import { ENABLE_DATASTAX_LANGFLOW } from "@/customization/feature-flags";
 import { useCustomNavigate } from "@/customization/hooks/use-custom-navigate";
 import useTheme from "@/customization/hooks/use-custom-theme";
 import useAlertStore from "@/stores/alertStore";
@@ -59,13 +55,7 @@ export default function AppHeader(): JSX.Element {
           className="mr-1 flex h-8 w-8 items-center"
           data-testid="icon-ChevronLeft"
         >
-          {ENABLE_DATASTAX_LANGFLOW ? (
-            <DataStaxLogo className="fill-black dark:fill-[white]" />
-          ) : ENABLE_NEW_LOGO ? (
-            <LangflowLogo className="h-5 w-6" />
-          ) : (
-            <span className="fill-black text-2xl dark:fill-white">⛓️</span>
-          )}
+          <Logo className="h-6 w-6" chainClassName="text-2xl" />
         </Button>
         {ENABLE_DATASTAX_LANGFLOW && (
           <>
@@ -140,7 +130,7 @@ export default function AppHeader(): JSX.Element {
         {!ENABLE_DATASTAX_LANGFLOW && (
           <>
             <ShadTooltip
-              content="Go to LangflowStore"
+              content="Go to WorkbenchStore"
               side="bottom"
               styleClasses="z-10"
             >

src/frontend/src/constants/constants.ts

@@ -241,7 +241,7 @@ export const DESCRIPTIONS: string[] = [
   "Generate, Innovate, Communicate.",
   "Conversation Catalyst Engine.",
   "Language Chainlink Master.",
-  "Design Dialogues with Langflow.",
+  "Design Dialogues with Workbench.",
   "Nurture NLP Nodes Here.",
   "Conversational Cartography Unlocked.",
   "Design, Develop, Dialogize.",

src/frontend/src/customization/feature-flags.ts

@@ -8,5 +8,5 @@ export const ENABLE_MVPS = false;
 export const ENABLE_CUSTOM_PARAM = false;
 export const ENABLE_INTEGRATIONS = false;
 export const ENABLE_NEW_LOGO = true;
-export const ENABLE_DATASTAX_LANGFLOW = false;
+export const ENABLE_DATASTAX_LANGFLOW = true;
 export const ENABLE_HOMEPAGE = true;

src/frontend/src/flow_constants.tsx

@@ -20,7 +20,7 @@ export const DESCRIPTIONS: string[] = [
   "Generate, Innovate, Communicate.",
   "Conversation Catalyst Engine.",
   "Language Chainlink Master.",
-  "Design Dialogues with Langflow.",
+  "Design Dialogues with Workbench.",
   "Nurture NLP Nodes Here.",
   "Conversational Cartography Unlocked.",
   "Design, Develop, Dialogize.",
@@ -31,7 +31,7 @@ export const DESCRIPTIONS: string[] = [
   "Where Language Meets Logic.",
   "Building Intelligent Interactions.",
   "Your Passport to Linguistic Landscapes.",
-  "Create, Curate, Communicate with Langflow.",
+  "Create, Curate, Communicate with Workbench.",
   "Flow into the Future of Language.",
   "Mapping Meaningful Conversations.",
   "Unravel the Art of Articulation.",
@@ -41,7 +41,7 @@ export const DESCRIPTIONS: string[] = [
   "The Pinnacle of Prompt Generation.",
   "Language Models, Mapped and Mastered.",
   "Powerful Prompts, Perfectly Positioned.",
-  "Innovation in Interaction with Langflow.",
+  "Innovation in Interaction with Workbench.",
   "Your Toolkit for Text Generation.",
   "Unfolding Linguistic Possibilities.",
   "Building Powerful Solutions with Language Models.",

src/frontend/src/modals/IOModal/components/chatView/chat-view.tsx

@@ -1,7 +1,5 @@
-import LangflowLogo from "@/assets/LangflowLogo.svg?react";
-import ChainLogo from "@/assets/logo.svg?react";
+import Logo from "@/components/common/kendraLabsLogo";
 import { TextEffectPerChar } from "@/components/ui/textAnimation";
-import { ENABLE_NEW_LOGO } from "@/customization/feature-flags";
 import { track } from "@/customization/utils/analytics";
 import { useMessagesStore } from "@/stores/messagesStore";
 import { useUtilityStore } from "@/stores/utilityStore";
@@ -180,17 +178,10 @@ export default function ChatView({
           ) : (
             <div className="flex h-full w-full flex-col items-center justify-center">
               <div className="flex flex-col items-center justify-center gap-4 p-8">
-                {ENABLE_NEW_LOGO ? (
-                  <LangflowLogo
-                    title="Langflow logo"
-                    className="h-10 w-10 scale-[1.5]"
-                  />
-                ) : (
-                  <ChainLogo
-                    title="Langflow logo"
-                    className="h-10 w-10 scale-[1.5]"
-                  />
-                )}
+                <Logo
+                  className="h-10 w-10 scale-[1.5]"
+                  chainClassName="h-10 w-10 scale-[1.5]"
+                />
                 <div className="flex flex-col items-center justify-center">
                   <h3 className="mt-2 pb-2 text-2xl font-semibold text-primary">
                     New chat

src/frontend/src/modals/IOModal/components/chatView/chatMessage/components/chat-logo-icon.tsx

@@ -1,22 +1,13 @@
-import LangflowLogo from "@/assets/LangflowLogo.svg?react";
-import ChainLogo from "@/assets/logo.svg?react";
-import { ENABLE_NEW_LOGO } from "@/customization/feature-flags";
+import Logo from "@/components/common/kendraLabsLogo";
 
 export default function LogoIcon() {
   return (
     <div className="relative flex h-8 w-8 items-center justify-center rounded-md bg-muted">
       <div className="flex h-8 w-8 items-center justify-center">
-        {ENABLE_NEW_LOGO ? (
-          <LangflowLogo
-            title="Langflow Logo"
-            className="absolute h-[18px] w-[18px]"
-          />
-        ) : (
-          <ChainLogo
-            title="Langflow Logo"
-            className="absolute h-[18px] w-[18px]"
-          />
-        )}
+        <Logo
+          className="absolute h-[18px] w-[18px]"
+          chainClassName="absolute h-[18px] w-[18px]"
+        />
       </div>
     </div>
   );

src/frontend/src/modals/shareModal/index.tsx

@@ -211,7 +211,7 @@ export default function ShareModal({
         <BaseModal.Header
           description={`Publish ${
             is_component ? "your component" : "workflow"
-          } to the Langflow Store.`}
+          } to the Workbench Store.`}
         >
           <span className="pr-2">Share</span>
           <IconComponent

src/frontend/src/modals/templatesModal/components/GetStartedComponent/index.tsx

@@ -40,7 +40,7 @@ export default function GetStartedComponent() {
 
   return (
     <div className="flex flex-1 flex-col gap-4 md:gap-8">
-      <BaseModal.Header description="Start with templates showcasing Langflow's Prompting, RAG, and Agent use cases.">
+      <BaseModal.Header description="Start with templates showcasing Workbench's Prompting, RAG, and Agent use cases.">
         Get started
       </BaseModal.Header>
       <div className="grid flex-1 grid-cols-1 gap-4 lg:grid-cols-3">

src/frontend/src/pages/AdminPage/LoginPage/index.tsx

@@ -1,6 +1,6 @@
-import LangflowLogo from "@/assets/LangflowLogo.svg?react";
 import { useLoginUser } from "@/controllers/API/queries/auth";
-import { ENABLE_NEW_LOGO } from "@/customization/feature-flags";
+
+import Logo from "@/components/common/kendraLabsLogo";
 import { useContext, useState } from "react";
 import { Button } from "../../../components/ui/button";
 import { Input } from "../../../components/ui/input";
@@ -51,14 +51,11 @@ export default function LoginAdminPage() {
   return (
     <div className="flex h-full w-full flex-col items-center justify-center bg-muted">
       <div className="flex w-72 flex-col items-center justify-center gap-2">
-        {ENABLE_NEW_LOGO ? (
-          <LangflowLogo
-            title="Langflow logo"
-            className="h-10 w-10 scale-[1.5]"
-          />
-        ) : (
-          <span className="mb-4 text-5xl">⛓️</span>
-        )}
+        <Logo
+          className="mb-4 h-10 w-10 scale-[1.5]"
+          chainClassName="mb-4 text-5xl"
+        />
+
         <span className="mb-6 text-2xl font-semibold text-primary">Admin</span>
         <Input
           onChange={({ target: { value } }) => {

src/frontend/src/pages/DeleteAccountPage/index.tsx

@@ -1,5 +1,4 @@
-import LangflowLogo from "@/assets/LangflowLogo.svg?react";
-import { ENABLE_NEW_LOGO } from "@/customization/feature-flags";
+import Logo from "@/components/common/kendraLabsLogo";
 import { useState } from "react";
 import { Button } from "../../components/ui/button";
 import { Input } from "../../components/ui/input";
@@ -19,14 +18,10 @@ export default function DeleteAccountPage() {
   return (
     <div className="flex h-full w-full flex-col items-center justify-center bg-muted">
       <div className="flex w-72 flex-col items-center justify-center gap-2">
-        {ENABLE_NEW_LOGO ? (
-          <LangflowLogo
-            title="Langflow logo"
-            className="mb-4 h-10 w-10 scale-[1.5]"
-          />
-        ) : (
-          <span className="mb-4 text-5xl">⛓️</span>
-        )}
+        <Logo
+          className="mb-4 h-10 w-10 scale-[1.5]"
+          chainClassName="mb-4 text-5xl"
+        />
         <span className="mb-4 text-center text-2xl font-semibold text-primary">
           Delete your account
         </span>

src/frontend/src/pages/FlowPage/index.tsx

@@ -169,7 +169,7 @@ export default function FlowPage({ view }: { view?: boolean }): JSX.Element {
             href="https://medium.com/logspace/langflow-datastax-better-together-1b7462cebc4d"
             className="langflow-page-icon"
           >
-            <div className="mt-1">Langflow 🤝 DataStax</div>
+            <div className="mt-1">Workbench 🤝 DataStax</div>
 
             <div className={version ? "mt-2" : "mt-1"}>⛓️ v{version}</div>
           </a>

src/frontend/src/pages/LoginPage/index.tsx

@@ -1,7 +1,6 @@
-import LangflowLogo from "@/assets/LangflowLogo.svg?react";
+import Logo from "@/components/common/kendraLabsLogo";
 import { useLoginUser } from "@/controllers/API/queries/auth";
 import { CustomLink } from "@/customization/components/custom-link";
-import { ENABLE_NEW_LOGO } from "@/customization/feature-flags";
 import * as Form from "@radix-ui/react-form";
 import { useContext, useState } from "react";
 import InputComponent from "../../components/core/parameterRenderComponent/components/inputComponent";
@@ -67,14 +66,11 @@ export default function LoginPage(): JSX.Element {
     >
       <div className="flex h-full w-full flex-col items-center justify-center bg-muted">
         <div className="flex w-72 flex-col items-center justify-center gap-2">
-          {ENABLE_NEW_LOGO ? (
-            <LangflowLogo
-              title="Langflow logo"
-              className="mb-4 h-10 w-10 scale-[1.5]"
-            />
-          ) : (
-            <span className="mb-4 text-5xl">⛓️</span>
-          )}
+          <Logo
+            className="mb-4 h-10 w-10 scale-[1.5]"
+            chainClassName="mb-4 text-5xl"
+          />
+
           <span className="mb-6 text-2xl font-semibold text-primary">
             Sign in to Workbench
           </span>

src/frontend/src/pages/MainPage/pages/emptyPage/index.tsx

@@ -1,7 +1,6 @@
-import LangflowLogo from "@/assets/LangflowLogo.svg?react";
 import ForwardedIconComponent from "@/components/common/genericIconComponent";
+import Logo from "@/components/common/kendraLabsLogo";
 import { Button } from "@/components/ui/button";
-import { ENABLE_NEW_LOGO } from "@/customization/feature-flags";
 import { useFolderStore } from "@/stores/foldersStore";
 
 type EmptyPageProps = {
@@ -15,11 +14,7 @@ export const EmptyPage = ({ setOpenModal }: EmptyPageProps) => {
     <div className="m-0 h-full w-full bg-secondary p-0">
       <div className="text-container">
         <div className="relative z-20 flex w-full flex-col items-center justify-center gap-2">
-          {ENABLE_NEW_LOGO ? (
-            <LangflowLogo className="h-7 w-8" />
-          ) : (
-            <span className="fill-foreground text-4xl">⛓️</span>
-          )}
+          <Logo className="h-7 w-8" chainClassName="text-4xl" />
           <h3
             className="pt-5 font-chivo text-2xl font-semibold text-foreground"
             data-testid="mainpage_title"

src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/GeneralPageHeader/index.tsx

@@ -13,7 +13,7 @@ const GeneralPageHeaderComponent = () => {
             />
           </h2>
           <p className="text-sm text-muted-foreground">
-            Manage settings related to Langflow and your account.
+            Manage settings related to Workbench and your account.
           </p>
         </div>
       </div>

src/frontend/src/pages/SettingsPage/pages/StoreApiKeyPage/index.tsx

@@ -62,14 +62,14 @@ const StoreApiKeyPage = () => {
       <div className="flex w-full items-start gap-6">
         <div className="flex w-full flex-col">
           <h2 className="flex items-center text-lg font-semibold tracking-tight">
-            Langflow Store
+            Workbench Store
             <ForwardedIconComponent
               name="Store"
               className="ml-2 h-5 w-5 text-primary"
             />
           </h2>
           <p className="text-sm text-muted-foreground">
-            Manage access to the Langflow Store.
+            Manage access to the Workbench Store.
           </p>
         </div>
       </div>

src/frontend/src/pages/SignUpPage/index.tsx

@@ -1,8 +1,7 @@
-import LangflowLogo from "@/assets/LangflowLogo.svg?react";
+import Logo from "@/components/common/kendraLabsLogo";
 import InputComponent from "@/components/core/parameterRenderComponent/components/inputComponent";
 import { useAddUser } from "@/controllers/API/queries/auth";
 import { CustomLink } from "@/customization/components/custom-link";
-import { ENABLE_NEW_LOGO } from "@/customization/feature-flags";
 import { useCustomNavigate } from "@/customization/hooks/use-custom-navigate";
 import { track } from "@/customization/utils/analytics";
 import * as Form from "@radix-ui/react-form";
@@ -91,16 +90,12 @@ export default function SignUp(): JSX.Element {
     >
       <div className="flex h-full w-full flex-col items-center justify-center bg-muted">
         <div className="flex w-72 flex-col items-center justify-center gap-2">
-          {ENABLE_NEW_LOGO ? (
-            <LangflowLogo
-              title="Langflow logo"
-              className="mb-4 h-10 w-10 scale-[1.5]"
-            />
-          ) : (
-            <span className="mb-4 text-5xl">⛓️</span>
-          )}
+          <Logo
+            className="mb-4 h-10 w-10 scale-[1.5]"
+            chainClassName="mb-4 text-5xl"
+          />
           <span className="mb-6 text-2xl font-semibold text-primary">
-            Sign up for Langflow
+            Sign up for Workbench
           </span>
           <div className="mb-3 w-full">
             <Form.Field name="username">