Read, Review, and Verify

CHANGELOG.md

@@ -19,6 +19,9 @@ and this project adheres to
 
 ### Changed
 
+- Enhance AI assistant panel UI
+  [#2497](https://github.com/OpenFn/lightning/issues/2497)
+
 ### Fixed
 
 - Return a 422 when a duplicate key is sent to the collections post/put_all API

assets/css/app.css

@@ -6,6 +6,11 @@
 @import '../../deps/petal_components/assets/default.css';
 /* This file is for your main application CSS */
 
+@keyframes dot {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-4px); }
+}
+
 :root {
   --primary-bg: theme('colors.primary.800');
   --primary-text: theme('colors.white');
@@ -191,10 +196,15 @@
 .fade-in {
   animation: 0.2s ease-out 0s normal forwards 1 fade-in-keys;
 }
+
 .fade-out {
   animation: 0.2s ease-out 0s normal forwards 1 fade-out-keys;
 }
 
+.animate-dot {
+  animation: dot 1s infinite;
+}
+
 div[id^='tippy-'] {
   @apply rounded-md p-2 z-[9999]
          text-xs text-center text-primary-50

assets/js/hooks/index.ts

@@ -18,6 +18,28 @@ export {
   TabbedPanels,
 };
 
+export const SyntaxHighlighter = {
+  mounted() {
+    this.highlight();
+  },
+
+  updated() {
+    const hasCodeBlock = this.el.querySelector('pre code');
+    if (hasCodeBlock) {
+      this.highlight();
+    }
+  },
+
+  highlight() {
+    const codeBlocks = this.el.querySelectorAll('pre code:not(.hljs)');
+    console.log('Found code blocks:', codeBlocks.length);
+
+    codeBlocks.forEach((block) => {
+      hljs.highlightElement(block);
+    });
+  }
+};
+
 export const TabIndent = {
   mounted() {
     this.el.addEventListener('keydown', e => {

lib/lightning/ai_assistant/ai_assistant.ex

@@ -24,12 +24,13 @@ defmodule Lightning.AiAssistant do
     }
   end
 
-  @spec list_sessions_for_job(Job.t()) :: [ChatSession.t(), ...] | []
-  def list_sessions_for_job(job) do
+  @spec list_sessions_for_job(Job.t(), :asc | :desc) ::
+          [ChatSession.t(), ...] | []
+  def list_sessions_for_job(job, sort_direction \\ :desc) do
     Repo.all(
       from s in ChatSession,
         where: s.job_id == ^job.id,
-        order_by: [desc: :updated_at],
+        order_by: [{^sort_direction, :updated_at}],
         preload: [:user]
     )
   end
@@ -46,13 +47,33 @@ defmodule Lightning.AiAssistant do
       id: Ecto.UUID.generate(),
       job_id: job.id,
       user_id: user.id,
-      title: String.slice(content, 0, 40),
+      title: create_title(content),
       messages: []
     }
     |> put_expression_and_adaptor(job.body, job.adaptor)
     |> save_message(%{role: :user, content: content, user: user})
   end
 
+  defp create_title(content) do
+    case String.contains?(content, " ") do
+      true ->
+        content
+        |> String.split(" ")
+        |> Enum.reduce_while("", fn word, acc ->
+          if String.length(acc <> " " <> word) > 40,
+            do: {:halt, acc},
+            else: {:cont, acc <> " " <> word}
+        end)
+        |> String.trim()
+        |> String.replace(~r/[.!?,;:]$/, "")
+
+      false ->
+        content
+        |> String.slice(0, 40)
+        |> String.replace(~r/[.!?,;:]$/, "")
+    end
+  end
+
   @spec save_message(ChatSession.t(), %{any() => any()}) ::
           {:ok, ChatSession.t()} | {:error, Ecto.Changeset.t()}
   def save_message(session, message) do

lib/lightning_web/components/layouts/root.html.heex

@@ -27,6 +27,14 @@
       rel="stylesheet"
       href={Routes.static_path(@conn, "/assets/fonts/fira-code.css")}
     />
+    <link
+      rel="stylesheet"
+      href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css"
+    />
+    <script
+      src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"
+    >
+    </script>
     <link
       phx-track-static
       rel="stylesheet"