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

Fixed chatComponent not appearing after build

Browse source
This commit is contained in:
Lucas Oliveira 2024-01-08 14:27:50 -03:00
commit fe61802972
4 changed files with 33 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

5
src/frontend/src/components/chatComponent/index.tsx
View file

@ -17,7 +17,6 @@ export default function Chat({ flow }: ChatType): JSX.Element {
const isBuilt = useFlowStore((state) => state.isBuilt); const isBuilt = useFlowStore((state) => state.isBuilt);
const setIsBuilt = useFlowStore((state) => state.setIsBuilt); const setIsBuilt = useFlowStore((state) => state.setIsBuilt);
const currentFlowState = useFlowsManagerStore((state) => state.currentFlowState); const currentFlowState = useFlowsManagerStore((state) => state.currentFlowState);
useEffect(() => { useEffect(() => {
const handleKeyDown = (event: KeyboardEvent) => { const handleKeyDown = (event: KeyboardEvent) => {
if ( if (
@ -60,8 +59,7 @@ export default function Chat({ flow }: ChatType): JSX.Element {
} }
if ( if (
currentFlowState && currentFlowState &&
currentFlowState.formKeysData && currentFlowState.input_keys !== null
currentFlowState.formKeysData.input_keys !== null
) { ) {
setCanOpen(true); setCanOpen(true);
} else { } else {
@ -82,7 +80,6 @@ export default function Chat({ flow }: ChatType): JSX.Element {
/> />
{isBuilt && {isBuilt &&
currentFlowState && currentFlowState &&
currentFlowState.formKeysData &&
canOpen && ( canOpen && (
<FormModal <FormModal
key={flow.id} key={flow.id}

45
src/frontend/src/modals/formModal/index.tsx
View file

@ -48,12 +48,11 @@ export default function FormModal({
); );
const [chatValue, setChatValue] = useState(() => { const [chatValue, setChatValue] = useState(() => {
try { try {
const formKeysData = currentFlowState?.formKeysData; if (!currentFlowState) {
if (!formKeysData) { throw new Error("currentFlowState is undefined");
throw new Error("formKeysData is undefined");
} }
const inputKeys = formKeysData.input_keys; const inputKeys = currentFlowState.input_keys;
const handleKeys = formKeysData.handle_keys; const handleKeys = currentFlowState.handle_keys;
const keyToUse = Object.keys(inputKeys!).find( const keyToUse = Object.keys(inputKeys!).find(
(key) => !handleKeys?.some((j) => j === key) && inputKeys![key] === "" (key) => !handleKeys?.some((j) => j === key) && inputKeys![key] === ""
@ -68,7 +67,7 @@ export default function FormModal({
}); });
const [chatHistory, setChatHistory] = useState<ChatMessageType[]>([]); const [chatHistory, setChatHistory] = useState<ChatMessageType[]>([]);
const template = useRef(currentFlowState?.formKeysData.template ?? undefined); const template = useRef(currentFlowState?.template ?? undefined);
const { accessToken } = useContext(AuthContext); const { accessToken } = useContext(AuthContext);
const setErrorData = useAlertStore((state) => state.setErrorData); const setErrorData = useAlertStore((state) => state.setErrorData);
const ws = useRef<WebSocket | null>(null); const ws = useRef<WebSocket | null>(null);
@ -77,11 +76,11 @@ export default function FormModal({
const messagesRef = useRef<HTMLDivElement | null>(null); const messagesRef = useRef<HTMLDivElement | null>(null);
const [chatKey, setChatKey] = useState(() => { const [chatKey, setChatKey] = useState(() => {
if (currentFlowState?.formKeysData?.input_keys) { if (currentFlowState?.input_keys) {
return Object.keys(currentFlowState.formKeysData.input_keys!).find( return Object.keys(currentFlowState.input_keys!).find(
(key) => (key) =>
!currentFlowState.formKeysData.handle_keys!.some((j) => j === key) && !currentFlowState.handle_keys!.some((j) => j === key) &&
currentFlowState.formKeysData.input_keys![key] === "" currentFlowState.input_keys![key] === ""
); );
} }
// TODO: return a sensible default // TODO: return a sensible default
@ -387,7 +386,7 @@ export default function FormModal({
let nodeValidationErrors = validateNodes(nodes, edges); let nodeValidationErrors = validateNodes(nodes, edges);
if (nodeValidationErrors.length === 0) { if (nodeValidationErrors.length === 0) {
setLockChat(true); setLockChat(true);
let inputs = currentFlowState?.formKeysData.input_keys; let inputs = currentFlowState?.input_keys;
setChatValue(""); setChatValue("");
const message = inputs; const message = inputs;
addChatHistory(message!, true, chatKey!, template.current); addChatHistory(message!, true, chatKey!, template.current);
@ -402,7 +401,7 @@ export default function FormModal({
if (currentFlowState && chatKey) { if (currentFlowState && chatKey) {
setCurrentFlowState((old: FlowState | undefined) => { setCurrentFlowState((old: FlowState | undefined) => {
let newFlowState = cloneDeep(old!); let newFlowState = cloneDeep(old!);
newFlowState.formKeysData.input_keys![chatKey] = ""; newFlowState.input_keys![chatKey] = "";
return newFlowState; return newFlowState;
}); });
} }
@ -415,7 +414,7 @@ export default function FormModal({
} }
function clearChat(): void { function clearChat(): void {
setChatHistory([]); setChatHistory([]);
template.current = currentFlowState?.formKeysData.template; template.current = currentFlowState?.template;
ws.current?.send(JSON.stringify({ clear_history: true })); ws.current?.send(JSON.stringify({ clear_history: true }));
if (lockChat) setLockChat(false); if (lockChat) setLockChat(false);
} }
@ -423,7 +422,7 @@ export default function FormModal({
function handleOnCheckedChange(checked: boolean, i: string) { function handleOnCheckedChange(checked: boolean, i: string) {
if (checked === true) { if (checked === true) {
setChatKey(i); setChatKey(i);
setChatValue(currentFlowState?.formKeysData.input_keys![i] ?? ""); setChatValue(currentFlowState?.input_keys![i] ?? "");
} else { } else {
setChatKey(null!); setChatKey(null!);
setChatValue(""); setChatValue("");
@ -432,7 +431,7 @@ export default function FormModal({
return ( return (
<Dialog open={open} onOpenChange={setOpen}> <Dialog open={open} onOpenChange={setOpen}>
<DialogTrigger hidden></DialogTrigger> <DialogTrigger hidden></DialogTrigger>
{currentFlowState && currentFlowState.formKeysData && ( {currentFlowState && currentFlowState && (
<DialogContent className="min-w-[80vw]"> <DialogContent className="min-w-[80vw]">
<DialogHeader> <DialogHeader>
<DialogTitle className="flex items-center"> <DialogTitle className="flex items-center">
@ -468,8 +467,8 @@ export default function FormModal({
</div> </div>
</div> </div>
{currentFlowState?.formKeysData?.input_keys {currentFlowState?.input_keys
? Object.keys(currentFlowState?.formKeysData.input_keys!).map( ? Object.keys(currentFlowState?.input_keys!).map(
(key, index) => ( (key, index) => (
<div className="file-component-accordion-div" key={index}> <div className="file-component-accordion-div" key={index}>
<AccordionComponent <AccordionComponent
@ -491,7 +490,7 @@ export default function FormModal({
handleOnCheckedChange(value, key) handleOnCheckedChange(value, key)
} }
size="small" size="small"
disabled={currentFlowState.formKeysData.handle_keys!.some( disabled={currentFlowState.handle_keys!.some(
(t) => t === key (t) => t === key
)} )}
/> />
@ -502,7 +501,7 @@ export default function FormModal({
keyValue={key} keyValue={key}
> >
<div className="file-component-tab-column"> <div className="file-component-tab-column">
{currentFlowState?.formKeysData.handle_keys!.some( {currentFlowState?.handle_keys!.some(
(t) => t === key (t) => t === key
) && ( ) && (
<div className="font-normal text-muted-foreground "> <div className="font-normal text-muted-foreground ">
@ -512,14 +511,14 @@ export default function FormModal({
<Textarea <Textarea
className="custom-scroll" className="custom-scroll"
value={ value={
currentFlowState?.formKeysData.input_keys![key] currentFlowState?.input_keys![key]
} }
onChange={(e) => { onChange={(e) => {
if (currentFlowState) { if (currentFlowState) {
setCurrentFlowState( setCurrentFlowState(
(old: FlowState | undefined) => { (old: FlowState | undefined) => {
let newFlowState = cloneDeep(old!); let newFlowState = cloneDeep(old!);
newFlowState.formKeysData.input_keys![ newFlowState.input_keys![
key key
] = e.target.value; ] = e.target.value;
return newFlowState; return newFlowState;
@ -536,7 +535,7 @@ export default function FormModal({
) )
) )
: null} : null}
{currentFlowState?.formKeysData.memory_keys!.map((key, index) => ( {currentFlowState?.memory_keys!.map((key, index) => (
<div className="file-component-accordion-div" key={index}> <div className="file-component-accordion-div" key={index}>
<AccordionComponent <AccordionComponent
trigger={ trigger={
@ -632,7 +631,7 @@ export default function FormModal({
setCurrentFlowState( setCurrentFlowState(
(old: FlowState | undefined) => { (old: FlowState | undefined) => {
let newFlowState = cloneDeep(old!); let newFlowState = cloneDeep(old!);
newFlowState.formKeysData.input_keys![ newFlowState.input_keys![
chatKey chatKey
] = value; ] = value;
return newFlowState; return newFlowState;

10
src/frontend/src/types/tabs/index.ts
View file

@ -59,12 +59,10 @@ export type FlowsState = {
}; };
export type FlowState = { export type FlowState = {
formKeysData: { template?: string;
template?: string; input_keys?: Object;
input_keys?: Object; memory_keys?: Array<string>;
memory_keys?: Array<string>; handle_keys?: Array<string>;
handle_keys?: Array<string>;
};
}; };
export type errorsVarType = { export type errorsVarType = {

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

@ -219,10 +219,9 @@ export function groupByFamily(
export function buildInputs(currentFlowState?: FlowState): string { export function buildInputs(currentFlowState?: FlowState): string {
return currentFlowState && return currentFlowState &&
currentFlowState.formKeysData && currentFlowState.input_keys &&
currentFlowState.formKeysData.input_keys && Object.keys(currentFlowState.input_keys!).length > 0
Object.keys(currentFlowState.formKeysData.input_keys!).length > 0 ? JSON.stringify(currentFlowState.input_keys)
? JSON.stringify(currentFlowState.formKeysData.input_keys)
: '{"input": "message"}'; : '{"input": "message"}';
} }
@ -302,11 +301,10 @@ export function getChatInputField(flow: FlowType, currentFlowState?: FlowState)
if ( if (
currentFlowState && currentFlowState &&
currentFlowState.formKeysData && currentFlowState.input_keys
currentFlowState.formKeysData.input_keys
) { ) {
chat_input_field = Object.keys( chat_input_field = Object.keys(
currentFlowState.formKeysData.input_keys! currentFlowState.input_keys!
)[0]; )[0];
} }
return chat_input_field; return chat_input_field;
@ -454,7 +452,7 @@ chat_input_field: Input key that you want the chat to send the user message with
window_title="${flowName}" window_title="${flowName}"
flow_id="${flowId}" flow_id="${flowId}"
${ ${
currentFlowState && currentFlowState.formKeysData currentFlowState
? `chat_inputs='${inputs}' ? `chat_inputs='${inputs}'
chat_input_field="${chat_input_field}" chat_input_field="${chat_input_field}"
` `