client side and server side tool calling

lib/elixir_ai/chat_runner.ex

@@ -43,6 +43,13 @@ defmodule ElixirAi.ChatRunner do
         description: "read a key value pair that was previously stored with store_thing",
         function: &ElixirAi.ToolTesting.get_thing/1,
         parameters: ElixirAi.ToolTesting.get_thing_params()
+      ),
+      ai_tool(
+        name: "set_background_color",
+        description:
+          "set the background color of the chat interface, accepts specified tailwind colors",
+        function: &ElixirAi.ToolTesting.set_background_color/1,
+        parameters: ElixirAi.ToolTesting.set_background_color_params()
       )
     ]
   end

lib/elixir_ai/tool_testing.ex

@@ -28,21 +28,41 @@ defmodule ElixirAi.ToolTesting do
     }
   end
 
-  def store_thing_definition(name) do
+  def store_thing_params do
     %{
-      "type" => "function",
-      "function" => %{
-        "name" => name,
-        "description" => "store key value pair",
-        "parameters" => %{
-          "type" => "object",
-          "properties" => %{
-            "name" => %{"type" => "string"},
-            "value" => %{"type" => "string"}
-          },
-          "required" => ["name", "value"]
+      "type" => "object",
+      "properties" => %{
+        "name" => %{"type" => "string"},
+        "value" => %{"type" => "string"}
+      },
+      "required" => ["name", "value"]
+    }
+  end
+
+  def set_background_color(%{"color" => color}) do
+    Phoenix.PubSub.broadcast(ElixirAi.PubSub, "ai_chat", {:set_background_color, color})
+  end
+
+  def set_background_color_params do
+    valid_tailwind_colors = [
+      "bg-cyan-950/30",
+      "bg-red-950/30",
+      "bg-green-950/30",
+      "bg-blue-950/30",
+      "bg-yellow-950/30",
+      "bg-purple-950/30",
+      "bg-pink-950/30"
+    ]
+
+    %{
+      "type" => "object",
+      "properties" => %{
+        "color" => %{
+          "type" => "string",
+          "enum" => valid_tailwind_colors
         }
-      }
+      },
+      "required" => ["color"]
     }
   end
 

lib/elixir_ai_web/live/chat_live.ex

@@ -15,7 +15,8 @@ defmodule ElixirAiWeb.ChatLive do
      socket
      |> assign(user_input: "")
      |> assign(messages: conversation.messages)
-     |> assign(streaming_response: nil)}
+     |> assign(streaming_response: nil)
+     |> assign(background_color: "bg-cyan-950/30")}
   end
 
   def render(assigns) do
@@ -24,7 +25,11 @@ defmodule ElixirAiWeb.ChatLive do
       <div class="px-4 py-3 font-semibold ">
         Live Chat
       </div>
-      <div id="chat-messages" phx-hook="ScrollBottom" class="flex-1 overflow-y-auto p-4 bg-cyan-950/30 rounded-lg">
+      <div
+        id="chat-messages"
+        phx-hook="ScrollBottom"
+        class={"flex-1 overflow-y-auto p-4 rounded-lg #{@background_color}"}
+      >
         <%= if @messages == [] do %>
           <p class="text-sm text-center mt-4">No messages yet.</p>
         <% end %>
@@ -108,6 +113,7 @@ defmodule ElixirAiWeb.ChatLive do
 
   def handle_info({:tool_calls_finished, tool_messages}, socket) do
     Logger.info("Received tool_calls_finished with #{inspect(tool_messages)}")
+
     {:noreply,
      socket
      |> update(:messages, &(&1 ++ tool_messages))
@@ -132,4 +138,8 @@ defmodule ElixirAiWeb.ChatLive do
      |> update(:messages, &(&1 ++ [final_response]))
      |> assign(streaming_response: nil)}
   end
+
+  def handle_info({:set_background_color, color}, socket) do
+    {:noreply, assign(socket, background_color: color)}
+  end
 end