Feat: Implement Customizable Shortcuts

This pull request improve user experience by enabling customization of
keyboard shortcuts.

docs/docs/components/agents.mdx

@@ -1,11 +1,13 @@
-import Admonition from '@theme/Admonition';
+import Admonition from "@theme/Admonition";
 
 # Agents
 
 <Admonition type="caution" icon="🚧" title="ZONE UNDER CONSTRUCTION">
-    <p>
-        We appreciate your understanding as we polish our documentation – it may contain some rough edges. Share your feedback or report issues to help us improve! 🛠️📝
-    </p>
+  <p>
+    We appreciate your understanding as we polish our documentation – it may
+    contain some rough edges. Share your feedback or report issues to help us
+    improve! 🛠️📝
+  </p>
 </Admonition>
 
 Agents are components that use reasoning to make decisions and take actions, designed to autonomously perform tasks or provide services with some degree of agency. LLM chains can only perform hardcoded sequences of actions, while agents use LLMs to reason through which actions to take, and in which order.
@@ -87,4 +89,4 @@ The `ZeroShotAgent` uses the ReAct framework to decide which tool to use based o
 **Parameters**:
 
 - **Allowed Tools:** The tools accessible to the agent.
-- **LLM Chain:** The LLM Chain used by the agent.
+- **LLM Chain:** The LLM Chain used by the agent.

docs/docs/components/chains.mdx

@@ -6,11 +6,11 @@ import Admonition from "@theme/Admonition";
 # Chains
 
 <Admonition type="caution" icon="🚧" title="ZONE UNDER CONSTRUCTION">
-<p>
-  Thank you for your patience while we enhance our documentation. It may
-  have some imperfections. Share your feedback or report issues to help us
-  improve! 🛠️📝
-</p>
+  <p>
+    Thank you for your patience while we enhance our documentation. It may have
+    some imperfections. Share your feedback or report issues to help us improve!
+    🛠️📝
+  </p>
 </Admonition>
 
 Chains, in the context of language models, refer to a series of calls made to a language model. This approach allows for using the output of one call as the input for another. Different chain types facilitate varying complexity levels, making them useful for creating pipelines and executing specific scenarios.

docs/docs/components/data.mdx

@@ -1,4 +1,4 @@
-import Admonition from '@theme/Admonition';
+import Admonition from "@theme/Admonition";
 
 # Data
 

docs/docs/components/experimental.mdx

@@ -1,4 +1,4 @@
-import Admonition from '@theme/Admonition';
+import Admonition from "@theme/Admonition";
 
 # Experimental
 
@@ -29,10 +29,12 @@ This component extracts specified keys from a record.
 **Parameters**
 
 - **Record:**
+
   - **Display Name:** Record
   - **Info:** The record from which to extract keys.
 
 - **Keys:**
+
   - **Display Name:** Keys
   - **Info:** The keys to be extracted.
 
@@ -54,17 +56,20 @@ This component turns a function running a flow into a Tool.
 **Parameters**
 
 - **Flow Name:**
+
   - **Display Name:** Flow Name
   - **Info:** Select the flow to run.
   - **Options:** List of available flows.
   - **Real-time Refresh:** True
   - **Refresh Button:** True
 
 - **Name:**
+
   - **Display Name:** Name
   - **Description:** The tool's name.
 
 - **Description:**
+
   - **Display Name:** Description
   - **Description:** Describes the tool.
 
@@ -127,10 +132,12 @@ This component generates a notification.
 **Parameters**
 
 - **Name:**
+
   - **Display Name:** Name
   - **Info:** The notification's name.
 
 - **Record:**
+
   - **Display Name:** Record
   - **Info:** Optionally, a record to store in the notification.
 
@@ -151,10 +158,12 @@ This component runs a specified flow.
 **Parameters**
 
 - **Input Value:**
+
   - **Display Name:** Input Value
   - **Multiline:** True
 
 - **Flow Name:**
+
   - **Display Name:** Flow Name
   - **Info:** Select the flow to run.
   - **Options:** List of available flows.
@@ -177,14 +186,17 @@ This component executes a specified runnable.
 **Parameters**
 
 - **Input Key:**
+
   - **Display Name:** Input Key
   - **Info:** The input key.
 
 - **Inputs:**
+
   - **Display Name:** Inputs
   - **Info:** Inputs for the runnable.
 
 - **Runnable:**
+
   - **Display Name:** Runnable
   - **Info:** The runnable to execute.
 
@@ -205,14 +217,17 @@ This component executes an SQL query.
 **Parameters**
 
 - **Database URL:**
+
   - **Display Name:** Database URL
   - **Info:** The database's URL.
 
 - **Include Columns:**
+
   - **Display Name:** Include Columns
   - **Info:** Whether to include columns in the result.
 
 - **Passthrough:**
+
   - **Display Name:** Passthrough
   - **Info:** Returns the query instead of raising an exception if an error occurs.
 
@@ -233,10 +248,12 @@ This component dynamically generates a tool from a flow.
 **Parameters**
 
 - **Input Value:**
+
   - **Display Name:** Input Value
   - **Multiline:** True
 
 - **Flow Name:**
+
   - **Display Name:** Flow Name
   - **Info:** Select the flow to run.
   - **Options:** List of available flows.

docs/docs/components/helpers.mdx

@@ -1,4 +1,4 @@
-import Admonition from '@theme/Admonition';
+import Admonition from "@theme/Admonition";
 
 # Helpers
 
@@ -49,9 +49,10 @@ Use this component as a template to create your custom component.
 - **Parameter:** Describe the purpose of this parameter.
 
 <Admonition type="info" title="Info">
-    <p>
-        Customize the <code>build_config</code> and <code>build</code> methods according to your requirements.
-    </p>
+  <p>
+    Customize the <code>build_config</code> and <code>build</code> methods
+    according to your requirements.
+  </p>
 </Admonition>
 
 Learn more about creating custom components at [Custom Component](http://docs.langflow.org/components/custom).

docs/docs/components/memories.mdx

@@ -1,11 +1,13 @@
-import Admonition from '@theme/Admonition';
+import Admonition from "@theme/Admonition";
 
 # Memories
 
 <Admonition type="caution" icon="🚧" title="ZONE UNDER CONSTRUCTION">
-    <p>
-        Thanks for your patience as we improve our documentation—it might have some rough edges. Share your feedback or report issues to help us enhance it! 🛠️📝
-    </p>
+  <p>
+    Thanks for your patience as we improve our documentation—it might have some
+    rough edges. Share your feedback or report issues to help us enhance it!
+    🛠️📝
+  </p>
 </Admonition>
 
 Memory is a concept in chat-based applications that allows the system to remember previous interactions. This capability helps maintain the context of the conversation and enables the system to understand new messages in light of past messages.
@@ -24,9 +26,13 @@ This component retrieves stored messages using various filters such as sender ty
 - **number_of_messages**: Specifies the number of messages to retrieve. Defaults to `5`. Determines the number of recent messages from the chat history to fetch.
 
 <Admonition type="note" title="Note">
-    <p>
-        The component retrieves messages based on the provided criteria, including the specific file path for stored messages. If no specific criteria are provided, it returns the most recent messages up to the specified limit. This component can be used to review past interactions and analyze conversation flows.
-    </p>
+  <p>
+    The component retrieves messages based on the provided criteria, including
+    the specific file path for stored messages. If no specific criteria are
+    provided, it returns the most recent messages up to the specified limit.
+    This component can be used to review past interactions and analyze
+    conversation flows.
+  </p>
 </Admonition>
 
 ### ConversationBufferMemory
@@ -84,7 +90,8 @@ The `ConversationKGMemory` utilizes a knowledge graph to enhance memory capabili
 - **memory_key**: Specifies the prompt variable name where the memory stores and retrieves chat messages. Defaults to `chat_history`.
 - **output_key**: Identifies the key under which the generated response
 
- is stored, enabling retrieval using this key.
+is stored, enabling retrieval using this key.
+
 - **return_messages**: Controls whether the history is returned as a string or as a list of messages. Defaults to `False`.
 
 ---
@@ -124,4 +131,4 @@ The `VectorRetrieverMemory` retrieves vectors based on queries, facilitating vec
 - **Retriever**: The tool used to fetch documents.
 - **input_key**: Identifies where input messages are stored in the memory object, facilitating their retrieval and manipulation.
 - **memory_key**: Specifies the prompt variable name where the memory stores and retrieves chat messages. Defaults to `chat_history`.
-- **return_messages**: Controls whether the history is returned as a string or as a list of messages. Defaults to `False`.
+- **return_messages**: Controls whether the history is returned as a string or as a list of messages. Defaults to `False`.

docs/docs/components/model_specs.mdx

@@ -1,11 +1,13 @@
-import Admonition from '@theme/Admonition';
+import Admonition from "@theme/Admonition";
 
 # Large Language Models (LLMs)
 
 <Admonition type="caution" icon="🚧" title="ZONE UNDER CONSTRUCTION">
-    <p>
-        Thank you for your patience as we refine our documentation. You might encounter some inconsistencies. Please help us improve by sharing your feedback or reporting any issues! 🛠️📝
-    </p>
+  <p>
+    Thank you for your patience as we refine our documentation. You might
+    encounter some inconsistencies. Please help us improve by sharing your
+    feedback or reporting any issues! 🛠️📝
+  </p>
 </Admonition>
 
 A Large Language Model (LLM) is a foundational component of Langflow. It provides a uniform interface for interacting with LLMs from various providers, including OpenAI, Cohere, and HuggingFace. Langflow extensively uses LLMs across its chains and agents, employing them to generate text based on specific prompts or inputs.
@@ -37,7 +39,9 @@ This is a wrapper for Anthropic's large language model designed for chat-based i
 `CTransformers` provides access to Transformer models implemented in C/C++ using the [GGML](https://github.com/ggerganov/ggml) library.
 
 <Admonition type="info">
-Ensure the `ctransformers` Python package is installed. Discover more about installation, supported models, and usage [here](https://github.com/marella/ctransformers).
+  Ensure the `ctransformers` Python package is installed. Discover more about
+  installation, supported models, and usage
+  [here](https://github.com/marella/ctransformers).
 </Admonition>
 
 - **config:** This configuration is for the Transformer models. Check the default settings and possible configurations at [config](https://github.com/marella/ctransformers#config).
@@ -128,7 +132,8 @@ This component integrates with [Google Vertex AI](https://cloud.google.com/verte
 
 - **credentials**: Custom
 
- credentials used for API interactions.
+credentials used for API interactions.
+
 - **location**: The default location for API calls, defaulting to `us-central1`.
 - **max_output_tokens**: Limits the output tokens per prompt, defaulting to `128`.
 - **model_name**: The name of the Vertex AI model in use, defaulting to `text-bison`.
@@ -140,4 +145,4 @@ This component integrates with [Google Vertex AI](https://cloud.google.com/verte
 - **tuned_model_name**: Specifies a tuned model name, which overrides the default model name if provided.
 - **verbose**: Controls the output verbosity to assist in debugging and understanding the operational details, defaulting to `False`.
 
----
+---

docs/docs/components/retrievers.mdx

@@ -1,11 +1,13 @@
-import Admonition from '@theme/Admonition';
+import Admonition from "@theme/Admonition";
 
 # Retrievers
 
 <Admonition type="caution" icon="🚧" title="ZONE UNDER CONSTRUCTION">
-    <p>
-        We appreciate your patience as we enhance our documentation. It may have some imperfections. Please share your feedback or report issues to help us improve. 🛠️📝
-    </p>
+  <p>
+    We appreciate your patience as we enhance our documentation. It may have
+    some imperfections. Please share your feedback or report issues to help us
+    improve. 🛠️📝
+  </p>
 </Admonition>
 
 A retriever is an interface that returns documents in response to an unstructured query. It's broader than a vector store because it doesn't need to store documents; it only needs to retrieve them.

docs/docs/components/tools.mdx

@@ -1,11 +1,13 @@
-import Admonition from '@theme/Admonition';
+import Admonition from "@theme/Admonition";
 
 # Tools
 
 <Admonition type="caution" icon="🚧" title="ZONE UNDER CONSTRUCTION">
-    <p>
-        Thanks for your patience as we refine our documentation. It might have some rough edges currently. Please share your feedback or report issues to help us enhance it! 🛠️📝
-    </p>
+  <p>
+    Thanks for your patience as we refine our documentation. It might have some
+    rough edges currently. Please share your feedback or report issues to help
+    us enhance it! 🛠️📝
+  </p>
 </Admonition>
 
 ### SearchApi

docs/docs/components/utilities.mdx

@@ -3,9 +3,9 @@ import Admonition from "@theme/Admonition";
 # Utilities
 
 <Admonition type="caution" icon="🚧" title="Zone Under Construction">
-  We appreciate your understanding as we polish our documentation—it may
-  contain some rough edges. Share your feedback or report issues to help us
-  improve! 🛠️📝
+  We appreciate your understanding as we polish our documentation—it may contain
+  some rough edges. Share your feedback or report issues to help us improve!
+  🛠️📝
 </Admonition>
 
 Utilities are a set of actions that can be used to perform common tasks in a flow. They are available in the **Utilities** section in the sidebar.
@@ -86,7 +86,11 @@ Generates a unique identifier (UUID) for each instance it is invoked, providing
 - Returns a unique identifier (UUID) as a string. This UUID is generated using Python's `uuid` module, ensuring that each identifier is unique and can be used as a reliable reference in your application.
 
 <Admonition type="note" title="Note">
-    The Unique ID Generator is crucial for scenarios requiring distinct identifiers, such as session management, transaction tracking, or any context where different instances or entities must be uniquely identified. The generated UUID is provided as a hexadecimal string, offering a high level of uniqueness and security for identification purposes.
+  The Unique ID Generator is crucial for scenarios requiring distinct
+  identifiers, such as session management, transaction tracking, or any context
+  where different instances or entities must be uniquely identified. The
+  generated UUID is provided as a hexadecimal string, offering a high level of
+  uniqueness and security for identification purposes.
 </Admonition>
 
 For additional information and examples, please consult the [Langflow Components Custom Documentation](http://docs.langflow.org/components/custom).

src/frontend/package.json

@@ -6,6 +6,7 @@
     "@headlessui/react": "^1.7.17",
     "@hookform/resolvers": "^3.3.4",
     "@million/lint": "^0.0.73",
+    "react-hotkeys-hook": "^4.5.0",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.4",