add text modal view for table render

src/backend/base/langflow/components/models/AnthropicModel.py

@@ -1,4 +1,3 @@
-from typing import Optional
 
 from langchain_anthropic.chat_models import ChatAnthropic
 from pydantic.v1 import SecretStr

src/backend/base/langflow/components/models/ChatLiteLLMModel.py

@@ -1,4 +1,4 @@
-from typing import Any, Dict, Optional
+from typing import Optional
 
 from langchain_community.chat_models.litellm import ChatLiteLLM, ChatLiteLLMException
 from langflow.base.constants import STREAM_INFO_TEXT
@@ -177,4 +177,4 @@ class ChatLiteLLMModelComponent(LCModelComponent):
         )
 
         return output
-    
+    

src/backend/base/langflow/components/models/GroqModel.py

@@ -1,4 +1,3 @@
-from typing import Optional
 
 from langchain_groq import ChatGroq
 from langflow.base.models.groq_constants import MODEL_NAMES
@@ -103,4 +102,4 @@ class GroqModel(LCModelComponent):
             streaming=stream,
         )
 
-        return output
+        return output

src/backend/base/langflow/components/models/HuggingFaceModel.py

@@ -1,4 +1,3 @@
-from typing import Optional
 
 from langchain_community.chat_models.huggingface import ChatHuggingFace
 from langchain_community.llms.huggingface_endpoint import HuggingFaceEndpoint
@@ -65,4 +64,4 @@ class HuggingFaceEndpointsComponent(LCModelComponent):
             raise ValueError("Could not connect to HuggingFace Endpoints API.") from e
 
         output = ChatHuggingFace(llm=llm)
-        return output
+        return output

src/backend/base/langflow/components/models/OllamaModel.py

@@ -1,4 +1,3 @@
-from typing import Any, Dict, List, Optional
 
 from langchain_community.chat_models import ChatOllama
 from langflow.base.constants import STREAM_INFO_TEXT
@@ -226,4 +225,4 @@ class ChatOllamaComponent(LCModelComponent):
         except Exception as e:
             raise ValueError("Could not initialize Ollama LLM.") from e
 
-        return output
+        return output

src/backend/base/langflow/custom/custom_component/custom_component.py

@@ -21,7 +21,6 @@ from langflow.type_extraction.type_extraction import (
     extract_union_types_from_generic_alias,
 )
 from langflow.utils import validate
-from pydantic import BaseModel
 
 if TYPE_CHECKING:
     from langflow.graph.graph.base import Graph

src/backend/base/langflow/graph/vertex/base.py

@@ -13,7 +13,7 @@ from langflow.graph.utils import UnbuiltObject, UnbuiltResult
 from langflow.interface.initialize import loading
 from langflow.interface.listing import lazy_load_dict
 from langflow.schema.artifact import ArtifactType
-from langflow.schema.schema import INPUT_FIELD_NAME, Log, build_logs
+from langflow.schema.schema import INPUT_FIELD_NAME, Log
 from langflow.services.deps import get_storage_service
 from langflow.services.monitor.utils import log_transaction
 from langflow.utils.constants import DIRECT_TYPES

src/backend/base/langflow/schema/schema.py

@@ -1,4 +1,4 @@
-from typing import Any, Literal
+from typing import Literal
 
 from typing_extensions import TypedDict
 

src/frontend/src/components/stringReaderComponent/index.tsx

@@ -1,7 +1,14 @@
+import TextModal from "../../modals/textModal";
+
 export default function StringReader({
   string,
 }: {
   string: string;
 }): JSX.Element {
-  return <span className="truncate">{string}</span>;
+  return (
+    string.length > 10 ?
+      <TextModal value={string}>
+        <span className="truncate">{string}</span>
+      </TextModal> : <span className="truncate">{string}</span>
+  );
 }

src/frontend/src/constants/constants.ts

@@ -141,6 +141,7 @@ export const CODE_PROMPT_DIALOG_SUBTITLE =
 
 export const CODE_DICT_DIALOG_SUBTITLE =
   "Edit your dictionary. This dialog allows you to create your own customized dictionary. You can add as many key-value pairs as you want. While in edit mode, you can enter ({}) or ([]), and this will result in adding a new object or array.";
+
 /**
  * The base text for subtitle of Prompt Dialog
  * @constant

src/frontend/src/modals/textModal/index.tsx

@@ -0,0 +1,61 @@
+import "ace-builds/src-noconflict/ace";
+import "ace-builds/src-noconflict/ext-language_tools";
+import "ace-builds/src-noconflict/mode-python";
+import "ace-builds/src-noconflict/theme-github";
+import "ace-builds/src-noconflict/theme-twilight";
+// import "ace-builds/webpack-resolver";
+import { cloneDeep } from "lodash";
+import { useEffect, useState } from "react";
+import JsonView from "react18-json-view";
+import "react18-json-view/src/dark.css";
+import "react18-json-view/src/style.css";
+import IconComponent from "../../components/genericIconComponent";
+import { CODE_DICT_DIALOG_SUBTITLE, TEXT_DIALOG_SUBTITLE } from "../../constants/constants";
+import { useDarkStore } from "../../stores/darkStore";
+import BaseModal from "../baseModal";
+import TextOutputView from "../../shared/components/textOutputView";
+import { Button } from "../../components/ui/button";
+
+export default function TextModal({
+  children,
+  value,
+}: {
+  children: JSX.Element;
+  value: Object;
+}): JSX.Element {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <BaseModal
+      size="medium-h-full"
+      open={open}
+      setOpen={setOpen}
+    >
+      <BaseModal.Trigger className="h-full">{children}</BaseModal.Trigger>
+      <BaseModal.Header
+        description={"Inspect the text below."}
+      >
+        <span className="pr-2">
+          {"View Text"}
+        </span>
+        <IconComponent
+          name="Type"
+          className="h-6 w-6 pl-1 text-primary"
+          aria-hidden="true"
+        />
+      </BaseModal.Header>
+      <BaseModal.Content>
+        <div className="flex h-full w-full flex-col transition-all">
+            <TextOutputView value={value} left={false} />
+        </div>
+      </BaseModal.Content>
+      <BaseModal.Footer>
+        <div className="flex w-full justify-end pt-2">
+          <Button className="flex gap-2 px-3" onClick={() => setOpen(false)}>
+            Close
+          </Button>
+        </div>
+      </BaseModal.Footer>
+    </BaseModal>
+  );
+}