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

Fixed buttons, applying unstyled to them instead of variant none

Browse source
This commit is contained in:
Lucas Oliveira 2024-06-17 11:12:27 -03:00
commit afd07fcfed
15 changed files with 100 additions and 127 deletions
Download patch file Download diff file Expand all files Collapse all files

39
src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
View file

@ -114,7 +114,7 @@ export default function ParameterComponent({
const logs = (data?.logs[outputName] ?? [])[0]; const logs = (data?.logs[outputName] ?? [])[0];
if (Array.isArray(logs) && logs.length > 1) { if (Array.isArray(logs) && logs.length > 1) {
return logs.some( return logs.some(
(log) => log.type === "error" || log.type === "ValueError" (log) => log.type === "error" || log.type === "ValueError",
); );
} else { } else {
return logs?.type === "error" || logs?.type === "ValueError"; return logs?.type === "error" || logs?.type === "ValueError";
@ -156,7 +156,7 @@ export default function ParameterComponent({
handleUpdateValues, handleUpdateValues,
debouncedHandleUpdateValues, debouncedHandleUpdateValues,
setNode, setNode,
setIsLoading setIsLoading,
); );
const { handleNodeClass: handleNodeClassHook } = useHandleNodeClass( const { handleNodeClass: handleNodeClassHook } = useHandleNodeClass(
@ -164,7 +164,7 @@ export default function ParameterComponent({
name, name,
takeSnapshot, takeSnapshot,
setNode, setNode,
updateNodeInternals updateNodeInternals,
); );
const { handleRefreshButtonPress: handleRefreshButtonPressHook } = const { handleRefreshButtonPress: handleRefreshButtonPressHook } =
@ -173,13 +173,13 @@ export default function ParameterComponent({
let disabled = let disabled =
edges.some( edges.some(
(edge) => (edge) =>
edge.targetHandle === scapedJSONStringfy(proxy ? { ...id, proxy } : id) edge.targetHandle === scapedJSONStringfy(proxy ? { ...id, proxy } : id),
) ?? false; ) ?? false;
let disabledOutput = let disabledOutput =
edges.some( edges.some(
(edge) => (edge) =>
edge.sourceHandle === scapedJSONStringfy(proxy ? { ...id, proxy } : id) edge.sourceHandle === scapedJSONStringfy(proxy ? { ...id, proxy } : id),
) ?? false; ) ?? false;
const handleRefreshButtonPress = async (name, data) => { const handleRefreshButtonPress = async (name, data) => {
@ -190,7 +190,7 @@ export default function ParameterComponent({
const handleOnNewValue = async ( const handleOnNewValue = async (
newValue: string | string[] | boolean | Object[], newValue: string | string[] | boolean | Object[],
skipSnapshot: boolean | undefined = false skipSnapshot: boolean | undefined = false,
): Promise<void> => { ): Promise<void> => {
handleOnNewValueHook(newValue, skipSnapshot); handleOnNewValueHook(newValue, skipSnapshot);
}; };
@ -304,14 +304,14 @@ export default function ParameterComponent({
className={classNames( className={classNames(
left ? "my-12 -ml-0.5" : "my-12 -mr-0.5", left ? "my-12 -ml-0.5" : "my-12 -mr-0.5",
"h-3 w-3 rounded-full border-2 bg-background", "h-3 w-3 rounded-full border-2 bg-background",
!showNode ? "mt-0" : "" !showNode ? "mt-0" : "",
)} )}
style={{ style={{
borderColor: color ?? nodeColors.unknown, borderColor: color ?? nodeColors.unknown,
}} }}
onClick={() => { onClick={() => {
setFilterEdge( setFilterEdge(
groupByFamily(myData, tooltipTitle!, left, nodes!) groupByFamily(myData, tooltipTitle!, left, nodes!),
); );
}} }}
></Handle> ></Handle>
@ -341,8 +341,7 @@ export default function ParameterComponent({
<div className="flex-1"> <div className="flex-1">
<Button <Button
disabled={disabledOutput} disabled={disabledOutput}
variant="none" unstyled
size="none"
onClick={() => handleUpdateOutputHide()} onClick={() => handleUpdateOutputHide()}
data-testid={`output-inspection-${title.toLowerCase()}`} data-testid={`output-inspection-${title.toLowerCase()}`}
> >
@ -366,7 +365,7 @@ export default function ParameterComponent({
</ShadTooltip> </ShadTooltip>
) : ( ) : (
<div className="flex gap-2"> <div className="flex gap-2">
<span className={!left && data.node?.frozen ? " text-ice" : ""}> <span className={!left && data.node?.frozen ? "text-ice" : ""}>
{renderTitle()} {renderTitle()}
</span> </span>
{!left && ( {!left && (
@ -380,8 +379,7 @@ export default function ParameterComponent({
} }
> >
<Button <Button
variant="none" unstyled
size="none"
disabled={!displayOutputPreview || unknownOutput} disabled={!displayOutputPreview || unknownOutput}
onClick={() => setOpenOutputModal(true)} onClick={() => setOpenOutputModal(true)}
data-testid={`output-inspection-${title.toLowerCase()}`} data-testid={`output-inspection-${title.toLowerCase()}`}
@ -389,7 +387,7 @@ export default function ParameterComponent({
{errorOutput ? ( {errorOutput ? (
<IconComponent <IconComponent
className={classNames( className={classNames(
"h-5 w-5 rounded-md text-status-red" "h-5 w-5 rounded-md text-status-red",
)} )}
name={"X"} name={"X"}
/> />
@ -398,8 +396,8 @@ export default function ParameterComponent({
className={classNames( className={classNames(
"h-5 w-5 rounded-md", "h-5 w-5 rounded-md",
displayOutputPreview && !unknownOutput displayOutputPreview && !unknownOutput
? " hover:text-medium-indigo" ? "hover:text-medium-indigo"
: " cursor-not-allowed text-muted-foreground" : "cursor-not-allowed text-muted-foreground",
)} )}
name={"ScanEye"} name={"ScanEye"}
/> />
@ -430,7 +428,10 @@ export default function ParameterComponent({
{left && LANGFLOW_SUPPORTED_TYPES.has(type ?? "") && !optionalHandle ? ( {left && LANGFLOW_SUPPORTED_TYPES.has(type ?? "") && !optionalHandle ? (
<></> <></>
) : ( ) : (
<Button className="h-7 truncate bg-muted p-0 text-sm font-normal text-black hover:bg-muted"> <Button
unstyled
className="h-7 truncate bg-muted p-0 text-sm font-normal text-black hover:bg-muted"
>
<div className="flex"> <div className="flex">
<ShadTooltip <ShadTooltip
styleClasses={"tooltip-fixed-width custom-scroll nowheel"} styleClasses={"tooltip-fixed-width custom-scroll nowheel"}
@ -457,12 +458,12 @@ export default function ParameterComponent({
} }
className={classNames( className={classNames(
left ? "-ml-0.5" : "-mr-0.5", left ? "-ml-0.5" : "-mr-0.5",
"h-3 w-3 rounded-full border-2 bg-background" "h-3 w-3 rounded-full border-2 bg-background",
)} )}
style={{ borderColor: color ?? nodeColors.unknown }} style={{ borderColor: color ?? nodeColors.unknown }}
onClick={() => { onClick={() => {
setFilterEdge( setFilterEdge(
groupByFamily(myData, tooltipTitle!, left, nodes!) groupByFamily(myData, tooltipTitle!, left, nodes!),
); );
}} }}
/> />

9
src/frontend/src/CustomNodes/GenericNode/index.tsx
View file

@ -440,8 +440,7 @@ export default function GenericNode({
<ShadTooltip content={TOOLTIP_OUTDATED_NODE}> <ShadTooltip content={TOOLTIP_OUTDATED_NODE}>
<Button <Button
onClick={handleUpdateCode} onClick={handleUpdateCode}
variant="none" unstyled
size="none"
className={"group p-1"} className={"group p-1"}
loading={loadingUpdate} loading={loadingUpdate}
> >
@ -615,8 +614,7 @@ export default function GenericNode({
setValidationStatus(null); setValidationStatus(null);
buildFlow({ stopNodeId: data.id }); buildFlow({ stopNodeId: data.id });
}} }}
variant="none" unstyled
size="none"
className="group p-1" className="group p-1"
> >
<div <div
@ -844,8 +842,7 @@ export default function GenericNode({
)} )}
> >
<Button <Button
variant="none" unstyled
size="none"
className="left-0 right-0 rounded-full border bg-background" className="left-0 right-0 rounded-full border bg-background"
onClick={() => setShowHiddenOutputs(!showHiddenOutputs)} onClick={() => setShowHiddenOutputs(!showHiddenOutputs)}
> >

14
src/frontend/src/components/headerComponent/index.tsx
View file

@ -52,7 +52,7 @@ export default function Header(): JSX.Element {
const profileImageUrl = const profileImageUrl =
`${BACKEND_URL.slice( `${BACKEND_URL.slice(
0, 0,
BACKEND_URL.length - 1 BACKEND_URL.length - 1,
)}${BASE_URL_API}files/profile_pictures/${userData?.profile_image}` ?? )}${BASE_URL_API}files/profile_pictures/${userData?.profile_image}` ??
profileCircle; profileCircle;
async function checkForChanges(): Promise<void> { async function checkForChanges(): Promise<void> {
@ -65,7 +65,7 @@ export default function Header(): JSX.Element {
const lastFlowVisitedIndex = routeHistory const lastFlowVisitedIndex = routeHistory
.reverse() .reverse()
.findIndex( .findIndex(
(path) => path.includes("/flow/") && path !== location.pathname (path) => path.includes("/flow/") && path !== location.pathname,
); );
const lastFlowVisited = routeHistory[lastFlowVisitedIndex]; const lastFlowVisited = routeHistory[lastFlowVisitedIndex];
@ -91,8 +91,7 @@ export default function Header(): JSX.Element {
</Link> </Link>
{showArrowReturnIcon && ( {showArrowReturnIcon && (
<Button <Button
variant="none" unstyled
size="none"
onClick={() => { onClick={() => {
checkForChanges(); checkForChanges();
redirectToLastLocation(); redirectToLastLocation();
@ -198,8 +197,7 @@ export default function Header(): JSX.Element {
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger asChild>
<Button <Button
variant="none" unstyled
size="none"
data-testid="user-profile-settings" data-testid="user-profile-settings"
className="shrink-0" className="shrink-0"
> >
@ -207,7 +205,7 @@ export default function Header(): JSX.Element {
src={ src={
`${BACKEND_URL.slice( `${BACKEND_URL.slice(
0, 0,
BACKEND_URL.length - 1 BACKEND_URL.length - 1,
)}${BASE_URL_API}files/profile_pictures/${ )}${BASE_URL_API}files/profile_pictures/${
userData?.profile_image ?? "Space/046-rocket.svg" userData?.profile_image ?? "Space/046-rocket.svg"
}` ?? profileCircle }` ?? profileCircle
@ -225,7 +223,7 @@ export default function Header(): JSX.Element {
src={ src={
`${BACKEND_URL.slice( `${BACKEND_URL.slice(
0, 0,
BACKEND_URL.length - 1 BACKEND_URL.length - 1,
)}${BASE_URL_API}files/profile_pictures/${ )}${BASE_URL_API}files/profile_pictures/${
userData?.profile_image ?? "Space/046-rocket.svg" userData?.profile_image ?? "Space/046-rocket.svg"
}` ?? profileCircle }` ?? profileCircle

40
src/frontend/src/components/sidebarComponent/components/sideBarFolderButtons/index.tsx
View file

@ -31,7 +31,7 @@ const SideBarFoldersButtonsComponent = ({
const [foldersNames, setFoldersNames] = useState({}); const [foldersNames, setFoldersNames] = useState({});
const takeSnapshot = useFlowsManagerStore((state) => state.takeSnapshot); const takeSnapshot = useFlowsManagerStore((state) => state.takeSnapshot);
const [editFolders, setEditFolderName] = useState( const [editFolders, setEditFolderName] = useState(
folders.map((obj) => ({ name: obj.name, edit: false })) folders.map((obj) => ({ name: obj.name, edit: false })),
); );
const uploadFolder = useFolderStore((state) => state.uploadFolder); const uploadFolder = useFolderStore((state) => state.uploadFolder);
const currentFolder = pathname.split("/"); const currentFolder = pathname.split("/");
@ -58,7 +58,7 @@ const SideBarFoldersButtonsComponent = ({
const { dragOver, dragEnter, dragLeave, onDrop } = useFileDrop( const { dragOver, dragEnter, dragLeave, onDrop } = useFileDrop(
folderId, folderId,
handleFolderChange handleFolderChange,
); );
const handleUploadFlowsToFolder = () => { const handleUploadFlowsToFolder = () => {
@ -86,7 +86,7 @@ const SideBarFoldersButtonsComponent = ({
addFolder({ name: "New Folder", parent_id: null, description: "" }).then( addFolder({ name: "New Folder", parent_id: null, description: "" }).then(
(res) => { (res) => {
refreshFolders(); refreshFolders();
} },
); );
} }
@ -104,7 +104,6 @@ const SideBarFoldersButtonsComponent = ({
folders.map((obj) => ({ name: obj.name, edit: false })); folders.map((obj) => ({ name: obj.name, edit: false }));
}, [folders]); }, [folders]);
const handleEditNameFolder = async (item) => { const handleEditNameFolder = async (item) => {
const newEditFolders = editFolders.map((obj) => { const newEditFolders = editFolders.map((obj) => {
if (obj.name === item.name) { if (obj.name === item.name) {
@ -122,30 +121,24 @@ const SideBarFoldersButtonsComponent = ({
...item, ...item,
name: foldersNames[item.name], name: foldersNames[item.name],
flows: item.flows?.length > 0 ? item.flows : [], flows: item.flows?.length > 0 ? item.flows : [],
components: components: item.components?.length > 0 ? item.components : [],
item.components?.length > 0
? item.components
: [],
}; };
const updatedFolder = await updateFolder( const updatedFolder = await updateFolder(body, item.id!);
body,
item.id!
);
const updatedFolderIndex = folders.findIndex( const updatedFolderIndex = folders.findIndex(
(f) => f.id === updatedFolder.id (f) => f.id === updatedFolder.id,
); );
const updateFolders = [...folders]; const updateFolders = [...folders];
updateFolders[updatedFolderIndex] = updatedFolder; updateFolders[updatedFolderIndex] = updatedFolder;
setFolders(updateFolders); setFolders(updateFolders);
setFoldersNames({}); setFoldersNames({});
setEditFolderName( setEditFolderName(
folders.map((obj) => ({ folders.map((obj) => ({
name: obj.name, name: obj.name,
edit: false, edit: false,
})) })),
); );
} else { } else {
setFoldersNames((old) => ({ setFoldersNames((old) => ({
@ -153,7 +146,7 @@ const SideBarFoldersButtonsComponent = ({
[item.name]: item.name, [item.name]: item.name,
})); }));
} }
} };
return ( return (
<> <>
@ -183,7 +176,7 @@ const SideBarFoldersButtonsComponent = ({
<> <>
{folders.map((item, index) => { {folders.map((item, index) => {
const editFolderName = editFolders?.filter( const editFolderName = editFolders?.filter(
(folder) => folder.name === item.name (folder) => folder.name === item.name,
)[0]; )[0];
return ( return (
<div <div
@ -199,7 +192,7 @@ const SideBarFoldersButtonsComponent = ({
? "border border-border bg-muted hover:bg-muted" ? "border border-border bg-muted hover:bg-muted"
: "border hover:bg-transparent lg:border-transparent lg:hover:border-border", : "border hover:bg-transparent lg:border-transparent lg:hover:border-border",
"group flex w-full shrink-0 cursor-pointer gap-2 opacity-100 lg:min-w-full", "group flex w-full shrink-0 cursor-pointer gap-2 opacity-100 lg:min-w-full",
folderIdDragging === item.id! ? "bg-border" : "" folderIdDragging === item.id! ? "bg-border" : "",
)} )}
onClick={() => handleChangeFolder!(item.id!)} onClick={() => handleChangeFolder!(item.id!)}
> >
@ -269,7 +262,7 @@ const SideBarFoldersButtonsComponent = ({
folders.map((obj) => ({ folders.map((obj) => ({
name: obj.name, name: obj.name,
edit: false, edit: false,
})) })),
); );
} }
if (e.key === "Enter") { if (e.key === "Enter") {
@ -278,8 +271,8 @@ const SideBarFoldersButtonsComponent = ({
handleKeyDown(e, e.key, ""); handleKeyDown(e, e.key, "");
}} }}
autoFocus={true} autoFocus={true}
onBlur={async () => { handleEditNameFolder(item) onBlur={async () => {
handleEditNameFolder(item);
}} }}
value={foldersNames[item.name]} value={foldersNames[item.name]}
id={`input-folder-${item.name}`} id={`input-folder-${item.name}`}
@ -314,8 +307,7 @@ const SideBarFoldersButtonsComponent = ({
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
}} }}
size="none" unstyled
variant="none"
> >
<IconComponent <IconComponent
name={"Download"} name={"Download"}

21
src/frontend/src/components/tableComponent/components/TableOptions/index.tsx
View file

@ -22,8 +22,7 @@ export default function TableOptions({
<div> <div>
<ShadTooltip content="Reset Columns"> <ShadTooltip content="Reset Columns">
<Button <Button
variant="none" unstyled
size="none"
onClick={() => { onClick={() => {
resetGrid(); resetGrid();
}} }}
@ -33,7 +32,7 @@ export default function TableOptions({
name="RotateCcw" name="RotateCcw"
strokeWidth={2} strokeWidth={2}
className={cn( className={cn(
"h-5 w-5 text-primary transition-all hover:text-accent-foreground" "h-5 w-5 text-primary transition-all hover:text-accent-foreground",
)} )}
/> />
</Button> </Button>
@ -50,12 +49,7 @@ export default function TableOptions({
) )
} }
> >
<Button <Button unstyled onClick={duplicateRow} disabled={!hasSelection}>
variant="none"
size="none"
onClick={duplicateRow}
disabled={!hasSelection}
>
<IconComponent <IconComponent
name="Copy" name="Copy"
className={cn("h-5 w-5 text-primary transition-all")} className={cn("h-5 w-5 text-primary transition-all")}
@ -75,17 +69,12 @@ export default function TableOptions({
) )
} }
> >
<Button <Button unstyled onClick={deleteRow} disabled={!hasSelection}>
variant="none"
size="none"
onClick={deleteRow}
disabled={!hasSelection}
>
<IconComponent <IconComponent
name="Trash2" name="Trash2"
className={cn( className={cn(
"h-5 w-5 text-primary transition-all", "h-5 w-5 text-primary transition-all",
!hasSelection ? "" : "hover:text-status-red" !hasSelection ? "" : "hover:text-status-red",
)} )}
/> />
</Button> </Button>

14
src/frontend/src/components/ui/button.tsx
View file

@ -20,7 +20,6 @@ const buttonVariants = cva(
"border border-muted bg-muted text-secondary-foreground hover:bg-secondary-foreground/5", "border border-muted bg-muted text-secondary-foreground hover:bg-secondary-foreground/5",
ghost: "hover:bg-accent hover:text-accent-foreground", ghost: "hover:bg-accent hover:text-accent-foreground",
link: "underline-offset-4 hover:underline text-primary", link: "underline-offset-4 hover:underline text-primary",
none: "",
}, },
size: { size: {
default: "h-10 py-2 px-4", default: "h-10 py-2 px-4",
@ -28,14 +27,13 @@ const buttonVariants = cva(
xs: "py-0.5 px-3 rounded-md", xs: "py-0.5 px-3 rounded-md",
lg: "h-11 px-8 rounded-md", lg: "h-11 px-8 rounded-md",
icon: "py-1 px-1 rounded-md", icon: "py-1 px-1 rounded-md",
none: "",
}, },
}, },
defaultVariants: { defaultVariants: {
variant: "default", variant: "default",
size: "default", size: "default",
}, },
} },
); );
export interface ButtonProps export interface ButtonProps
@ -43,6 +41,7 @@ export interface ButtonProps
VariantProps<typeof buttonVariants> { VariantProps<typeof buttonVariants> {
asChild?: boolean; asChild?: boolean;
loading?: boolean; loading?: boolean;
unstyled?: boolean;
} }
function toTitleCase(text: string) { function toTitleCase(text: string) {
@ -57,6 +56,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
{ {
className, className,
variant, variant,
unstyled,
size, size,
loading, loading,
type, type,
@ -65,7 +65,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
children, children,
...props ...props
}, },
ref ref,
) => { ) => {
const Comp = asChild ? Slot : "button"; const Comp = asChild ? Slot : "button";
let newChildren = children; let newChildren = children;
@ -75,7 +75,9 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
return ( return (
<> <>
<Comp <Comp
className={cn(buttonVariants({ variant, size, className }))} className={
!unstyled ? buttonVariants({ variant, size, className }) : className
}
disabled={loading || disabled} disabled={loading || disabled}
{...(asChild ? {} : { type: type || "button" })} {...(asChild ? {} : { type: type || "button" })}
ref={ref} ref={ref}
@ -97,7 +99,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
</Comp> </Comp>
</> </>
); );
} },
); );
Button.displayName = "Button"; Button.displayName = "Button";

7
src/frontend/src/modals/IOModal/components/chatView/chatInput/components/buttonSendWrapper/index.tsx
View file

@ -28,13 +28,12 @@ const ButtonSendWrapper = ({
noInput noInput
? "bg-high-indigo text-background" ? "bg-high-indigo text-background"
: chatValue : chatValue
? "text-primary" ? "text-primary"
: "bg-chat-send text-background" : "bg-chat-send text-background",
)} )}
disabled={lockChat || saveLoading} disabled={lockChat || saveLoading}
onClick={(): void => send()} onClick={(): void => send()}
variant="none" unstyled
size="none"
> >
<Case <Case
condition={ condition={

3
src/frontend/src/modals/IOModal/components/chatView/chatInput/components/uploadFileButton/index.tsx
View file

@ -22,8 +22,7 @@ const UploadFileButton = ({
lockChat ? "cursor-not-allowed" : "hover:text-muted-foreground" lockChat ? "cursor-not-allowed" : "hover:text-muted-foreground"
}`} }`}
onClick={handleButtonClick} onClick={handleButtonClick}
variant="none" unstyled
size="none"
> >
<ForwardedIconComponent name="PaperclipIcon" /> <ForwardedIconComponent name="PaperclipIcon" />
</Button> </Button>

2
src/frontend/src/modals/IOModal/components/chatView/fileComponent/components/downloadButton/downloadButton.tsx
View file

@ -14,7 +14,7 @@ export default function DownloadButton({
className={`absolute right-1 top-1 rounded-md bg-muted text-sm font-bold text-foreground`} className={`absolute right-1 top-1 rounded-md bg-muted text-sm font-bold text-foreground`}
> >
<Button <Button
variant={"none"} unstyled
className="bg-transparent px-2 py-1 text-ring" className="bg-transparent px-2 py-1 text-ring"
onClick={handleDownload} onClick={handleDownload}
> >

9
src/frontend/src/modals/IOModal/components/chatView/index.tsx
View file

@ -59,7 +59,7 @@ export default function ChatView({
// //
.filter( .filter(
(output) => (output) =>
output.data.message || (!output.data.message && output.artifacts) output.data.message || (!output.data.message && output.artifacts),
) )
.map((output, index) => { .map((output, index) => {
try { try {
@ -140,7 +140,7 @@ export default function ChatView({
function updateChat( function updateChat(
chat: ChatMessageType, chat: ChatMessageType,
message: string, message: string,
stream_url?: string stream_url?: string,
) { ) {
chat.message = message; chat.message = message;
updateFlowPool(chat.componentId, { updateFlowPool(chat.componentId, {
@ -156,7 +156,7 @@ export default function ChatView({
setIsDragging, setIsDragging,
setFiles, setFiles,
currentFlowId, currentFlowId,
setErrorData setErrorData,
); );
return ( return (
@ -171,8 +171,7 @@ export default function ChatView({
<div className="eraser-position"> <div className="eraser-position">
<Button <Button
className="flex gap-1" className="flex gap-1"
size="none" unstyled
variant="none"
disabled={lockChat} disabled={lockChat}
onClick={() => handleSelectChange("builds")} onClick={() => handleSelectChange("builds")}
> >

42
src/frontend/src/modals/IOModal/index.tsx
View file

@ -36,25 +36,25 @@ export default function IOModal({
const allNodes = useFlowStore((state) => state.nodes); const allNodes = useFlowStore((state) => state.nodes);
const setMessages = useMessagesStore((state) => state.setMessages); const setMessages = useMessagesStore((state) => state.setMessages);
const inputs = useFlowStore((state) => state.inputs).filter( const inputs = useFlowStore((state) => state.inputs).filter(
(input) => input.type !== "ChatInput" (input) => input.type !== "ChatInput",
); );
const chatInput = useFlowStore((state) => state.inputs).find( const chatInput = useFlowStore((state) => state.inputs).find(
(input) => input.type === "ChatInput" (input) => input.type === "ChatInput",
); );
const outputs = useFlowStore((state) => state.outputs).filter( const outputs = useFlowStore((state) => state.outputs).filter(
(output) => output.type !== "ChatOutput" (output) => output.type !== "ChatOutput",
); );
const chatOutput = useFlowStore((state) => state.outputs).find( const chatOutput = useFlowStore((state) => state.outputs).find(
(output) => output.type === "ChatOutput" (output) => output.type === "ChatOutput",
); );
const nodes = useFlowStore((state) => state.nodes).filter( const nodes = useFlowStore((state) => state.nodes).filter(
(node) => (node) =>
inputs.some((input) => input.id === node.id) || inputs.some((input) => input.id === node.id) ||
outputs.some((output) => output.id === node.id) outputs.some((output) => output.id === node.id),
); );
const haveChat = chatInput || chatOutput; const haveChat = chatInput || chatOutput;
const [selectedTab, setSelectedTab] = useState( const [selectedTab, setSelectedTab] = useState(
inputs.length > 0 ? 1 : outputs.length > 0 ? 2 : 0 inputs.length > 0 ? 1 : outputs.length > 0 ? 2 : 0,
); );
const setErrorData = useAlertStore((state) => state.setErrorData); const setErrorData = useAlertStore((state) => state.setErrorData);
const setSuccessData = useAlertStore((state) => state.setSuccessData); const setSuccessData = useAlertStore((state) => state.setSuccessData);
@ -131,7 +131,7 @@ export default function IOModal({
const { handleRemoveSession } = useRemoveSession( const { handleRemoveSession } = useRemoveSession(
setSuccessData, setSuccessData,
setErrorData setErrorData,
); );
useEffect(() => { useEffect(() => {
@ -155,7 +155,7 @@ export default function IOModal({
({ rows, columns }) => { ({ rows, columns }) => {
setMessages(rows); setMessages(rows);
setColumns(columns); setColumns(columns);
} },
); );
} }
}, [open]); }, [open]);
@ -194,7 +194,7 @@ export default function IOModal({
<div className="flex-max-width h-full"> <div className="flex-max-width h-full">
<div <div
className={cn( className={cn(
"mr-6 flex h-full w-2/6 flex-shrink-0 flex-col justify-start transition-all duration-300" "mr-6 flex h-full w-2/6 flex-shrink-0 flex-col justify-start transition-all duration-300",
)} )}
> >
<Tabs <Tabs
@ -223,11 +223,11 @@ export default function IOModal({
<TabsContent value={"1"} className="api-modal-tabs-content"> <TabsContent value={"1"} className="api-modal-tabs-content">
{nodes {nodes
.filter((node) => .filter((node) =>
inputs.some((input) => input.id === node.id) inputs.some((input) => input.id === node.id),
) )
.map((node, index) => { .map((node, index) => {
const input = inputs.find( const input = inputs.find(
(input) => input.id === node.id (input) => input.id === node.id,
)!; )!;
return ( return (
<div <div
@ -284,11 +284,11 @@ export default function IOModal({
<TabsContent value={"2"} className="api-modal-tabs-content"> <TabsContent value={"2"} className="api-modal-tabs-content">
{nodes {nodes
.filter((node) => .filter((node) =>
outputs.some((output) => output.id === node.id) outputs.some((output) => output.id === node.id),
) )
.map((node, index) => { .map((node, index) => {
const output = outputs.find( const output = outputs.find(
(output) => output.id === node.id (output) => output.id === node.id,
)!; )!;
const textOutputValue = const textOutputValue =
(flowPool[node!.id] ?? [])[ (flowPool[node!.id] ?? [])[
@ -379,7 +379,7 @@ export default function IOModal({
</ShadTooltip> </ShadTooltip>
<div className="flex shrink-0 items-center justify-center gap-2 align-middle"> <div className="flex shrink-0 items-center justify-center gap-2 align-middle">
<Button <Button
variant="none" unstyled
size="icon" size="icon"
onClick={(e) => { onClick={(e) => {
e.preventDefault(); e.preventDefault();
@ -439,7 +439,7 @@ export default function IOModal({
<div <div
className={cn( className={cn(
"flex h-full w-full flex-col items-start gap-4 pt-4", "flex h-full w-full flex-col items-start gap-4 pt-4",
!selectedViewField ? "hidden" : "" !selectedViewField ? "hidden" : "",
)} )}
> >
<div className="font-xl flex items-center justify-center gap-3 font-semibold"> <div className="font-xl flex items-center justify-center gap-3 font-semibold">
@ -458,7 +458,7 @@ export default function IOModal({
</div> </div>
<div className="h-full w-full"> <div className="h-full w-full">
{inputs.some( {inputs.some(
(input) => input.id === selectedViewField.id (input) => input.id === selectedViewField.id,
) && ( ) && (
<IOFieldView <IOFieldView
type={InputOutput.INPUT} type={InputOutput.INPUT}
@ -468,7 +468,7 @@ export default function IOModal({
/> />
)} )}
{outputs.some( {outputs.some(
(output) => output.id === selectedViewField.id (output) => output.id === selectedViewField.id,
) && ( ) && (
<IOFieldView <IOFieldView
type={InputOutput.OUTPUT} type={InputOutput.OUTPUT}
@ -478,12 +478,12 @@ export default function IOModal({
/> />
)} )}
{sessions.some( {sessions.some(
(session) => session === selectedViewField.id (session) => session === selectedViewField.id,
) && ( ) && (
<SessionView <SessionView
rows={messages.filter( rows={messages.filter(
(message) => (message) =>
message.session_id === selectedViewField.id message.session_id === selectedViewField.id,
)} )}
/> />
)} )}
@ -493,7 +493,7 @@ export default function IOModal({
<div <div
className={cn( className={cn(
"flex h-full w-full", "flex h-full w-full",
selectedViewField ? "hidden" : "" selectedViewField ? "hidden" : "",
)} )}
> >
{haveChat ? ( {haveChat ? (
@ -525,7 +525,7 @@ export default function IOModal({
"h-4 w-4", "h-4 w-4",
isBuilding isBuilding
? "animate-spin" ? "animate-spin"
: "fill-current text-medium-indigo" : "fill-current text-medium-indigo",
)} )}
/> />
), ),

3
src/frontend/src/modals/secretKeyModal/index.tsx
View file

@ -112,8 +112,7 @@ export default function SecretKeyModal({
onClick={() => { onClick={() => {
handleCopyClick(); handleCopyClick();
}} }}
variant="none" unstyled
size="none"
> >
{textCopied ? ( {textCopied ? (
<IconComponent name="Copy" className="h-4 w-4" /> <IconComponent name="Copy" className="h-4 w-4" />

8
src/frontend/src/pages/FlowPage/components/SelectionMenuComponent/index.tsx
View file

@ -3,6 +3,7 @@ import { NodeToolbar } from "reactflow";
import { GradientGroup } from "../../../../icons/GradientSparkles"; import { GradientGroup } from "../../../../icons/GradientSparkles";
import useFlowStore from "../../../../stores/flowStore"; import useFlowStore from "../../../../stores/flowStore";
import { validateSelection } from "../../../../utils/reactflowUtils"; import { validateSelection } from "../../../../utils/reactflowUtils";
import { Button } from "../../../../components/ui/button";
export default function SelectionMenu({ export default function SelectionMenu({
onClick, onClick,
nodes, nodes,
@ -13,7 +14,7 @@ export default function SelectionMenu({
const [disable, setDisable] = useState<boolean>( const [disable, setDisable] = useState<boolean>(
lastSelection && edges.length > 0 lastSelection && edges.length > 0
? validateSelection(lastSelection!, edges).length > 0 ? validateSelection(lastSelection!, edges).length > 0
: false : false,
); );
const [isOpen, setIsOpen] = useState(false); const [isOpen, setIsOpen] = useState(false);
const [isTransitioning, setIsTransitioning] = useState(false); const [isTransitioning, setIsTransitioning] = useState(false);
@ -61,7 +62,8 @@ export default function SelectionMenu({
(isTransitioning ? " opacity-100" : " opacity-0") (isTransitioning ? " opacity-100" : " opacity-0")
} }
> >
<button <Button
unstyled
className={`${ className={`${
disable disable
? "flex h-full w-full cursor-not-allowed items-center justify-between text-sm text-muted-foreground" ? "flex h-full w-full cursor-not-allowed items-center justify-between text-sm text-muted-foreground"
@ -77,7 +79,7 @@ export default function SelectionMenu({
disabled={disable} disabled={disable}
/> />
Group Group
</button> </Button>
</div> </div>
</div> </div>
</NodeToolbar> </NodeToolbar>

11
src/frontend/src/pages/MainPage/components/headerComponent/index.tsx
View file

@ -52,8 +52,7 @@ const HeaderComponent = ({
} }
> >
<Button <Button
variant="none" unstyled
size="none"
onClick={handleExport} onClick={handleExport}
disabled={disableFunctions} disabled={disableFunctions}
> >
@ -75,8 +74,7 @@ const HeaderComponent = ({
} }
> >
<Button <Button
variant="none" unstyled
size="none"
onClick={handleDuplicate} onClick={handleDuplicate}
disabled={disableFunctions} disabled={disableFunctions}
> >
@ -98,8 +96,7 @@ const HeaderComponent = ({
} }
> >
<Button <Button
variant="none" unstyled
size="none"
onClick={handleDelete} onClick={handleDelete}
disabled={disableFunctions} disabled={disableFunctions}
> >
@ -107,7 +104,7 @@ const HeaderComponent = ({
name="Trash2" name="Trash2"
className={cn( className={cn(
"h-5 w-5 text-primary transition-all", "h-5 w-5 text-primary transition-all",
disableFunctions ? "" : "hover:text-status-red" disableFunctions ? "" : "hover:text-status-red",
)} )}
/> />
</Button> </Button>

5
src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/components/profilePictureChooserComponent/index.tsx
View file

@ -49,8 +49,7 @@ export default function ProfilePictureChooserComponent({
{profilePictures[folder].map((path, idx) => ( {profilePictures[folder].map((path, idx) => (
<Button <Button
ref={value === folder + "/" + path ? ref : undefined} ref={value === folder + "/" + path ? ref : undefined}
size="none" unstyled
variant="none"
onClick={() => onChange(folder + "/" + path)} onClick={() => onChange(folder + "/" + path)}
className="shrink-0 px-0.5 py-2" className="shrink-0 px-0.5 py-2"
> >
@ -58,7 +57,7 @@ export default function ProfilePictureChooserComponent({
key={idx} key={idx}
src={`${BACKEND_URL.slice( src={`${BACKEND_URL.slice(
0, 0,
BACKEND_URL.length - 1 BACKEND_URL.length - 1,
)}${BASE_URL_API}files/profile_pictures/${ )}${BASE_URL_API}files/profile_pictures/${
folder + "/" + path folder + "/" + path
}`} }`}