ui (#83)

app/views/assistants/show.html.erb

@@ -1,40 +1,37 @@
 <div class="w-full">
   <% content_for :title, @assistant.name %>
   <!-- Breadcrumbs -->
-  <nav class="mb-4">
-    <ul class="flex space-x-2 text-gray-600">
-      <li>
-        <%= link_to "Assistants", assistants_path, class: "text-sky-500 hover:text-sky-800" %>
-      </li>
-      <li>/</li>
-      <li>
-        <%= link_to @assistant.name, assistant_path(@assistant), class: "text-sky-500 hover:text-sky-800" %>
-      </li>
-    </ul>
-  </nav>
+  <%= render partial: 'shared/breadcrumb', locals: { breadcrumbs: [['Home', root_path], ['Assistants', assistants_path], [@assistant.name, assistant_path(@assistant)]] } %>
   <div class="flex justify-between items-center">
     <div>
       <h2 class="text-3xl font-bold flex items-center">
         <%= @assistant.name %>
         <span class="ml-2 inline-flex"> <%= render partial: 'assistant_badge', locals: { assistant: @assistant } %></span>
       </h2>
       <%= render partial: 'shared/meta_info', locals: { email: @assistant.user ? @assistant.user.email : "admin", created_at: @assistant.created_at, updated_at: @assistant.updated_at } %>
-
     </div>
+    <% if policy(@assistant).edit? %>
+      <div class="flex justify-between items-center">
+        <%= render partial: 'shared/button_group', locals: { buttons: { "Edit" => edit_assistant_path(@assistant) } } %>
+        <div>
+          <%= button_to @assistant, method: :delete, data: { confirm: 'Are you sure?' }, class: 'ml-3 text-red-500 hover:text-red-800 flex items-center' do %>
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+              <path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
+            </svg>
+          <% end %>
+        </div>
+      </div>
+    <% end %>
+  </div>
+  <div class="flex justify-start items-center space-x-2">
     <div>
-      <%= link_to new_assistant_chat_path(@assistant), class: "rounded-lg py-3 px-5 bg-sky-800 inline-flex items-center font-medium text-white" do %>
+      <%= link_to new_assistant_chat_path(@assistant), class: "rounded-lg py-3 px-5 bg-sky-500 inline-flex items-center font-medium text-white" do %>
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6 mr-2">
           <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12.76c0 1.6 1.123 2.994 2.707 3.227 1.087.16 2.185.283 3.293.369V21l4.076-4.076a1.526 1.526 0 0 1 1.037-.443 48.282 48.282 0 0 0 5.68-.494c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0 0 12 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018Z" />
         </svg>
         Chat with <%= @assistant.name %>
       <% end %>
     </div>
   </div>
-  <div class="flex justify-start items-center space-x-2">
-    <% if policy(@assistant).edit? %>
-      <%= link_to "Edit", edit_assistant_path(@assistant), class: "mt-2 rounded-lg py-3 px-5 bg-gray-300 font-medium inline-block" %>
-      <%= button_to "Delete", @assistant, method: :delete, class: "mt-2 rounded-lg py-3 px-5 bg-gray-300 font-medium inline-block" %>
-    <% end %>
-  </div>
   <%= render @assistant %>
 </div>

app/views/messages/_message.html.erb

@@ -3,12 +3,13 @@
     <div class="w-3/4">
       <p class="text-xs text-gray-500 mb-1 <%= message.from == 'assistant' ? 'text-right' : '' %>">
         <% if message.from == 'user' %>
-          <%= message.user.email %>
+          <span class="font-semibold"><%= message.user.email %></span>
         <% elsif message.from == 'assistant' %>
-          <%= message.chat.assistant.name %>
+          <span class="font-semibold"><%= message.chat.assistant.name %></span>
         <% else %>
-          <%= message.from %>
+          <span class="font-semibold"><%= message.from %></span>
         <% end %>
+        | <%= message.created_at %>
       </p>
       <% if message.status === 'generating' %>
         <div class="flex justify-end text-2xl text-gray-400">
@@ -18,7 +19,6 @@
         </div>
         <% if !message.user? %>
           <script>
-            console.log("Generating");
             setTimeout(function() {
               const turboFrame = document.getElementById('message-<%=message.id%>');
               turboFrame.src = null;  // Clear the src attribute

app/views/messages/index.html.erb

@@ -24,7 +24,7 @@
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 mr-1">
           <path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09ZM18.259 8.715 18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 0 0-2.456 2.456ZM16.894 20.567 16.5 21.75l-.394-1.183a2.25 2.25 0 0 0-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 0 0 1.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 0 0 1.423 1.423l1.183.394-1.183.394a2.25 2.25 0 0 0-1.423 1.423Z" />
         </svg>
-        <span>Waiting For Assistant...</span>
+        <span>Waiting For <%= @chat.assistant.name %>...</span>
       </div>
     <% end %>
   </div>