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

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

@ -59,12 +59,10 @@ export type FlowsState = {
};
export type FlowState = {
formKeysData: {
template?: string;
input_keys?: Object;
memory_keys?: Array<string>;
handle_keys?: Array<string>;
};
template?: string;
input_keys?: Object;
memory_keys?: Array<string>;
handle_keys?: Array<string>;
};
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 {
return currentFlowState &&
currentFlowState.formKeysData &&
currentFlowState.formKeysData.input_keys &&
Object.keys(currentFlowState.formKeysData.input_keys!).length > 0
? JSON.stringify(currentFlowState.formKeysData.input_keys)
currentFlowState.input_keys &&
Object.keys(currentFlowState.input_keys!).length > 0
? JSON.stringify(currentFlowState.input_keys)
: '{"input": "message"}';
}
@ -302,11 +301,10 @@ export function getChatInputField(flow: FlowType, currentFlowState?: FlowState)
if (
currentFlowState &&
currentFlowState.formKeysData &&
currentFlowState.formKeysData.input_keys
currentFlowState.input_keys
) {
chat_input_field = Object.keys(
currentFlowState.formKeysData.input_keys!
currentFlowState.input_keys!
)[0];
}
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}"
flow_id="${flowId}"
${
currentFlowState && currentFlowState.formKeysData
currentFlowState
? `chat_inputs='${inputs}'
chat_input_field="${chat_input_field}"
`