adding duckduckgo component in empty new project crashes the application...

[aditya-altometa]

javascript on browser console is showing following error, when duckduckgo component is added to the new project.

index-ef80b085.js:983 TypeError: Cannot read properties of undefined (reading 'template') at GenericNode.reactExports.useEffect.Gr (index-ef80b085.js:3655:11861) at Qj (index-ef80b085.js:983:26401) at Hk (index-ef80b085.js:983:46167) at Wk (index-ef80b085.js:983:44863) at Pk (index-ef80b085.js:983:43823) at Ek (index-ef80b085.js:983:40115) at jg (index-ef80b085.js:981:3468) at index-ef80b085.js:983:37247 overrideMethod @ console.js:273 Li @ index-ef80b085.js:983 Qi.ot.componentDidCatch.tt.callback @ index-ef80b085.js:983 sh @ index-ef80b085.js:981 kk @ index-ef80b085.js:983 ik @ index-ef80b085.js:983 hk @ index-ef80b085.js:983 Wk @ index-ef80b085.js:983 Pk @ index-ef80b085.js:983 Ek @ index-ef80b085.js:983 jg @ index-ef80b085.js:981 (anonymous) @ index-ef80b085.js:983 Show 1 more frame Show less

[dosubot[bot]]

Hello, @aditya-altometa! I'm here to assist you with any bugs, questions, or contribution guidance while you wait for a human maintainer. Let's tackle this together!

To resolve the issue where adding the DuckDuckGo component to a new, empty project crashes the application with a TypeError: Cannot read properties of undefined (reading 'template') in the browser console, you need to ensure that the templates object is properly initialized and passed down to the component.

Here is a possible solution:

1. Ensure that the templates object is properly initialized in your context provider.
2. Make sure that the TemplateContextType is correctly implemented and used in your component.

Here is an example of how you can initialize and provide the templates object:

import React, { createContext, useState, useContext } from 'react';

// Define the template object
const template: { [char: string]: string } = {};

// Define the context type
export type TemplateContextType = {
  templates: typeof template;
  setTemplates: (newState: {}) => void;
};

// Create the context
const TemplateContext = createContext<TemplateContextType | undefined>(undefined);

// Create a provider component
export const TemplateProvider: React.FC = ({ children }) => {
  const [templates, setTemplates] = useState<typeof template>(template);

  return (
    <TemplateContext.Provider value={{ templates, setTemplates }}>
      {children}
    </TemplateContext.Provider>
  );
};

// Custom hook to use the TemplateContext
export const useTemplateContext = () => {
  const context = useContext(TemplateContext);
  if (!context) {
    throw new Error('useTemplateContext must be used within a TemplateProvider');
  }
  return context;
};

Then, wrap your application with the TemplateProvider:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { TemplateProvider } from './path/to/TemplateProvider';

ReactDOM.render(
  <TemplateProvider>
    <App />
  </TemplateProvider>,
  document.getElementById('root')
);

Finally, use the useTemplateContext hook in your component to access the templates object:

import React from 'react';
import { useTemplateContext } from './path/to/TemplateProvider';

const DuckDuckGoComponent: React.FC = () => {
  const { templates } = useTemplateContext();

  // Your component logic here

  return (
    <div>
      {/* Render your component */}
    </div>
  );
};

export default DuckDuckGoComponent;

By ensuring that the templates object is properly initialized and provided, you should be able to resolve the TypeError: Cannot read properties of undefined (reading 'template') issue ^[1].

To continue talking to Dosu, mention @dosu.

[aditya-altometa]

@dosu, thank you for your quick response. I was trying to just use the UI to build a simple usecase. I am not sure where below code need to be added? can you help with that?

Regards, Aditya

---

From: dosubot[bot] @.> Sent: Saturday, June 1, 2024 3:24 PM To: langflow-ai/langflow @.> Cc: Aditya Kulkarni @.>; Mention @.> Subject: Re: [langflow-ai/langflow] adding duckduckgo component in empty new project crashes the application... (Issue #2042)

Hello, @aditya-altometahttps://github.com/aditya-altometa! I'm here to assist you with any bugs, questions, or contribution guidance while you wait for a human maintainer. Let's tackle this together!

To resolve the issue where adding the DuckDuckGo component to a new, empty project crashes the application with a TypeError: Cannot read properties of undefined (reading 'template') in the browser console, you need to ensure that the templates object is properly initialized and passed down to the component.

Here is a possible solution:

1. Ensure that the templates object is properly initialized in your context provider.
2. Make sure that the TemplateContextType is correctly implemented and used in your component.

Here is an example of how you can initialize and provide the templates object:

import React, { createContext, useState, useContext } from 'react';

// Define the template object const template: { [char: string]: string } = {};

// Define the context type export type TemplateContextType = { templates: typeof template; setTemplates: (newState: {}) => void; };

// Create the context const TemplateContext = createContext<TemplateContextType | undefined>(undefined);

// Create a provider component export const TemplateProvider: React.FC = ({ children }) => { const [templates, setTemplates] = useState(template);

return ( <TemplateContext.Provider value={{ templates, setTemplates }}> {children} </TemplateContext.Provider> ); };

// Custom hook to use the TemplateContext export const useTemplateContext = () => { const context = useContext(TemplateContext); if (!context) { throw new Error('useTemplateContext must be used within a TemplateProvider'); } return context; };

Then, wrap your application with the TemplateProvider:

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import { TemplateProvider } from './path/to/TemplateProvider';

ReactDOM.render(

, document.getElementById('root') ); Finally, use the useTemplateContext hook in your component to access the templates object: import React from 'react'; import { useTemplateContext } from './path/to/TemplateProvider'; const DuckDuckGoComponent: React.FC = () => { const { templates } = useTemplateContext(); // Your component logic here return (

{/* Render your component */}

); }; export default DuckDuckGoComponent; By ensuring that the templates object is properly initialized and provided, you should be able to resolve the TypeError: Cannot read properties of undefined (reading 'template') issue [1]. To continue talking to Dosu, mention @dosu. — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: ***@***.***>

[dosubot[bot]]

The code provided should be added to the file located at src/frontend/src/utils/utils.ts in your project. This file contains various utility functions, including those for generating Python code, widget code, and other helper functions.

Here is the relevant section of the file where the code should be added:

/**
 * Function to get the python code for the API
 * @param {string} flow - The current flow
 * @param {any[]} tweak - The tweaks
 * @returns {string} - The python code
 */
export function getPythonCode(flow: FlowType, tweak?: any[]): string {
  const flowName = flow.name;
  const tweaks = buildTweaks(flow);

  return `from langflow.load import run_flow_from_json
TWEAKS = ${
    tweak && tweak.length > 0
      ? buildTweakObject(tweak)
      : JSON.stringify(tweaks, null, 2)
  }

result = run_flow_from_json(flow="${flowName}.json",
                            input_value="message",
                            tweaks=TWEAKS)`;
}

/**
 * Function to get the widget code for the API
 * @param {string} flow - The current flow.
 * @returns {string} - The widget code
 */
export function getWidgetCode(
  flow: FlowType,
  isAuth: boolean,
  flowState?: FlowState
): string {
  const flowId = flow.id;
  const flowName = flow.name;
  const inputs = buildInputs();
  let chat_input_field = getChatInputField(flowState);

  return `<script src="https://cdn.jsdelivr.net/gh/langflow-ai/langflow-embedded-chat@1.0_alpha/dist/build/static/js/bundle.min.js"></script>

<langflow-chat
  window_title="${flowName}"
  flow_id="${flowId}"
  host_url="http://localhost:7860"${
    !isAuth
      ? `
  api_key="..."`
      : ""
  }

></langflow-chat>`;
}

export function truncateLongId(id: string): string {
  let [componentName, newId] = id.split("-");
  if (componentName.length > 15) {
    componentName = componentName.slice(0, 15);
    componentName += "...";
    return componentName + "-" + newId;
  }
  return id;
}

export function extractIdFromLongId(id: string): string {
  let [_, newId] = id.split("-");
  return newId;
}

export function truncateDisplayName(name: string): string {
  if (name.length > 15) {
    name = name.slice(0, 15);
    name += "...";
  }
  return name;
}

Make sure to place the code in the appropriate section of the file to maintain the organization and readability of your utility functions ^[1].

To continue talking to Dosu, mention @dosu.