Elixir LiveView Agent Chat Experiment

agent.ex

Mix.install(
  [
    {:phoenix_playground, "~> 0.1.0"},
    {:openai, "~> 0.6.1"},
    {:langchain, "~> 0.2.0"},
  ],
  config: [
    openai: [
      api_key: System.get_env("OPENAI_API_KEY"),
      organization_key: System.get_env("OPENAI_ORGANIZATION_KEY")
    ]
  ]
)

defmodule MyLayout do
  use Phoenix.Component
  def render("live.html", assigns) do
    ~H"""
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.15.0/cdn/themes/light.css" />
    <script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.15.0/cdn/shoelace-autoloader.js"></script>
    <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,container-queries"></script>
    <script type="module" src="https://unpkg.com/deep-chat@1.4.11/dist/deepChat.bundle.js"></script>
    <script>
    document.addEventListener("DOMContentLoaded", (event) => {
      const textarea = document.querySelector('sl-textarea');

      textarea.addEventListener('keydown', event => {
        if (event.key === 'Enter' && !event.shiftKey) {
          // console.log("Enter pressed");
          event.preventDefault();
          let form = document.getElementById('myform');
          console.log(form);
          // form.dispatchEvent(new Event('submit', {bubbles: true, cancelable: true}));
          form.submit();
        }
      });

    });
    </script>
    <%= @inner_content %>
    """
  end
end

defmodule DemoLive do
  use Phoenix.LiveView

  def mount(_params, _session, socket) do
    {:ok, assign(socket, count: 7), layout: {MyLayout, :live}}
  end

  def render(assigns) do
    assigns = assign(assigns, form: %{})

    ~H"""
    <span><%= @count %></span>
    <div class="flex flex-col max-w-4xl px-2 py-4">
        <div class="text-right my-2">
            <sl-button variant="primary">New Chat
        </sl-button></div>

        <sl-tab-group class="w-full" placement="start">
          <sl-tab slot="nav" panel="thread-id-1">Custom chat UI</sl-tab>
          <sl-tab slot="nav" panel="thread-id-2">Deepchat for conversation</sl-tab>

          <sl-tab-panel name="thread-id-1">
              <div class="mx-4 my-3 flex flex-col items-end gap-2">
                <div class="max-w-96 bg-[#f4f4f4] px-5 py-2.5 rounded-3xl">
                In duckdb, after importing a CSV, I have a column with newline in the column name. How do I use this column in a SELECT query?
                </div>

                <div class="markdown prose bg-[#f1f1ff] break-words light border-y border-black p-2">
                  <h3>Garlic bread with cheese: What the science tells us</h3>
                  <p>
                    For years parents have espoused the health benefits of eating garlic bread with cheese to their
                    children, with the food earning such an iconic status in our culture that kids will often dress
                    up as warm, cheesy loaf for Halloween.
                  </p>
                  <p>
                    But a recent study shows that the celebrated appetizer may be linked to a series of rabies cases
                    springing up around the country.
                  </p>
                </div>

                <form id="myform" class="w-full" phx-submit="add_message">
                  <sl-textarea id="textinput"
                    name="message"
                    rows="1"
                    resize="auto"
                    placeholder="Send a message"
                    class="w-full"
                  ></sl-textarea>
                </form>
              </div>
          </sl-tab-panel>

          <sl-tab-panel name="thread-id-2">
            <deep-chat demo="true" style="display: block; width: 100%;"></deep-chat>
          </sl-tab-panel>

        </sl-tab-group>
    </div>
    """
  end

  def handle_event("add_message", %{"message" => message}, socket) do
    IO.puts("Received add_message event: #{message}")
    {:noreply, assign(socket, count: socket.assigns.count + 1)}
  end
end

PhoenixPlayground.start(live: DemoLive)