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

Made back button on chat and fixed output and input exibition

Browse source
This commit is contained in:
Lucas Oliveira 2024-02-26 21:44:44 +01:00
commit 160aa47e26
5 changed files with 77 additions and 59 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -477,11 +477,11 @@ export default function GenericNode({
) : (
<div className="max-h-96 overflow-auto">
{typeof validationStatus.params === "string"
? `${durationString}\n${validationStatus.params}`
? (`${durationString}\n${validationStatus.params}`
.split("\n")
.map((line, index) => (
<div key={index}>{line}</div>
))
)))
: durationString}
</div>
)

13
src/frontend/src/components/IOInputField/index.tsx
View file

@ -12,12 +12,12 @@ export default function IOInputField({
const setNode = useFlowStore((state) => state.setNode);
const node = nodes.find((node) => node.id === inputId);
function handleInputType() {
if (!node) return "no node found";
if (!node) return <>"No node found!"</>;
switch (inputType) {
case "TextInput":
return (
<Textarea
className="h-full w-full custom-scroll"
className="w-full"
placeholder={"Enter text..."}
value={node.data.node!.template["value"].value}
onChange={(e) => {
@ -47,7 +47,7 @@ export default function IOInputField({
default:
return (
<Textarea
className="h-full w-full custom-scroll"
className="w-full custom-scroll"
placeholder={"Enter text..."}
value={node.data.node!.template["value"]}
onChange={(e) => {
@ -62,10 +62,5 @@ export default function IOInputField({
);
}
}
return (
<div className="font-xl flex h-full w-full flex-col items-start gap-4 p-4 font-semibold">
{inputType}
{handleInputType()}
</div>
);
return handleInputType();
}

16
src/frontend/src/components/IOOutputView/index.tsx
View file

@ -11,17 +11,16 @@ export default function IOOutputView({
const setNode = useFlowStore((state) => state.setNode);
const flowPool = useFlowStore((state) => state.flowPool);
const node = nodes.find((node) => node.id === outputId);
console.log(flowPool[node!.id][flowPool[node!.id].length - 1])
function handleOutputType() {
if (!node) return "no node found";
if (!node) return <>"No node found!"</>;
switch (outputType) {
case "TextOutput":
return (
<Textarea
className="h-full w-full custom-scroll"
className="w-full custom-scroll"
placeholder={"Empty"}
// update to real value on flowPool
value={flowPool[node.id][flowPool[node.id].length - 1].params}
value={((flowPool[node.id] ?? [])[(flowPool[node.id]?.length ?? 1) - 1])?.params ?? ""}
readOnly
/>
);
@ -29,7 +28,7 @@ export default function IOOutputView({
default:
return (
<Textarea
className="h-full w-full custom-scroll"
className="w-full custom-scroll"
placeholder={"Enter text..."}
value={node.data.node!.template["value"]}
onChange={(e) => {
@ -44,10 +43,5 @@ export default function IOOutputView({
);
}
}
return (
<div className="font-xl flex h-full w-full flex-col items-start gap-4 p-4 font-semibold">
{outputType}
{handleOutputType()}
</div>
);
return handleOutputType();
}

101
src/frontend/src/components/IOview/index.tsx
View file

@ -50,23 +50,22 @@ export default function IOView({ children, open, setOpen }): JSX.Element {
async function sendMessage(count = 1): Promise<void> {
if (isBuilding) return;
const { nodes, edges } = getFlow();
setIsBuilding(true);
setLockChat(true);
setChatValue("");
const chatInputNode = nodes.find((node) => node.id === chatInput?.id);
if (chatInputNode) {
let newNode = cloneDeep(chatInputNode);
newNode.data.node!.template["message"].value = chatValue;
setNode(chatInput!.id, newNode);
}
for (let i = 0; i < count; i++) {
await buildFlow().catch((err) => {
console.error(err);
setLockChat(false);
});
}
setLockChat(false);
setIsBuilding(true);
setLockChat(true);
setChatValue("");
const chatInputNode = nodes.find((node) => node.id === chatInput?.id);
if (chatInputNode) {
let newNode = cloneDeep(chatInputNode);
newNode.data.node!.template["message"].value = chatValue;
setNode(chatInput!.id, newNode);
}
for (let i = 0; i < count; i++) {
await buildFlow().catch((err) => {
console.error(err);
setLockChat(false);
});
}
setLockChat(false);
}
useEffect(() => {
@ -249,27 +248,55 @@ export default function IOView({ children, open, setOpen }): JSX.Element {
)}
{haveChat ? (
selectedViewField ? (
inputs.some((input) => input.id === selectedViewField.id) ? (
<IOInputField
inputType={selectedViewField.type!}
inputId={selectedViewField.id!}
<div className="flex h-full w-full">
{selectedViewField && (
<div
className={cn(
"flex h-full w-full flex-col items-start gap-4 p-4",
!selectedViewField ? "hidden" : ""
)}
>
<div className="font-xl flex items-center justify-center gap-3 font-semibold">
<button onClick={() => setSelectedViewField(undefined)}>
<IconComponent
name={"ArrowLeft"}
className="h-6 w-6"
></IconComponent>
</button>
{selectedViewField.type}
</div>
<div className="flex h-full w-full">
{inputs.some(
(input) => input.id === selectedViewField.id
) ? (
<IOInputField
inputType={selectedViewField.type!}
inputId={selectedViewField.id!}
/>
) : (
<IOOutputView
outputType={selectedViewField.type!}
outputId={selectedViewField.id!}
/>
)}
</div>
</div>
)}
<div
className={cn(
"flex h-full w-full",
selectedViewField ? "hidden" : ""
)}
>
<NewChatView
sendMessage={sendMessage}
chatValue={chatValue}
setChatValue={setChatValue}
lockChat={lockChat}
setLockChat={setLockChat}
/>
) : (
<IOOutputView
outputType={selectedViewField.type!}
outputId={selectedViewField.id!}
/>
)
) : (
<NewChatView
sendMessage={sendMessage}
chatValue={chatValue}
setChatValue={setChatValue}
lockChat={lockChat}
setLockChat={setLockChat}
/>
)
</div>
</div>
) : (
<div className="absolute bottom-8 right-8"></div>
)}

2
src/frontend/src/utils/styleUtils.ts
View file

@ -1,5 +1,6 @@
import {
AlertCircle,
ArrowLeft,
ArrowUpToLine,
Bell,
BookMarked,
@ -340,6 +341,7 @@ export const nodeIconsLucide: iconsType = {
Bell,
ChevronLeft,
ChevronDown,
ArrowLeft,
Shield,
Plus,
Redo,