diff --git a/src/frontend/src/assets/artwork-spiral-1-def.svg b/src/frontend/src/assets/artwork-spiral-1-def.svg deleted file mode 100644 index 80851653c..000000000 --- a/src/frontend/src/assets/artwork-spiral-1-def.svg +++ /dev/null @@ -1,42 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/frontend/src/assets/artwork-spiral-2-def.svg b/src/frontend/src/assets/artwork-spiral-2-def.svg deleted file mode 100644 index 769cbb1b0..000000000 --- a/src/frontend/src/assets/artwork-spiral-2-def.svg +++ /dev/null @@ -1,32 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/frontend/src/assets/artwork-spiral-3-def.svg b/src/frontend/src/assets/artwork-spiral-3-def.svg deleted file mode 100644 index 4469bb7c2..000000000 --- a/src/frontend/src/assets/artwork-spiral-3-def.svg +++ /dev/null @@ -1,42 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/frontend/src/assets/temp-pat-1.png b/src/frontend/src/assets/temp-pat-1.png new file mode 100644 index 000000000..b30f9cb81 Binary files /dev/null and b/src/frontend/src/assets/temp-pat-1.png differ diff --git a/src/frontend/src/assets/temp-pat-2.png b/src/frontend/src/assets/temp-pat-2.png new file mode 100644 index 000000000..b9c50e54b Binary files /dev/null and b/src/frontend/src/assets/temp-pat-2.png differ diff --git a/src/frontend/src/assets/temp-pat-3.png b/src/frontend/src/assets/temp-pat-3.png new file mode 100644 index 000000000..73f968c89 Binary files /dev/null and b/src/frontend/src/assets/temp-pat-3.png differ diff --git a/src/frontend/src/assets/temp-pat-m-1.png b/src/frontend/src/assets/temp-pat-m-1.png new file mode 100644 index 000000000..1931b66ed Binary files /dev/null and b/src/frontend/src/assets/temp-pat-m-1.png differ diff --git a/src/frontend/src/assets/temp-pat-m-2.png b/src/frontend/src/assets/temp-pat-m-2.png new file mode 100644 index 000000000..6f59be25f Binary files /dev/null and b/src/frontend/src/assets/temp-pat-m-2.png differ diff --git a/src/frontend/src/assets/temp-pat-m-3.png b/src/frontend/src/assets/temp-pat-m-3.png new file mode 100644 index 000000000..75d34bca6 Binary files /dev/null and b/src/frontend/src/assets/temp-pat-m-3.png differ diff --git a/src/frontend/src/components/folderSidebarComponent/components/sideBarFolderButtons/index.tsx b/src/frontend/src/components/folderSidebarComponent/components/sideBarFolderButtons/index.tsx index 06988134e..966821020 100644 --- a/src/frontend/src/components/folderSidebarComponent/components/sideBarFolderButtons/index.tsx +++ b/src/frontend/src/components/folderSidebarComponent/components/sideBarFolderButtons/index.tsx @@ -27,6 +27,7 @@ import { track } from "@/customization/utils/analytics"; import { createFileUpload } from "@/helpers/create-file-upload"; import { getObjectsFromFilelist } from "@/helpers/get-objects-from-filelist"; import useUploadFlow from "@/hooks/flows/use-upload-flow"; +import { useIsMobile } from "@/hooks/use-mobile"; import { useIsFetching, useIsMutating } from "@tanstack/react-query"; import { useEffect, useRef, useState } from "react"; import { useLocation, useParams } from "react-router-dom"; @@ -401,8 +402,13 @@ const SideBarFoldersButtonsComponent = ({ } }; + const isMobile = useIsMobile({ maxWidth: 1024 }); + return ( - + diff --git a/src/frontend/src/components/ui/sidebar.tsx b/src/frontend/src/components/ui/sidebar.tsx index f71d3f0e4..4330c6583 100644 --- a/src/frontend/src/components/ui/sidebar.tsx +++ b/src/frontend/src/components/ui/sidebar.tsx @@ -164,7 +164,14 @@ const Sidebar = React.forwardRef< }, ref, ) => { - const { state } = useSidebar(); + const { state, setOpen } = useSidebar(); + + React.useEffect(() => { + if (collapsible === "none") { + console.log("collapsible === none"); + setOpen(true); + } + }, [collapsible]); if (collapsible === "none") { return ( @@ -213,7 +220,7 @@ const Sidebar = React.forwardRef< />
{ onClick?.(event); toggleSidebar(); diff --git a/src/frontend/src/hooks/use-mobile.ts b/src/frontend/src/hooks/use-mobile.ts index a93d58393..df376c571 100644 --- a/src/frontend/src/hooks/use-mobile.ts +++ b/src/frontend/src/hooks/use-mobile.ts @@ -2,20 +2,31 @@ import * as React from "react"; const MOBILE_BREAKPOINT = 768; -export function useIsMobile() { +export function useIsMobile({ maxWidth }: { maxWidth?: number } = {}) { + const breakpoint = maxWidth || MOBILE_BREAKPOINT; const [isMobile, setIsMobile] = React.useState( undefined, ); React.useEffect(() => { - const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`); - const onChange = () => { - setIsMobile(window.innerWidth < MOBILE_BREAKPOINT); + const mql = window.matchMedia(`(max-width: ${breakpoint - 1}px)`); + + const handleResize = () => { + setIsMobile(window.innerWidth < breakpoint); }; - mql.addEventListener("change", onChange); - setIsMobile(window.innerWidth < MOBILE_BREAKPOINT); - return () => mql.removeEventListener("change", onChange); - }, []); + + // Initial check + handleResize(); + + // Add both matchMedia and resize listeners + mql.addEventListener("change", handleResize); + window.addEventListener("resize", handleResize); + + return () => { + mql.removeEventListener("change", handleResize); + window.addEventListener("resize", handleResize); + }; + }, [breakpoint]); return !!isMobile; } diff --git a/src/frontend/src/modals/baseModal/helpers/switch-case-size.ts b/src/frontend/src/modals/baseModal/helpers/switch-case-size.ts index ca0ecf278..23196ce8f 100644 --- a/src/frontend/src/modals/baseModal/helpers/switch-case-size.ts +++ b/src/frontend/src/modals/baseModal/helpers/switch-case-size.ts @@ -41,7 +41,7 @@ export const switchCaseModalSize = (size: string) => { case "templates": minWidth = "w-[97vw] max-w-[1200px]"; height = - "min-h-[700px] lg:min-h-0 h-[90vh] md:h-[80vh] lg:h-[50vw] lg:max-h-[640px]"; + "min-h-[700px] lg:min-h-0 h-[90vh] md:h-[80vh] lg:h-[50vw] lg:max-h-[620px]"; break; case "three-cards": minWidth = "min-w-[1066px]"; diff --git a/src/frontend/src/modals/templatesModal/components/GetStartedComponent/index.tsx b/src/frontend/src/modals/templatesModal/components/GetStartedComponent/index.tsx index bd12fc5cc..a9f2ca5f0 100644 --- a/src/frontend/src/modals/templatesModal/components/GetStartedComponent/index.tsx +++ b/src/frontend/src/modals/templatesModal/components/GetStartedComponent/index.tsx @@ -1,9 +1,13 @@ import BaseModal from "@/modals/baseModal"; import useFlowsManagerStore from "@/stores/flowsManagerStore"; import { CardData } from "@/types/templates/types"; -import memoryChatbotSpiral from "../../../../assets/artwork-spiral-1-def.svg"; -import vectorRagSpiral from "../../../../assets/artwork-spiral-2-def.svg"; -import multiAgentSpiral from "../../../../assets/artwork-spiral-3-def.svg"; +import memoryChatbot from "../../../../assets/temp-pat-1.png"; +import vectorRag from "../../../../assets/temp-pat-2.png"; +import multiAgent from "../../../../assets/temp-pat-3.png"; +import memoryChatbotHorizontal from "../../../../assets/temp-pat-m-1.png"; +import vectorRagHorizontal from "../../../../assets/temp-pat-m-2.png"; +import multiAgentHorizontal from "../../../../assets/temp-pat-m-3.png"; + import TemplateGetStartedCardComponent from "../TemplateGetStartedCardComponent"; export default function GetStartedComponent() { @@ -12,22 +16,22 @@ export default function GetStartedComponent() { // Define the card data const cardData: CardData[] = [ { - bg: "radial-gradient(ellipse at top left, #A3E8EF, #ADF6FD, #9676fd)", - spiralImage: memoryChatbotSpiral, + bgImage: memoryChatbot, + bgHorizontalImage: memoryChatbotHorizontal, icon: "MessagesSquare", category: "Prompting", flow: examples.find((example) => example.name === "Memory Chatbot"), }, { - bg: "radial-gradient(ellipse at top right, #f599fe, #de8afa, #9a5af7)", - spiralImage: vectorRagSpiral, + bgImage: vectorRag, + bgHorizontalImage: vectorRagHorizontal, icon: "Database", category: "RAG", flow: examples.find((example) => example.name === "Vector Store RAG"), }, { - bg: "radial-gradient(ellipse at top left, #ed93f5, #e0bae9, #a5f0af)", - spiralImage: multiAgentSpiral, + bgImage: multiAgent, + bgHorizontalImage: multiAgentHorizontal, icon: "Bot", category: "Agents", flow: examples.find((example) => example.name === "Dynamic Agent"), diff --git a/src/frontend/src/modals/templatesModal/components/TemplateGetStartedCardComponent/index.tsx b/src/frontend/src/modals/templatesModal/components/TemplateGetStartedCardComponent/index.tsx index b65000766..0696629f1 100644 --- a/src/frontend/src/modals/templatesModal/components/TemplateGetStartedCardComponent/index.tsx +++ b/src/frontend/src/modals/templatesModal/components/TemplateGetStartedCardComponent/index.tsx @@ -4,14 +4,12 @@ import { track } from "@/customization/utils/analytics"; import useAddFlow from "@/hooks/flows/use-add-flow"; import { useFolderStore } from "@/stores/foldersStore"; import { updateIds } from "@/utils/reactflowUtils"; -import { BG_NOISE } from "@/utils/styleUtils"; -import { cn } from "@/utils/utils"; import { useParams } from "react-router-dom"; import { CardData } from "../../../../types/templates/types"; export default function TemplateGetStartedCardComponent({ - bg, - spiralImage, + bgImage, + bgHorizontalImage, icon, category, flow, @@ -49,23 +47,20 @@ export default function TemplateGetStartedCardComponent({ onKeyDown={handleKeyDown} onClick={handleClick} > -
{`${flow.name} + {`${flow.name}
-
+
{category} diff --git a/src/frontend/src/pages/MainPage/components/header/index.tsx b/src/frontend/src/pages/MainPage/components/header/index.tsx index 1306d26aa..9e284d50e 100644 --- a/src/frontend/src/pages/MainPage/components/header/index.tsx +++ b/src/frontend/src/pages/MainPage/components/header/index.tsx @@ -57,7 +57,9 @@ const HeaderComponent = ({ className="flex items-center pb-8 text-xl font-semibold" data-testid="mainpage_title" > -
+
diff --git a/src/frontend/src/pages/MainPage/components/list/index.tsx b/src/frontend/src/pages/MainPage/components/list/index.tsx index a7ec61dcf..906a5dac3 100644 --- a/src/frontend/src/pages/MainPage/components/list/index.tsx +++ b/src/frontend/src/pages/MainPage/components/list/index.tsx @@ -144,8 +144,10 @@ const ListComponent = ({ flowData }: { flowData: FlowType }) => { Edited {timeElapsed(flowData.updated_at)} ago
-
- {flowData.description} +
+ + {flowData.description} +
diff --git a/src/frontend/src/style/applies.css b/src/frontend/src/style/applies.css index e875405a0..e4089c842 100644 --- a/src/frontend/src/style/applies.css +++ b/src/frontend/src/style/applies.css @@ -322,7 +322,7 @@ @apply flex flex-col justify-center bg-background transition-all; } .generic-node-div-title { - @apply flex w-full items-center gap-2; + @apply flex flex-1 items-center gap-2 overflow-hidden; } .generic-node-title-arrangement { @apply flex-max-width items-center truncate; diff --git a/src/frontend/src/types/templates/types.ts b/src/frontend/src/types/templates/types.ts index 5ff7731c0..8be80de00 100644 --- a/src/frontend/src/types/templates/types.ts +++ b/src/frontend/src/types/templates/types.ts @@ -12,8 +12,8 @@ export interface Category { } export interface CardData { - bg: string; - spiralImage: string; + bgImage: string; + bgHorizontalImage: string; icon: string; category: string; flow: FlowType | undefined;