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

fix: change color of output inspector when tool mode, change fuzzy search order, fix image download and some minor issues (#4625)

Browse source 
* Fixed output and input radius and icons colors when on tool mode

* Replaced output format to be camel case

* Fix expand not appearing after minimize and change code

* Refactor chatView component and add FlowRunningSqueleton

- Refactor chatView component to import useMemo from react
- Add FlowRunningSqueleton component to display flow running indicator
- fix gagging on flow running

* format code

* Fixed fuzzy search order

* remove console log

---------

Co-authored-by: anovazzi1 <otavio2204@gmail.com>
Co-authored-by: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Co-authored-by: Mike Fortman <michael.fortman@datastax.com>
This commit is contained in:
Lucas Oliveira 2024-11-15 13:13:12 -03:00 • committed by GitHub
commit 2881346400
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
13 changed files with 90 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/frontend/harFiles/example.har
View file

File diff suppressed because one or more lines are too long

2
src/frontend/src/CustomNodes/GenericNode/components/NodeInputField/index.tsx
View file

@ -34,6 +34,7 @@ export default function NodeInputField({
name = "",
required = false,
optionalHandle = null,
lastInput = false,
info = "",
proxy,
showNode,
@ -108,6 +109,7 @@ export default function NodeInputField({
ref={ref}
className={cn(
"relative mt-1 flex min-h-10 w-full flex-wrap items-center justify-between px-5 py-2",
lastInput ? "rounded-b-[0.69rem]" : "",
isToolMode && "bg-primary/10",
(name === "code" && type === "code") || (name.includes("code") && proxy)
? "hidden"

19
src/frontend/src/CustomNodes/GenericNode/components/NodeOutputfield/index.tsx
View file

@ -132,7 +132,6 @@ export default function NodeOutputField({
"relative mt-1 flex h-11 w-full flex-wrap items-center justify-between bg-muted px-5 py-2",
lastOutput ? "rounded-b-[0.69rem]" : "",
isToolMode && "bg-primary",
outputName === "component_as_tool" && "border-l-2 border-primary pl-2",
)}
>
<>
@ -158,8 +157,12 @@ export default function NodeOutputField({
className={cn(
"icon-size",
disabledOutput
? "text-placeholder-foreground opacity-60"
: "text-placeholder-foreground hover:text-foreground",
? isToolMode
? "text-placeholder-foreground opacity-60"
: "text-placeholder-foreground hover:text-foreground"
: isToolMode
? "text-background hover:text-secondary-hover"
: "text-placeholder-foreground hover:text-primary-hover",
)}
strokeWidth={ICON_STROKE_WIDTH}
name={data.node?.outputs![index].hidden ? "EyeOff" : "Eye"}
@ -215,9 +218,13 @@ export default function NodeOutputField({
<IconComponent
className={cn(
"icon-size",
displayOutputPreview && !unknownOutput
? "text-foreground hover:text-primary-hover"
: "cursor-not-allowed text-placeholder-foreground opacity-60",
isToolMode
? displayOutputPreview && !unknownOutput
? "text-background hover:text-secondary-hover"
: "cursor-not-allowed text-placeholder-foreground opacity-80"
: displayOutputPreview && !unknownOutput
? "text-foreground hover:text-primary-hover"
: "cursor-not-allowed text-placeholder-foreground opacity-60",
errorOutput ? "text-destructive" : "",
)}
name={"ScanEye"}

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

@ -271,6 +271,13 @@ export default function GenericNode({
data.node!.template[templateField]?.show &&
!data.node!.template[templateField]?.advanced && (
<NodeInputField
lastInput={
idx ===
Object.keys(data.node!.template).filter(
(templateField) => templateField.charAt(0) !== "_",
).length -
1 && !(shownOutputs.length > 0 || showHiddenOutputs)
}
key={scapedJSONStringfy({
inputTypes: data.node!.template[templateField].input_types,
type: data.node!.template[templateField].type,

19
src/frontend/src/modals/IOModal/components/chatView/newChatView.tsx
View file

@ -5,11 +5,12 @@ import { TextShimmer } from "@/components/ui/TextShimmer";
import { ENABLE_NEW_LOGO } from "@/customization/feature-flags";
import { track } from "@/customization/utils/analytics";
import { useMessagesStore } from "@/stores/messagesStore";
import { useEffect, useRef, useState } from "react";
import { useEffect, useMemo, useRef, useState } from "react";
import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
import useFlowStore from "../../../../stores/flowStore";
import { ChatMessageType } from "../../../../types/chat";
import { chatViewProps } from "../../../../types/components";
import FlowRunningSqueleton from "../flowRunningSqueleton";
import useDragAndDrop from "./chatInput/hooks/use-drag-and-drop";
import { useFileHandler } from "./chatInput/hooks/use-file-handler";
import ChatInput from "./chatInput/newChatInput";
@ -123,6 +124,8 @@ export default function ChatView({
setIsDragging(false);
};
const flowRunningSkeletonMemo = useMemo(() => <FlowRunningSqueleton />, []);
return (
<div
className="flex h-full w-full flex-col rounded-md"
@ -179,18 +182,8 @@ export default function ChatView({
>
{lockChat &&
chatHistory.length > 0 &&
!(chatHistory[chatHistory.length - 1]?.category === "error") && (
<div className="flex w-full gap-4 rounded-md p-2">
<LogoIcon />
<div className="flex items-center">
<div>
<TextShimmer className="" duration={1}>
Flow running...
</TextShimmer>
</div>
</div>
</div>
)}
!(chatHistory[chatHistory.length - 1]?.category === "error") &&
flowRunningSkeletonMemo}
</div>
</div>
<div className="m-auto w-5/6 max-w-[768px]">

17
src/frontend/src/modals/IOModal/components/flowRunningSqueleton/index.tsx Normal file
View file

@ -0,0 +1,17 @@
import { TextShimmer } from "@/components/ui/TextShimmer";
import LogoIcon from "../chatView/chatMessage/components/chatLogoIcon";
export default function FlowRunningSqueleton() {
return (
<div className="flex w-full gap-4 rounded-md p-2">
<LogoIcon />
<div className="flex items-center">
<div>
<TextShimmer className="" duration={1}>
Flow running...
</TextShimmer>
</div>
</div>
</div>
);
}

14
src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/sidebarItemsList/index.tsx
View file

@ -1,6 +1,5 @@
import ShadTooltip from "@/components/shadTooltipComponent";
import { removeCountFromString } from "@/utils/utils";
import React from "react";
import SidebarDraggableComponent from "../sidebarDraggableComponent";
const SidebarItemsList = ({
@ -14,12 +13,13 @@ const SidebarItemsList = ({
return (
<div className="flex flex-col gap-1 py-2">
{Object.keys(dataFilter[item.name])
.sort((a, b) =>
sensitiveSort(
dataFilter[item.name][a].display_name,
dataFilter[item.name][b].display_name,
),
)
.sort((a, b) => {
const itemA = dataFilter[item.name][a];
const itemB = dataFilter[item.name][b];
return itemA.score && itemB.score
? itemA.score - itemB.score
: sensitiveSort(itemA.display_name, itemB.display_name);
})
.map((SBItemName, idx) => {
const currentItem = dataFilter[item.name][SBItemName];

24
src/frontend/src/pages/FlowPage/components/flowSidebarComponent/index.tsx
View file

@ -134,6 +134,7 @@ export function FlowSidebarComponent() {
const options = {
keys: ["display_name", "description", "type", "category"],
threshold: 0.2,
includeScore: true,
};
const fuseData = Object.entries(data).flatMap(([category, items]) =>
@ -169,8 +170,14 @@ export function FlowSidebarComponent() {
let combinedResults = {};
if (fuse) {
const fuseResults = fuse.search(search);
setSortedCategories(fuseResults.map((result) => result.item.category));
const fuseResults = fuse.search(search).map((result) => ({
...result,
item: { ...result.item, score: result.score },
}));
const fuseCategories = fuseResults.map(
(result) => result.item.category,
);
setSortedCategories(fuseCategories);
combinedResults = combinedResultsFn(fuseResults, data);
const traditionalResults = traditionalSearchMetadata(data, searchTerm);
@ -182,9 +189,16 @@ export function FlowSidebarComponent() {
);
setSortedCategories(
Object.keys(filteredData).filter(
(category) => Object.keys(filteredData[category]).length > 0,
),
Object.keys(filteredData)
.filter(
(category) => Object.keys(filteredData[category]).length > 0,
)
.toSorted(
(a, b) =>
fuseCategories.findIndex((value) => value === a) ??
0 - fuseCategories.findIndex((value) => value === b) ??
0,
),
);
}
}

4
src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
View file

@ -91,7 +91,7 @@ export default function NodeToolbarComponent({
updateNodeInternals(data.id);
}
function minimize() {
if (isMinimal) {
if (isMinimal || !showNode) {
setShowNode((data.showNode ?? true) ? false : true);
updateNodeInternals(data.id);
return;
@ -661,7 +661,7 @@ export default function NodeToolbarComponent({
dataTestId="docs-button-modal"
/>
</SelectItem>
{isMinimal && (
{(isMinimal || !showNode) && (
<SelectItem
value={"show"}
data-testid={`${showNode ? "minimize" : "expand"}-button-modal`}

1
src/frontend/src/types/components/index.ts
View file

@ -104,6 +104,7 @@ export type NodeInputFieldComponentType = {
name: string;
required: boolean;
optionalHandle: Array<String> | undefined | null;
lastInput?: boolean;
info: string;
proxy: { field: string; id: string } | undefined;
showNode: boolean;