Enable Tab Key for Indenting Text in AI Assistant Input Box (#2729)

* Tab to indent content

* Update CL

* Format CHANGELOG

---------

Co-authored-by: Stuart Corbishley <corbish@gmail.com>

CHANGELOG.md

@@ -17,6 +17,8 @@ and this project adheres to
 
 ### Added
 
+- Enable Tab Key for Indenting Text in AI Assistant Input Box
+  [#2407](https://github.com/OpenFn/lightning/issues/2407)
 - Ctrl/Cmd + Enter to Send a Message to the AI Assistant
   [#2406](https://github.com/OpenFn/lightning/issues/2406)
 - Add styles to AI chat messages
@@ -32,7 +34,6 @@ and this project adheres to
 - Extend display of audit events to cater for deletions.
   [#2701](https://github.com/OpenFn/lightning/issues/2701)
 
-
 ### Fixed
 
 ## [v2.10.4] - 2024-11-22

assets/js/hooks/index.ts

@@ -18,6 +18,28 @@ export {
   TabbedPanels,
 };
 
+export const TabIndent = {
+  mounted() {
+    this.el.addEventListener('keydown', e => {
+      const indent = '\t';
+
+      if (e.key === 'Tab') {
+        e.preventDefault();
+
+        const start = this.el.selectionStart;
+        const end = this.el.selectionEnd;
+
+        this.el.value =
+          this.el.value.substring(0, start) +
+          indent +
+          this.el.value.substring(end);
+
+        this.el.selectionStart = this.el.selectionEnd = start + indent.length;
+      }
+    });
+  },
+};
+
 export const Combobox = {
   mounted() {
     this.input = this.el.querySelector('input');

lib/lightning_web/live/workflow_live/ai_assistant_component.ex

@@ -217,14 +217,14 @@ defmodule LightningWeb.WorkflowLive.AiAssistantComponent do
         >
           Get started with the AI Assistant
         </.button>
-        <.render_disclaimer />
+        <.disclaimer />
       </div>
-      <.render_ai_footer />
+      <.ai_footer />
     </div>
     """
   end
 
-  defp render_ai_footer(assigns) do
+  defp ai_footer(assigns) do
     ~H"""
     <div class="flex w-100">
       <p class="flex-1 text-xs mt-1 text-left ml-1">
@@ -251,7 +251,7 @@ defmodule LightningWeb.WorkflowLive.AiAssistantComponent do
 
   attr :id, :string, default: "ai-assistant-disclaimer"
 
-  defp render_disclaimer(assigns) do
+  defp disclaimer(assigns) do
     ~H"""
     <div id={@id} class="absolute inset-0 z-50 bg-white hidden">
       <div class="h-full w-full overflow-y-auto">
@@ -393,7 +393,7 @@ defmodule LightningWeb.WorkflowLive.AiAssistantComponent do
         </.form>
       </.async_result>
     </div>
-    <.render_disclaimer />
+    <.disclaimer />
     """
   end
 
@@ -442,6 +442,7 @@ defmodule LightningWeb.WorkflowLive.AiAssistantComponent do
         class="block grow resize-none overflow-y-auto max-h-48 border-0 bg-transparent py-1.5 text-gray-900 placeholder:text-gray-400 placeholder:text-xs placeholder:italic focus:ring-0 text-sm"
         placeholder="Open a previous session or send a message to start a new session"
         disabled={@disabled}
+        phx-hook="TabIndent"
       ><%= Phoenix.HTML.Form.normalize_value("textarea", @form[:content].value) %></textarea>
       <div class="py-2 pl-3 pr-2">
         <div class="flex items-center space-x-5"></div>
@@ -459,7 +460,7 @@ defmodule LightningWeb.WorkflowLive.AiAssistantComponent do
         </div>
       </div>
     </div>
-    <.render_ai_footer />
+    <.ai_footer />
     """
   end