jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Added Tooltip Wrapper inside context wrappers to show tooltip on top of every node

Browse source
This commit is contained in:
Lucas Oliveira 2023-07-07 23:48:21 -03:00
commit 2a34f725fc
3 changed files with 33 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

31
src/frontend/src/components/ShadTooltipComponent/index.tsx
View file

@ -1,10 +1,5 @@
import { ShadToolTipType } from "../../types/components"; import { ShadToolTipType } from "../../types/components";
import { import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "../ui/tooltip";
export default function ShadTooltip({ export default function ShadTooltip({
content, content,
@ -15,19 +10,17 @@ export default function ShadTooltip({
delayDuration = 500, delayDuration = 500,
}: ShadToolTipType) { }: ShadToolTipType) {
return ( return (
<TooltipProvider> <Tooltip delayDuration={delayDuration}>
<Tooltip delayDuration={delayDuration}> <TooltipTrigger asChild={asChild}>{children}</TooltipTrigger>
<TooltipTrigger asChild={asChild}>{children}</TooltipTrigger>
<TooltipContent <TooltipContent
className={style} className={style}
side={side} side={side}
avoidCollisions={false} avoidCollisions={false}
sticky="always" sticky="always"
> >
{content} {content}
</TooltipContent> </TooltipContent>
</Tooltip> </Tooltip>
</TooltipProvider>
); );
} }

37
src/frontend/src/contexts/index.tsx
View file

@ -1,5 +1,6 @@
import { ReactNode } from "react"; import { ReactNode } from "react";
import { ReactFlowProvider } from "reactflow"; import { ReactFlowProvider } from "reactflow";
import { TooltipProvider } from "../components/ui/tooltip";
import { SSEProvider } from "./SSEContext"; import { SSEProvider } from "./SSEContext";
import { AlertProvider } from "./alertContext"; import { AlertProvider } from "./alertContext";
import { DarkProvider } from "./darkContext"; import { DarkProvider } from "./darkContext";
@ -13,23 +14,25 @@ export default function ContextWrapper({ children }: { children: ReactNode }) {
//element to wrap all context //element to wrap all context
return ( return (
<> <>
<ReactFlowProvider> <TooltipProvider>
<DarkProvider> <ReactFlowProvider>
<TypesProvider> <DarkProvider>
<LocationProvider> <TypesProvider>
<AlertProvider> <LocationProvider>
<SSEProvider> <AlertProvider>
<TabsProvider> <SSEProvider>
<UndoRedoProvider> <TabsProvider>
<PopUpProvider>{children}</PopUpProvider> <UndoRedoProvider>
</UndoRedoProvider> <PopUpProvider>{children}</PopUpProvider>
</TabsProvider> </UndoRedoProvider>
</SSEProvider> </TabsProvider>
</AlertProvider> </SSEProvider>
</LocationProvider> </AlertProvider>
</TypesProvider> </LocationProvider>
</DarkProvider> </TypesProvider>
</ReactFlowProvider> </DarkProvider>
</ReactFlowProvider>
</TooltipProvider>
</> </>
); );
} }

2
src/frontend/src/modals/formModal/chatMessage/index.tsx
View file

@ -54,7 +54,7 @@ export default function ChatMessage({
{hidden && chat.thought && chat.thought !== "" && ( {hidden && chat.thought && chat.thought !== "" && (
<div <div
onClick={() => setHidden((prev) => !prev)} onClick={() => setHidden((prev) => !prev)}
className="absolute -left-8 -top-3 cursor-pointer" className="absolute -left-6 -top-3 cursor-pointer"
> >
<THOUGHTS_ICON className="h-4 w-4 animate-bounce dark:text-white" /> <THOUGHTS_ICON className="h-4 w-4 animate-bounce dark:text-white" />
</div> </div>