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

Fix formatting issues in code

Browse source
This commit is contained in:
anovazzi1 2024-01-18 16:48:13 -03:00
commit 65ec1ab3a5
21 changed files with 841 additions and 859 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/backend/langflow/interface/chains/custom.py
View file

@ -67,7 +67,9 @@ Human: {input}
class MidJourneyPromptChain(BaseCustomConversationChain):
"""MidJourneyPromptChain is a chain you can use to generate new MidJourney prompts."""
template: Optional[str] = """I want you to act as a prompt generator for Midjourney's artificial intelligence program.
template: Optional[
str
] = """I want you to act as a prompt generator for Midjourney's artificial intelligence program.
Your job is to provide detailed and creative descriptions that will inspire unique and interesting images from the AI.
Keep in mind that the AI is capable of understanding a wide range of language and can interpret abstract concepts, so feel free to be as imaginative and descriptive as possible.
For example, you could describe a scene from a futuristic city, or a surreal landscape filled with strange creatures.
@ -81,7 +83,9 @@ class MidJourneyPromptChain(BaseCustomConversationChain):
class TimeTravelGuideChain(BaseCustomConversationChain):
template: Optional[str] = """I want you to act as my time travel guide. You are helpful and creative. I will provide you with the historical period or future time I want to visit and you will suggest the best events, sights, or people to experience. Provide the suggestions and any necessary information.
template: Optional[
str
] = """I want you to act as my time travel guide. You are helpful and creative. I will provide you with the historical period or future time I want to visit and you will suggest the best events, sights, or people to experience. Provide the suggestions and any necessary information.
Current conversation:
{history}
Human: {input}

1
src/frontend/src/App.tsx
View file

@ -23,7 +23,6 @@ import useFlowsManagerStore from "./stores/flowsManagerStore";
import { useTypesStore } from "./stores/typesStore";
export default function App() {
const errorData = useAlertStore((state) => state.errorData);
const errorOpen = useAlertStore((state) => state.errorOpen);
const setErrorOpen = useAlertStore((state) => state.setErrorOpen);

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

@ -132,7 +132,6 @@ export default function ParameterComponent({
takeSnapshot();
}
setNode(data.id, (oldNode) => {
let newNode = cloneDeep(oldNode);
@ -273,9 +272,11 @@ export default function ParameterComponent({
<Handle
type={left ? "target" : "source"}
position={left ? Position.Left : Position.Right}
key={proxy
key={
proxy
? scapedJSONStringfy({ ...id, proxy })
: scapedJSONStringfy(id)}
: scapedJSONStringfy(id)
}
id={
proxy
? scapedJSONStringfy({ ...id, proxy })
@ -348,9 +349,11 @@ export default function ParameterComponent({
<Handle
type={left ? "target" : "source"}
position={left ? Position.Left : Position.Right}
key={proxy
key={
proxy
? scapedJSONStringfy({ ...id, proxy })
: scapedJSONStringfy(id)}
: scapedJSONStringfy(id)
}
id={
proxy
? scapedJSONStringfy({ ...id, proxy })

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

@ -1,29 +1,27 @@
import { ReactNode, useContext, useState } from "react";
import NewChatView from "../newChatView";
import { extractTypeFromLongId, removeCountFromString } from "../../utils/utils";
import AccordionComponent from "../AccordionComponent";
import { Badge } from "../ui/badge";
import ShadTooltip from "../ShadTooltipComponent";
import IconComponent from "../genericIconComponent";
import { Textarea } from "../ui/textarea";
import { NodeDataType } from "../../types/flow";
import { ReactNode, useState } from "react";
import useFlowStore from "../../stores/flowStore";
import useFlowsManagerStore from "../../stores/flowsManagerStore";
import useFlowIOStore from "../../stores/flowsIOStore";
import { NodeDataType } from "../../types/flow";
import { extractTypeFromLongId } from "../../utils/utils";
import AccordionComponent from "../AccordionComponent";
import IconComponent from "../genericIconComponent";
import NewChatView from "../newChatView";
import { Badge } from "../ui/badge";
import { Textarea } from "../ui/textarea";
export default function IOView(): JSX.Element {
const {inputIds, outputIds, updateNodeFlowData } =
useFlowIOStore();
const { inputIds, outputIds, updateNodeFlowData } = useFlowIOStore();
const { reactFlowInstance } = useFlowStore();
const options = inputIds.concat(outputIds);
const [selectedView, setSelectedView] = useState<ReactNode>(handleSelectChange(options[0]));
const [selectedView, setSelectedView] = useState<ReactNode>(
handleSelectChange(options[0])
);
// if (outputTypes.includes("ChatOutput")) {
// return <NewChatView />;
// }
function handleSelectChange(selected: string) {
const type = extractTypeFromLongId(selected);
return <NewChatView />
return <NewChatView />;
switch (type) {
case "ChatOutput":
return <NewChatView />;
@ -31,22 +29,19 @@ export default function IOView(): JSX.Element {
}
}
return (
<div className="form-modal-iv-box">
<div className="mr-6 flex h-full w-2/6 flex-col justify-start overflow-auto scrollbar-hide">
<div className="file-component-arrangement">
<IconComponent
name="Variable"
className=" file-component-variable"
/>
<span className="file-component-variables-span text-md">
Inputs
</span>
<IconComponent name="Variable" className=" file-component-variable" />
<span className="file-component-variables-span text-md">Inputs</span>
</div>
{
inputIds.filter(input=>extractTypeFromLongId(input)!=="ChatInput").map((inputId,index) => {
const nodeData:NodeDataType = reactFlowInstance?.getNodes().find(node=>node.id===inputId)?.data;
{inputIds
.filter((input) => extractTypeFromLongId(input) !== "ChatInput")
.map((inputId, index) => {
const nodeData: NodeDataType = reactFlowInstance
?.getNodes()
.find((node) => node.id === inputId)?.data;
return (
<div className="file-component-accordion-div" key={index}>
<AccordionComponent
@ -60,8 +55,7 @@ export default function IOView(): JSX.Element {
onClick={(event) => {
event.stopPropagation();
}}
>
</div>
></div>
</div>
}
key={index}
@ -69,13 +63,19 @@ export default function IOView(): JSX.Element {
>
<div className="file-component-tab-column">
<Textarea
value={reactFlowInstance?.getNodes().find(node=>node.id===inputId)?.data?.node?.template?.value.value}
value={
reactFlowInstance
?.getNodes()
.find((node) => node.id === inputId)?.data?.node
?.template?.value.value
}
className="custom-scroll"
onChange={(e) => {
e.target.value;
if(nodeData){
nodeData.node!.template["value"].value = e.target.value;
updateNodeFlowData(inputId,nodeData);
if (nodeData) {
nodeData.node!.template["value"].value =
e.target.value;
updateNodeFlowData(inputId, nodeData);
}
}}
placeholder="Enter text..."
@ -83,9 +83,8 @@ export default function IOView(): JSX.Element {
</div>
</AccordionComponent>
</div>
)
})
}
);
})}
</div>
{selectedView}
</div>

24
src/frontend/src/components/newChatView/chatInput/index.tsx
View file

@ -19,18 +19,15 @@ export default function ChatInput({
}
}, [lockChat, inputRef]);
function handleChange(value:number){
console.log(value)
if(value>0){
function handleChange(value: number) {
console.log(value);
if (value > 0) {
setRepeate(value);
}
else{
} else {
setRepeate(1);
}
}
useEffect(() => {
if (inputRef.current) {
inputRef.current.style.height = "inherit"; // Reset the height
@ -38,16 +35,18 @@ export default function ChatInput({
}
}, [chatValue]);
return (
<div className="relative">
<div className="flex flex-col">
<span className="text-xs">repeate</span>
<input onChange={(e)=>{
<input
onChange={(e) => {
handleChange(parseInt(e.target.value));
}} className="bg-background" type="number" min={0}/>
}}
className="bg-background"
type="number"
min={0}
/>
</div>
<Textarea
onKeyDown={(event) => {
@ -79,7 +78,6 @@ export default function ChatInput({
? "form-modal-no-input bg-input"
: " form-modal-lock-false bg-background",
"form-modal-lockchat"
)}
placeholder={

7
src/frontend/src/components/newChatView/chatMessage/codeBlock/index.tsx
View file

@ -8,17 +8,14 @@ import { Props } from "../../../../types/components";
export function CodeBlock({ language, value }: Props): JSX.Element {
const [isCopied, setIsCopied] = useState<Boolean>(false);
const copyToClipboard = (): void => {
if (!navigator.clipboard || !navigator.clipboard.writeText) {
return;
}
navigator.clipboard.writeText(value).then(() => {
setIsCopied(true);
setTimeout(() => {
setIsCopied(false);
}, 2000);
@ -29,13 +26,11 @@ export function CodeBlock({ language, value }: Props): JSX.Element {
const suggestedFileName = `${"generated-code"}${fileExtension}`;
const fileName = window.prompt("enter file name", suggestedFileName);
if (!fileName) {
// user pressed cancel on prompt
return;
}
const blob = new Blob([value], { type: "text/plain" });
const url = URL.createObjectURL(blob);
const link = document.createElement("a");
@ -52,7 +47,6 @@ export function CodeBlock({ language, value }: Props): JSX.Element {
<div className="code-block-modal">
<span className="code-block-modal-span">{language}</span>
<div className="flex items-center">
<button className="code-block-modal-button" onClick={copyToClipboard}>
{isCopied ? <IconCheck size={18} /> : <IconClipboard size={18} />}
@ -64,7 +58,6 @@ export function CodeBlock({ language, value }: Props): JSX.Element {
</div>
</div>
<SyntaxHighlighter
className="overflow-auto"
language={language}

9
src/frontend/src/components/newChatView/chatMessage/index.tsx
View file

@ -13,7 +13,6 @@ import { chatMessagePropsType } from "../../../types/components";
import { classNames } from "../../../utils/utils";
import FileCard from "../fileComponent";
export default function ChatMessage({
chat,
lockChat,
@ -37,7 +36,7 @@ export default function ChatMessage({
alt="robot_image"
/>
</div>
<span className="text-xs truncate">{chat.sender_name}</span>
<span className="truncate text-xs">{chat.sender_name}</span>
</div>
) : (
<div className="form-modal-chat-image">
@ -48,7 +47,7 @@ export default function ChatMessage({
alt="male_technology"
/>
</div>
<span className="text-xs truncate">{chat.sender_name}</span>
<span className="truncate text-xs">{chat.sender_name}</span>
</div>
)}
</div>
@ -110,19 +109,16 @@ export default function ChatMessage({
);
}
children[0] = (children[0] as string).replace(
"`▍`",
"▍"
);
}
const match = /language-(\w+)/.exec(
className || ""
);
return !inline ? (
<CodeTabsComponent
isMessage
@ -211,7 +207,6 @@ export default function ChatMessage({
);
}
// Update last index
lastIndex = regex.lastIndex;
}

2
src/frontend/src/components/newChatView/fileComponent/index.tsx
View file

@ -28,7 +28,6 @@ export default function FileCard({
setIsHovered(false);
}
if (fileType === "image") {
return (
<div
@ -58,7 +57,6 @@ export default function FileCard({
);
}
return (
<button onClick={handleDownload} className="file-card-modal-button">
<div className="file-card-modal-div">

44
src/frontend/src/components/newChatView/index.tsx
View file

@ -1,40 +1,38 @@
import { useContext, useEffect, useRef, useState } from "react";
import { sendAllProps } from "../../types/api";
import { ChatMessageType } from "../../types/chat";
import { NodeType } from "../../types/flow";
import { classNames } from "../../utils/utils";
import ChatInput from "./chatInput";
import ChatMessage from "./chatMessage";
import { cloneDeep } from "lodash";
import { useEffect, useRef, useState } from "react";
import IconComponent from "../../components/genericIconComponent";
import useAlertStore from "../../stores/alertStore";
import useFlowStore from "../../stores/flowStore";
import useFlowIOStore from "../../stores/flowsIOStore";
import { sendAllProps } from "../../types/api";
import {
ChatMessageType,
ChatOutputType,
FlowPoolObjectType,
} from "../../types/chat";
import { NodeType } from "../../types/flow";
import { validateNodes } from "../../utils/reactflowUtils";
import useAlertStore from "../../stores/alertStore";
import useFlowIOStore from "../../stores/flowsIOStore";
import useFlowsManagerStore from "../../stores/flowsManagerStore";
import useFlowStore from "../../stores/flowStore";
import { classNames } from "../../utils/utils";
import ChatInput from "./chatInput";
import ChatMessage from "./chatMessage";
export default function newChatView(): JSX.Element {
const [chatValue, setChatValue] = useState("");
const [chatHistory, setChatHistory] = useState<ChatMessageType[]>([]);
const { reactFlowInstance } = useFlowStore()
const { reactFlowInstance } = useFlowStore();
const {
flowPool,
outputIds,
inputIds, inputTypes,
inputIds,
inputTypes,
updateNodeFlowData,
buildFlow,
CleanFlowPool
CleanFlowPool,
} = useFlowIOStore();
const { setErrorData } = useAlertStore();
const [lockChat, setLockChat] = useState(false);
const messagesRef = useRef<HTMLDivElement | null>(null);
//build chat history
useEffect(() => {
const chatOutputResponses: FlowPoolObjectType[] = [];
@ -46,9 +44,11 @@ export default function newChatView(): JSX.Element {
}
});
const chatMessages: ChatMessageType[] = chatOutputResponses
.sort((a, b) => Date.parse(a.timestamp) - Date.parse(b.timestamp)).filter((output) => !!output.data.artifacts.message)
.sort((a, b) => Date.parse(a.timestamp) - Date.parse(b.timestamp))
.filter((output) => !!output.data.artifacts.message)
.map((output) => {
const { sender, message, sender_name } = output.data.artifacts as ChatOutputType;
const { sender, message, sender_name } = output.data
.artifacts as ChatOutputType;
console.log(output.data.artifacts);
const is_ai = sender === "Machine";
return { isSend: !is_ai, message, sender_name };
@ -61,23 +61,19 @@ export default function newChatView(): JSX.Element {
}
}, [chatHistory]);
async function sendAll(data: sendAllProps): Promise<void> { }
async function sendAll(data: sendAllProps): Promise<void> {}
useEffect(() => {
if (ref.current) ref.current.scrollIntoView({ behavior: "smooth" });
}, [chatHistory]);
const ref = useRef<HTMLDivElement | null>(null);
useEffect(() => {
if (ref.current) {
ref.current.focus();
}
}, []);
async function sendMessage(count = 1): Promise<void> {
let nodeValidationErrors = validateNodes(
reactFlowInstance!.getNodes(),
@ -106,7 +102,6 @@ export default function newChatView(): JSX.Element {
}
setLockChat(false);
//set chat message in the flow and run build
//@ts-ignore
} else {
@ -123,7 +118,6 @@ export default function newChatView(): JSX.Element {
if (lockChat) setLockChat(false);
}
return (
<div className="eraser-column-arrangement">
<div className="eraser-size">

2
src/frontend/src/components/textInputComponent/index.tsx
View file

@ -4,7 +4,7 @@ export default function TextInputComponent({
}: {
text: string;
emissor: string;
}) {
}) {
return (
<div>
<strong> {emissor}</strong>

4
src/frontend/src/components/textOutputComponent/index.tsx
View file

@ -1,10 +1,10 @@
export default function TextOutputComponent({
text,
emissor,
}: {
}: {
text: string;
emissor: string;
}) {
}) {
return (
<div>
<strong>{emissor}</strong>

2
src/frontend/src/constants/constants.ts
View file

@ -678,5 +678,5 @@ export const LANGFLOW_SUPPORTED_TYPES = new Set([
export const priorityFields = new Set(["code", "template"]);
export const INPUT_TYPES = new Set(["ChatInput","TextInput"]);
export const INPUT_TYPES = new Set(["ChatInput", "TextInput"]);
export const OUTPUT_TYPES = new Set(["ChatOutput"]);

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

@ -9,7 +9,6 @@ import ReactFlow, {
OnMove,
OnSelectionChangeParams,
SelectionDragHandler,
addEdge,
updateEdge,
} from "reactflow";
import GenericNode from "../../../../CustomNodes/GenericNode";
@ -19,13 +18,12 @@ import useFlowStore from "../../../../stores/flowStore";
import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
import { useTypesStore } from "../../../../stores/typesStore";
import { APIClassType } from "../../../../types/api";
import { FlowType, NodeType, targetHandleType } from "../../../../types/flow";
import { FlowType, NodeType } from "../../../../types/flow";
import {
generateFlow,
generateNodeFromFlow,
getNodeId,
isValidConnection,
scapeJSONParse,
validateSelection,
} from "../../../../utils/reactflowUtils";
import { getRandomName, isWrappedWithClass } from "../../../../utils/utils";
@ -175,8 +173,8 @@ export default function Page({
useEffect(() => {
return () => {
cleanFlow();
}
}, [])
};
}, []);
const onConnectMod = useCallback(
(params: Connection) => {

2
src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarDraggableComponent/index.tsx
View file

@ -4,7 +4,7 @@ import {
Select,
SelectContent,
SelectItem,
SelectTrigger
SelectTrigger,
} from "../../../../../components/ui/select-custom";
import { useDarkStore } from "../../../../../stores/darkStore";
import useFlowsManagerStore from "../../../../../stores/flowsManagerStore";

5
src/frontend/src/stores/flowStore.ts
View file

@ -265,7 +265,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
},
getFilterEdge: [],
onConnect: (connection) => {
let newEdges: Edge[] = []
let newEdges: Edge[] = [];
get().setEdges((oldEdges) => {
newEdges = addEdge(
{
@ -287,8 +287,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
oldEdges
);
return newEdges;
})
});
useFlowsManagerStore
.getState()
.autoSaveCurrentFlow(

1
src/frontend/src/stores/flowsIOStore.ts
View file

@ -19,7 +19,6 @@ const useFlowIOStore = create<flowIOStoreType>((set, get) => ({
inputTypes: [],
inputIds: [],
outputIds: [],
setFlowPool: (flowPool) => {
set({ flowPool });
},

1
src/frontend/src/stores/typesStore.ts
View file

@ -43,5 +43,4 @@ export const useTypesStore = create<TypesStoreType>((set, get) => ({
let newChange = typeof change === "function" ? change(get().data) : change;
set({ data: newChange });
},
}));

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

@ -444,7 +444,7 @@ export type chatInputType = {
};
lockChat: boolean;
noInput: boolean;
sendMessage: (count?:number) => void;
sendMessage: (count?: number) => void;
setChatValue: (value: string) => void;
};

26
src/frontend/src/utils/buildUtils.ts
View file

@ -1,6 +1,6 @@
import { AxiosError } from "axios";
import { FlowType } from "../types/flow";
import { getVerticesOrder, postBuildVertex } from "../controllers/API";
import { FlowType } from "../types/flow";
type BuildVerticesParams = {
flow: FlowType; // Assuming FlowType is the type for your flow
@ -9,16 +9,16 @@ type BuildVerticesParams = {
onBuildUpdate?: (data: any) => void; // Replace any with the actual type of data
onBuildComplete?: (allNodesValid: boolean) => void;
onBuildError?: (title, list) => void;
};
};
export async function buildVertices({
export async function buildVertices({
flow,
nodeId = null,
onProgressUpdate,
onBuildUpdate,
onBuildComplete,
onBuildError,
}: BuildVerticesParams) {
}: BuildVerticesParams) {
try {
// Step 1: Get vertices order
console.log(JSON.parse(JSON.stringify(flow)));
@ -56,11 +56,13 @@ type BuildVerticesParams = {
onBuildUpdate({ data, id: buildData.id });
}
buildResults.push(buildData.valid);
} catch (error : any) {
} catch (error: any) {
if (onBuildError) {
console.log(error)
onBuildError("Error Building Component", [(error as AxiosError<any>).response?.data?.detail??"Unknown Error"]);
console.log(error);
onBuildError("Error Building Component", [
(error as AxiosError<any>).response?.data?.detail ??
"Unknown Error",
]);
}
}
}
@ -70,12 +72,14 @@ type BuildVerticesParams = {
const allNodesValid = buildResults.every((result) => result);
onBuildComplete(allNodesValid);
}
} catch (error:any) {
} catch (error: any) {
// Callback for handling errors
if (onBuildError) {
if (onBuildError) {
onBuildError("Error Building Component", [(error as AxiosError<any>).response?.data?.detail??"Unknown Error"]);
}
onBuildError("Error Building Component", [
(error as AxiosError<any>).response?.data?.detail ?? "Unknown Error",
]);
}
}
}
}

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

@ -477,7 +477,7 @@ export function convertArrayToObj(arrayOfObjects) {
export function hasDuplicateKeys(array) {
const keys = {};
// Transforms an empty object into an object array without opening the 'editNode' modal to prevent the flow build from breaking.
if (!Array.isArray(array)) array = [{"": ""}];
if (!Array.isArray(array)) array = [{ "": "" }];
for (const obj of array) {
for (const key in obj) {
if (keys[key]) {

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

@ -593,7 +593,7 @@ export function removeCountFromString(input: string): string {
}
export function extractTypeFromLongId(id: string): string {
let [newId,_] = id.split("-");
let [newId, _] = id.split("-");
return newId;
}