Merge pull request #60 from salesforce/release-assistants

CSS for releasing Assistants
salesforce · Sep 4, 2024 · c4b2395 · c4b2395
2 parents 5503655 + a8a7e8b
commit c4b2395
Show file tree

Hide file tree

Showing 10 changed files with 91 additions and 75 deletions.
diff --git a/app/controllers/assistants_controller.rb b/app/controllers/assistants_controller.rb
@@ -3,7 +3,7 @@ class AssistantsController < ApplicationController
 
   # GET /assistants or /assistants.json
   def index
-    @assistants = Assistant.all
+    @assistants = Assistant.all.order(status: :desc)
   end
 
   # GET /assistants/1 or /assistants/1.json

diff --git a/app/views/assistants/_assistant.html.erb b/app/views/assistants/_assistant.html.erb
@@ -1,36 +1,36 @@
 <div id="<%= dom_id assistant %>" class="w-full">
-  <!-- Assistant Name Heading -->
-  <!-- User Prompt -->
-  <div class="my-5">
-    <strong class="block text-lg font-semibold text-gray-800 mb-2">Description</strong>
-    <textarea class="w-full p-3 border border-gray-300 rounded-lg bg-gray-100 text-gray-700" rows="10" disabled><%= assistant.description %></textarea>
-  </div>
-  <div class="my-5">
-    <strong class="block text-lg font-semibold text-gray-800 mb-2">Quip URL</strong>
-    <p class="text-gray-700"><%= assistant.quip_url %></p>
-  </div>
-  <div class="my-5">
-    <strong class="block text-lg font-semibold text-gray-800 mb-2">Confluence Spaces</strong>
-    <p class="text-gray-700"><%= assistant.confluence_spaces %></p>
-  </div>
-  <div class="my-5">
-    <strong class="block text-lg font-semibold text-gray-800 mb-2">Libraries</strong>
-    <p class="text-gray-700"><%= assistant.libraries %></p>
-  </div>
-  <div class="my-5">
-    <strong class="block text-lg font-semibold text-gray-800 mb-2">Input</strong>
-    <textarea class="w-full p-3 border border-gray-300 rounded-lg bg-gray-100 text-gray-700" rows="10" disabled><%= assistant.input %></textarea>
-  </div>
-  <div class="my-5">
-    <strong class="block text-lg font-semibold text-gray-800 mb-2">Output</strong>
-    <textarea class="w-full p-3 border border-gray-300 rounded-lg bg-gray-100 text-gray-700" rows="10" disabled><%= assistant.output %></textarea>
-  </div>
-  <div class="my-5">
-    <strong class="block text-lg font-semibold text-gray-800 mb-2">Instructions</strong>
-    <textarea class="w-full p-3 border border-gray-300 rounded-lg bg-gray-100 text-gray-700" rows="10" disabled><%= assistant.instructions %></textarea>
-  </div>
-  <div class="my-5">
-    <strong class="block text-lg font-semibold text-gray-800 mb-2">Context</strong>
-    <textarea class="w-full p-3 border border-gray-300 rounded-lg bg-gray-100 text-gray-700" rows="10" disabled><%= assistant.context %></textarea>
-  </div>
+  <% cache assistant do %>
+    <div class="my-5">
+      <strong class="block text-xl font-semibold text-gray-800 mb-2">Description</strong>
+      <textarea class="w-full p-3 border border-gray-300 rounded-lg bg-gray-100 text-gray-700" rows="5" disabled><%= assistant.description %></textarea>
+    </div>
+    <div class="my-5">
+      <strong class="block text-xl font-semibold text-gray-800 mb-2">Quip URL</strong>
+      <p class="text-gray-700"><%= assistant.quip_url %></p>
+    </div>
+    <div class="my-5">
+      <strong class="block text-xl font-semibold text-gray-800 mb-2">Confluence Spaces</strong>
+      <p class="text-gray-700"><%= assistant.confluence_spaces %></p>
+    </div>
+    <div class="my-5">
+      <strong class="block text-xl font-semibold text-gray-800 mb-2">Libraries</strong>
+      <p class="text-gray-700"><%= assistant.libraries %></p>
+    </div>
+    <div class="my-5">
+      <strong class="block text-xl font-semibold text-gray-800 mb-2">Input</strong>
+      <textarea class="w-full p-3 border border-gray-300 rounded-lg bg-gray-100 text-gray-700" rows="5" disabled><%= assistant.input %></textarea>
+    </div>
+    <div class="my-5">
+      <strong class="block text-xl font-semibold text-gray-800 mb-2">Output</strong>
+      <textarea class="w-full p-3 border border-gray-300 rounded-lg bg-gray-100 text-gray-700" rows="5" disabled><%= assistant.output %></textarea>
+    </div>
+    <div class="my-5">
+      <strong class="block text-xl font-semibold text-gray-800 mb-2">Instructions</strong>
+      <textarea class="w-full p-3 border border-gray-300 rounded-lg bg-gray-100 text-gray-700" rows="5" disabled><%= assistant.instructions %></textarea>
+    </div>
+    <div class="my-5">
+      <strong class="block text-xl font-semibold text-gray-800 mb-2">Context</strong>
+      <textarea class="w-full p-3 border border-gray-300 rounded-lg bg-gray-100 text-gray-700" rows="5" disabled><%= assistant.context %></textarea>
+    </div>
+  <% end %>
 </div>
diff --git a/app/views/assistants/_assistant_badge.html.erb b/app/views/assistants/_assistant_badge.html.erb
@@ -1,15 +1,15 @@
 <% if assistant.ready? %>
-  <span class="relative inline-block text-xs font-semibold text-green-500 rounded-full group">
-    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-8">
+  <span class="relative inline-block text-xs font-semibold text-green-500 rounded-full group ml-1">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
       <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 0 1-1.043 3.296 3.745 3.745 0 0 1-3.296 1.043A3.745 3.745 0 0 1 12 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 0 1-3.296-1.043 3.745 3.745 0 0 1-1.043-3.296A3.745 3.745 0 0 1 3 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 0 1 1.043-3.296 3.746 3.746 0 0 1 3.296-1.043A3.746 3.746 0 0 1 12 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 0 1 3.296 1.043 3.746 3.746 0 0 1 1.043 3.296A3.745 3.745 0 0 1 21 12Z" />
     </svg>
     <span class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 hidden px-2 py-1 text-xs text-white bg-stone-600 rounded opacity-0 group-hover:opacity-100 group-hover:block">
       This Assistant has been reviewed and is deemed to be reliable.  Generative AI can be unpredictable, so always verify if you are unsure of the results.
     </span>
   </span>
 <% elsif assistant.development? %>
-  <span class="relative inline-block text-xs font-semibold text-yellow-500 rounded-full group">
-    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-8">
+  <span class="relative inline-block text-xs font-semibold text-yellow-500 rounded-full group ml-1">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
       <path stroke-linecap="round" stroke-linejoin="round" d="M9.75 3.104v5.714a2.25 2.25 0 0 1-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 0 1 4.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104c.251.023.501.05.75.082M19.8 15.3l-1.57.393A9.065 9.065 0 0 1 12 15a9.065 9.065 0 0 0-6.23-.693L5 14.5m14.8.8 1.402 1.402c1.232 1.232.65 3.318-1.067 3.611A48.309 48.309 0 0 1 12 21c-2.773 0-5.491-.235-8.135-.687-1.718-.293-2.3-2.379-1.067-3.61L5 14.5" />
     </svg>
     <span class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 hidden px-2 py-1 text-xs text-white bg-stone-600 rounded opacity-0 group-hover:opacity-100 group-hover:block">

diff --git a/app/views/assistants/_form.html.erb b/app/views/assistants/_form.html.erb
@@ -50,6 +50,6 @@
     <%= form.text_area :context, rows: 4, class: "block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full" %>
   </div>
   <div class="inline">
-    <%= form.submit class: "rounded-lg py-3 px-5 bg-blue-600 text-white inline-block font-medium cursor-pointer" %>
+    <%= form.submit "Save", class: "rounded-lg py-3 px-5 bg-sky-600 text-white inline-block font-medium cursor-pointer" %>
   </div>
 <% end %>
diff --git a/app/views/assistants/edit.html.erb b/app/views/assistants/edit.html.erb
@@ -12,6 +12,4 @@
   </nav>
   <h1 class="font-bold text-4xl">Editing Assistant</h1>
   <%= render "form", assistant: @assistant %>
-  <%= link_to "Show this assistant", @assistant, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
-  <%= link_to "Back to assistants", assistants_path, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
 </div>
diff --git a/app/views/assistants/index.html.erb b/app/views/assistants/index.html.erb
@@ -11,13 +11,13 @@
       <div class="flex justify-between items-center bg-white rounded-lg shadow-lg p-4">
         <div class="w-5/6">
           <h2 class="font-bold text-xl mb-2 flex items-center ">
-            <%= render partial: 'assistant_badge', locals: { assistant: assistant } %>
             <%= link_to assistant.name, assistant, class: "text-sky-500 hover:underline ml-1" %>
+            <%= render partial: 'assistant_badge', locals: { assistant: assistant } %>
           </h2>
           <p class="text-gray-500 text-sm"><%= assistant.description %></p>
         </div>
         <div class="">
-          <%= link_to "Start Chat", new_assistant_chat_path(assistant_id: assistant.id), class: "rounded-lg py-2 px-4 bg-sky-500 text-white font-medium hover:bg-sky-700" %>
+          <%= link_to "Start Chat", new_assistant_chat_path(assistant_id: assistant.id), class: "rounded-lg py-2 px-4 bg-white text-sky-500 border border-sky-500 font-medium hover:bg-sky-100" %>
         </div>
       </div>
     <% end %>

diff --git a/app/views/assistants/show.html.erb b/app/views/assistants/show.html.erb
@@ -12,16 +12,25 @@
       </li>
     </ul>
   </nav>
-  <h2 class="text-3xl font-bold mb-4 flex items-center">
-    <%= @assistant.name %>
-    <span class="ml-2 inline-flex"> <%= render partial: 'assistant_badge', locals: { assistant: @assistant } %></span>
-  </h2>
-  <div class="">
-    <%= link_to "New chat", new_assistant_chat_path(@assistant), class: "mt-2 rounded-lg py-3 px-5 bg-sky-500 inline-block font-medium text-white" %>
-    <%= link_to "Edit", edit_assistant_path(@assistant), class: "mt-2 rounded-lg py-3 px-5 bg-gray-300 inline-block font-medium" %>
-    <div class="inline-block ml-2">
-      <%= button_to "Delete", @assistant, method: :delete, class: "mt-2 rounded-lg py-3 px-5 bg-gray-300 font-medium" %>
+  <div class="flex justify-between items-center">
+    <h2 class="text-3xl font-bold mb-4 flex items-center">
+      <%= @assistant.name %>
+      <span class="ml-2 inline-flex"> <%= render partial: 'assistant_badge', locals: { assistant: @assistant } %></span>
+    </h2>
+    <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 %>
+        <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>
-    <%= render @assistant %>
   </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>
diff --git a/app/views/chats/_form.html.erb b/app/views/chats/_form.html.erb
@@ -14,6 +14,6 @@
     <%= form.text_area :first_message, rows: 5,placeholder: ("Please give me " + chat.assistant.input).capitalize, class: "block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full" %>
   </div>
   <div class="inline">
-    <%= form.submit class: "rounded-lg py-3 px-5 bg-sky-600 text-white inline-block font-medium cursor-pointer" %>
+    <%= form.submit "Start Chatting", class: "rounded-lg py-3 px-5 bg-sky-600 text-white inline-block font-medium cursor-pointer" %>
   </div>
 <% end %>
diff --git a/app/views/chats/new.html.erb b/app/views/chats/new.html.erb
@@ -1,7 +1,16 @@
 <div class="">
-  <h1 class="font-bold text-4xl">Hello, I am the <span class="bg-stone-800 text-amber-300 px-2 py-1 rounded"><%= @chat.assistant.name %></span> assistant. </h1>
-
+  <!-- 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 @chat.assistant.name, assistant_path(@chat.assistant), class: "text-sky-500 hover:text-sky-800" %>
+      </li>
+    </ul>
+  </nav>
+  <h1 class="font-bold text-4xl">Hello, I am the <span class="bg-gray-800 text-sky-300 px-2 py-1 rounded-lg"><%= @chat.assistant.name %></span> assistant. </h1>
   <%= render "form", chat: @chat, assistant: @chat.assistant %>
-
-  <%= link_to "Back to chats", chats_path, class: "ml-2 rounded-lg py-3 px-5 bg-gray-300 inline-block font-medium" %>
 </div>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -90,23 +90,23 @@
                 Documents
               </a>
             </li>
+            <li>
+              <a href="/chats" class="<%= controller_name == 'chats' ? 'text-sky-100 border-sky-300 bg-sky-600' : '' %> hover:border-sky-400 hover:text-sky-100 flex items-center mr-2 p-2">
+                <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="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 0 1-.825-.242m9.345-8.334a2.126 2.126 0 0 0-.476-.095 48.64 48.64 0 0 0-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0 0 11.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155" />
+                </svg>
+                Chats
+              </a>
+            </li>
+            <li>
+              <a href="/assistants" class="<%= controller_name == 'assistants' ? 'text-sky-100 border-sky-300 bg-sky-600' : '' %> hover:border-sky-400 hover:text-sky-100 flex items-center mr-2 p-2">
+                <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>
+                Assistants
+              </a>
+            </li>
             <% if session[:beta] == "true" then %>
-              <li>
-                <a href="/chats" class="<%= controller_name == 'chats' ? 'text-sky-100 border-sky-300 bg-sky-600' : '' %> hover:border-sky-400 hover:text-sky-100 flex items-center mr-2 p-2">
-                  <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="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 0 1-.825-.242m9.345-8.334a2.126 2.126 0 0 0-.476-.095 48.64 48.64 0 0 0-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0 0 11.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155" />
-                  </svg>
-                  Chats
-                </a>
-              </li>
-              <li>
-                <a href="/assistants" class="<%= controller_name == 'assistants' ? 'text-sky-100 border-sky-300 bg-sky-600' : '' %> hover:border-sky-400 hover:text-sky-100 flex items-center mr-2 p-2">
-                  <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>
-                  Assistants
-                </a>
-              </li>
             <% end %>
           </ul>
         </nav>