ruby_llm-agents 0.5.0 → 1.0.0.beta.1

data/app/views/ruby_llm/agents/agents/_config_speaker.html.erb

@@ -0,0 +1,108 @@
+<%# Configuration partial for Speaker types %>
+<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6 mb-6">
+  <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">
+    Configuration
+  </h3>
+
+  <!-- TTS Configuration -->
+  <p class="text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-3">
+    Text-to-Speech Settings
+  </p>
+
+  <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
+    <div>
+      <p class="text-sm text-gray-500 dark:text-gray-400">Model</p>
+      <p class="font-medium text-gray-900 dark:text-gray-100">
+        <%= config[:model] %>
+      </p>
+    </div>
+
+    <div>
+      <p class="text-sm text-gray-500 dark:text-gray-400">Provider</p>
+      <p class="font-medium text-gray-900 dark:text-gray-100">
+        <% if config[:provider] %>
+          <%= config[:provider].to_s.titleize %>
+        <% else %>
+          <span class="text-gray-400 dark:text-gray-500">Default</span>
+        <% end %>
+      </p>
+    </div>
+
+    <div>
+      <p class="text-sm text-gray-500 dark:text-gray-400">Voice</p>
+      <p class="font-medium text-gray-900 dark:text-gray-100">
+        <% if config[:voice] %>
+          <%= config[:voice] %>
+        <% else %>
+          <span class="text-gray-400 dark:text-gray-500">Default</span>
+        <% end %>
+      </p>
+    </div>
+
+    <div>
+      <p class="text-sm text-gray-500 dark:text-gray-400">Speed</p>
+      <p class="font-medium text-gray-900 dark:text-gray-100">
+        <%= config[:speed] || 1.0 %>x
+      </p>
+    </div>
+  </div>
+
+  <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
+    <div>
+      <p class="text-sm text-gray-500 dark:text-gray-400">Output Format</p>
+      <p class="font-medium text-gray-900 dark:text-gray-100">
+        <%= config[:output_format] || :mp3 %>
+      </p>
+    </div>
+
+    <div>
+      <p class="text-sm text-gray-500 dark:text-gray-400">Streaming</p>
+      <p class="font-medium text-gray-900 dark:text-gray-100">
+        <% if config[:streaming] %>
+          <span class="text-green-600 dark:text-green-400">Enabled</span>
+        <% else %>
+          <span class="text-gray-400 dark:text-gray-500">Disabled</span>
+        <% end %>
+      </p>
+    </div>
+
+    <div>
+      <p class="text-sm text-gray-500 dark:text-gray-400">SSML</p>
+      <p class="font-medium text-gray-900 dark:text-gray-100">
+        <% if config[:ssml_enabled] %>
+          <span class="text-green-600 dark:text-green-400">Enabled</span>
+        <% else %>
+          <span class="text-gray-400 dark:text-gray-500">Disabled</span>
+        <% end %>
+      </p>
+    </div>
+
+    <div>
+      <p class="text-sm text-gray-500 dark:text-gray-400">Cache</p>
+      <p class="font-medium text-gray-900 dark:text-gray-100">
+        <% if config[:cache_enabled] %>
+          Enabled (<%= config[:cache_ttl].inspect %>)
+        <% else %>
+          <span class="text-gray-400 dark:text-gray-500">Disabled</span>
+        <% end %>
+      </p>
+    </div>
+  </div>
+
+  <!-- Info Section -->
+  <div class="border-t border-gray-100 dark:border-gray-700 pt-4">
+    <div class="flex items-start gap-3 p-3 rounded-lg bg-purple-50 dark:bg-purple-900/20">
+      <div class="flex-shrink-0 mt-0.5">
+        <svg class="w-5 h-5 text-purple-500" fill="currentColor" viewBox="0 0 20 20">
+          <path fill-rule="evenodd" d="M9.383 3.076A1 1 0 0110 4v12a1 1 0 01-1.707.707L4.586 13H2a1 1 0 01-1-1V8a1 1 0 011-1h2.586l3.707-3.707a1 1 0 011.09-.217zM14.657 2.929a1 1 0 011.414 0A9.972 9.972 0 0119 10a9.972 9.972 0 01-2.929 7.071 1 1 0 01-1.414-1.414A7.971 7.971 0 0017 10c0-2.21-.894-4.208-2.343-5.657a1 1 0 010-1.414zm-2.829 2.828a1 1 0 011.415 0A5.983 5.983 0 0115 10a5.984 5.984 0 01-1.757 4.243 1 1 0 01-1.415-1.415A3.984 3.984 0 0013 10a3.983 3.983 0 00-1.172-2.828 1 1 0 010-1.415z" clip-rule="evenodd"/>
+        </svg>
+      </div>
+      <div>
+        <p class="text-sm font-medium text-gray-900 dark:text-gray-100">Speaker</p>
+        <p class="text-xs text-gray-600 dark:text-gray-400 mt-1">
+          Converts text to natural-sounding speech audio. Supports multiple voices, speeds, and output formats.
+        </p>
+      </div>
+    </div>
+  </div>
+</div>

data/app/views/ruby_llm/agents/agents/_config_transcriber.html.erb

@@ -0,0 +1,91 @@
+<%# Configuration partial for Transcriber types %>
+<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6 mb-6">
+  <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">
+    Configuration
+  </h3>
+
+  <!-- Transcription Configuration -->
+  <p class="text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-3">
+    Transcription Settings
+  </p>
+
+  <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
+    <div>
+      <p class="text-sm text-gray-500 dark:text-gray-400">Model</p>
+      <p class="font-medium text-gray-900 dark:text-gray-100">
+        <%= config[:model] %>
+      </p>
+    </div>
+
+    <div>
+      <p class="text-sm text-gray-500 dark:text-gray-400">Language</p>
+      <p class="font-medium text-gray-900 dark:text-gray-100">
+        <% if config[:language] %>
+          <%= config[:language].upcase %>
+        <% else %>
+          <span class="text-gray-400 dark:text-gray-500">Auto-detect</span>
+        <% end %>
+      </p>
+    </div>
+
+    <div>
+      <p class="text-sm text-gray-500 dark:text-gray-400">Output Format</p>
+      <p class="font-medium text-gray-900 dark:text-gray-100">
+        <%= config[:output_format] || :text %>
+      </p>
+    </div>
+
+    <div>
+      <p class="text-sm text-gray-500 dark:text-gray-400">Timestamps</p>
+      <p class="font-medium text-gray-900 dark:text-gray-100">
+        <% if config[:include_timestamps] && config[:include_timestamps] != :none %>
+          <%= config[:include_timestamps].to_s.titleize %>
+        <% else %>
+          <span class="text-gray-400 dark:text-gray-500">None</span>
+        <% end %>
+      </p>
+    </div>
+  </div>
+
+  <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
+    <div>
+      <p class="text-sm text-gray-500 dark:text-gray-400">Cache</p>
+      <p class="font-medium text-gray-900 dark:text-gray-100">
+        <% if config[:cache_enabled] %>
+          Enabled (<%= config[:cache_ttl].inspect %>)
+        <% else %>
+          <span class="text-gray-400 dark:text-gray-500">Disabled</span>
+        <% end %>
+      </p>
+    </div>
+
+    <div class="col-span-3">
+      <p class="text-sm text-gray-500 dark:text-gray-400">Fallback Models</p>
+      <p class="font-medium text-gray-900 dark:text-gray-100">
+        <% fallback_models = Array(config[:fallback_models]).compact %>
+        <% if fallback_models.any? %>
+          <%= fallback_models.join(" → ") %>
+        <% else %>
+          <span class="text-gray-400 dark:text-gray-500">None configured</span>
+        <% end %>
+      </p>
+    </div>
+  </div>
+
+  <!-- Info Section -->
+  <div class="border-t border-gray-100 dark:border-gray-700 pt-4">
+    <div class="flex items-start gap-3 p-3 rounded-lg bg-teal-50 dark:bg-teal-900/20">
+      <div class="flex-shrink-0 mt-0.5">
+        <svg class="w-5 h-5 text-teal-500" fill="currentColor" viewBox="0 0 20 20">
+          <path fill-rule="evenodd" d="M7 4a3 3 0 016 0v4a3 3 0 11-6 0V4zm4 10.93A7.001 7.001 0 0017 8a1 1 0 10-2 0A5 5 0 015 8a1 1 0 00-2 0 7.001 7.001 0 006 6.93V17H6a1 1 0 100 2h8a1 1 0 100-2h-3v-2.07z" clip-rule="evenodd"/>
+        </svg>
+      </div>
+      <div>
+        <p class="text-sm font-medium text-gray-900 dark:text-gray-100">Transcriber</p>
+        <p class="text-xs text-gray-600 dark:text-gray-400 mt-1">
+          Converts audio to text with support for multiple languages, timestamps, and output formats like SRT and VTT.
+        </p>
+      </div>
+    </div>
+  </div>
+</div>

data/app/views/ruby_llm/agents/agents/_workflow.html.erb

@@ -15,7 +15,7 @@
 %>
 
 <div x-data="{ expanded: false }" class="block bg-white dark:bg-gray-800 rounded-lg shadow hover:shadow-md transition-shadow border-l-4 <%= colors[:border] %>">
-  <%= link_to ruby_llm_agents.agent_path(ERB::Util.url_encode(workflow[:name])), class: "block p-4 sm:p-5" do %>
+  <%= link_to ruby_llm_agents.workflow_path(ERB::Util.url_encode(workflow[:name]), tab: local_assigns[:current_tab], subtab: local_assigns[:current_subtab]), class: "block p-4 sm:p-5 relative z-10", data: { turbo: false }, style: "pointer-events: auto;" do %>
     <!-- Header Row -->
     <div class="flex items-center justify-between gap-2">
       <div class="flex items-center gap-2 min-w-0">

data/app/views/ruby_llm/agents/agents/index.html.erb

@@ -3,12 +3,25 @@
   <p class="text-gray-500 dark:text-gray-400 mt-1">All available agents and workflows with execution statistics</p>
 </div>
 
-<div x-data="{ activeTab: 'agents', activeSubTab: null }">
+<div x-data="{
+  activeTab: '<%= params[:tab].presence || 'agents' %>',
+  activeSubTab: <%= params[:subtab].present? ? "'#{params[:subtab]}'" : 'null' %>,
+  updateUrl() {
+    const url = new URL(window.location);
+    url.searchParams.set('tab', this.activeTab);
+    if (this.activeSubTab) {
+      url.searchParams.set('subtab', this.activeSubTab);
+    } else {
+      url.searchParams.delete('subtab');
+    }
+    history.replaceState({}, '', url);
+  }
+}">
   <!-- Tab Navigation -->
   <div class="border-b border-gray-200 dark:border-gray-700 mb-6">
     <nav class="-mb-px flex space-x-6" aria-label="Tabs">
       <!-- Agents Tab -->
-      <button type="button" @click="activeTab = 'agents'; activeSubTab = null"
+      <button type="button" @click="activeTab = 'agents'; activeSubTab = null; updateUrl()"
               :class="activeTab === 'agents' ? 'border-blue-500 text-blue-600 dark:text-blue-400' : 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300'"
               class="whitespace-nowrap py-3 px-1 border-b-2 font-medium text-sm flex items-center gap-2 transition-colors">
         <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -22,7 +35,7 @@
       </button>
 
       <!-- Workflows Tab -->
-      <button type="button" @click="activeTab = 'workflows'; activeSubTab = null"
+      <button type="button" @click="activeTab = 'workflows'; activeSubTab = null; updateUrl()"
               :class="activeTab === 'workflows' ? 'border-blue-500 text-blue-600 dark:text-blue-400' : 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300'"
               class="whitespace-nowrap py-3 px-1 border-b-2 font-medium text-sm flex items-center gap-2 transition-colors">
         <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -37,25 +50,66 @@
     </nav>
   </div>
 
+  <!-- Agent Sub-tabs -->
+  <div x-show="activeTab === 'agents'" x-cloak class="mb-4">
+    <div class="flex flex-wrap gap-2">
+      <button type="button" @click="activeSubTab = null; updateUrl()"
+              :class="activeSubTab === null ? 'bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900' : 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600'"
+              class="px-3 py-1.5 rounded-md text-sm font-medium transition-colors">
+        All (<%= @agent_count %>)
+      </button>
+      <button type="button" @click="activeSubTab = 'agent'; updateUrl()"
+              :class="activeSubTab === 'agent' ? 'bg-blue-600 text-white' : 'bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300 hover:bg-blue-200 dark:hover:bg-blue-800'"
+              class="px-3 py-1.5 rounded-md text-sm font-medium transition-colors">
+        Agents (<%= @agents_by_type[:agent].size %>)
+      </button>
+      <button type="button" @click="activeSubTab = 'embedder'; updateUrl()"
+              :class="activeSubTab === 'embedder' ? 'bg-purple-600 text-white' : 'bg-purple-100 dark:bg-purple-900/50 text-purple-700 dark:text-purple-300 hover:bg-purple-200 dark:hover:bg-purple-800'"
+              class="px-3 py-1.5 rounded-md text-sm font-medium transition-colors">
+        Embedders (<%= @agents_by_type[:embedder].size %>)
+      </button>
+      <button type="button" @click="activeSubTab = 'moderator'; updateUrl()"
+              :class="activeSubTab === 'moderator' ? 'bg-orange-600 text-white' : 'bg-orange-100 dark:bg-orange-900/50 text-orange-700 dark:text-orange-300 hover:bg-orange-200 dark:hover:bg-orange-800'"
+              class="px-3 py-1.5 rounded-md text-sm font-medium transition-colors">
+        Moderators (<%= @agents_by_type[:moderator].size %>)
+      </button>
+      <% audio_count = @agents_by_type[:speaker].size + @agents_by_type[:transcriber].size %>
+      <% if audio_count > 0 %>
+        <button type="button" @click="activeSubTab = 'audio'; updateUrl()"
+                :class="activeSubTab === 'audio' ? 'bg-pink-600 text-white' : 'bg-pink-100 dark:bg-pink-900/50 text-pink-700 dark:text-pink-300 hover:bg-pink-200 dark:hover:bg-pink-800'"
+                class="px-3 py-1.5 rounded-md text-sm font-medium transition-colors">
+          Audio (<%= audio_count %>)
+        </button>
+      <% end %>
+      <% if @agents_by_type[:image_generator].size > 0 %>
+        <button type="button" @click="activeSubTab = 'image_generator'; updateUrl()"
+                :class="activeSubTab === 'image_generator' ? 'bg-teal-600 text-white' : 'bg-teal-100 dark:bg-teal-900/50 text-teal-700 dark:text-teal-300 hover:bg-teal-200 dark:hover:bg-teal-800'"
+                class="px-3 py-1.5 rounded-md text-sm font-medium transition-colors">
+          Image Generators (<%= @agents_by_type[:image_generator].size %>)
+        </button>
+      <% end %>
+    </div>
+  </div>
+
   <!-- Workflow Sub-tabs -->
   <div x-show="activeTab === 'workflows'" x-cloak class="mb-4">
     <div class="flex flex-wrap gap-2">
-      <button type="button" @click="activeSubTab = null"
+      <button type="button" @click="activeSubTab = null; updateUrl()"
               :class="activeSubTab === null ? 'bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900' : 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600'"
               class="px-3 py-1.5 rounded-md text-sm font-medium transition-colors">
         All (<%= @workflow_count %>)
       </button>
-      <button type="button" @click="activeSubTab = 'pipeline'"
+      <button type="button" @click="activeSubTab = 'pipeline'; updateUrl()"
               :class="activeSubTab === 'pipeline' ? 'bg-indigo-600 text-white' : 'bg-indigo-100 dark:bg-indigo-900/50 text-indigo-700 dark:text-indigo-300 hover:bg-indigo-200 dark:hover:bg-indigo-800'"
               class="px-3 py-1.5 rounded-md text-sm font-medium transition-colors inline-flex items-center gap-1.5">
         <span aria-hidden="true">-></span> Pipeline (<%= @workflows_by_type[:pipeline].size %>)
       </button>
-      <button type="button" @click="activeSubTab = 'parallel'"
+      <button type="button" @click="activeSubTab = 'parallel'; updateUrl()"
               :class="activeSubTab === 'parallel' ? 'bg-cyan-600 text-white' : 'bg-cyan-100 dark:bg-cyan-900/50 text-cyan-700 dark:text-cyan-300 hover:bg-cyan-200 dark:hover:bg-cyan-800'"
               class="px-3 py-1.5 rounded-md text-sm font-medium transition-colors inline-flex items-center gap-1.5">
         <span aria-hidden="true">//</span> Parallel (<%= @workflows_by_type[:parallel].size %>)
       </button>
-      <button type="button" @click="activeSubTab = 'router'"
+      <button type="button" @click="activeSubTab = 'router'; updateUrl()"
               :class="activeSubTab === 'router' ? 'bg-amber-600 text-white' : 'bg-amber-100 dark:bg-amber-900/50 text-amber-700 dark:text-amber-300 hover:bg-amber-200 dark:hover:bg-amber-800'"
               class="px-3 py-1.5 rounded-md text-sm font-medium transition-colors inline-flex items-center gap-1.5">
         <span aria-hidden="true">&lt;&gt;</span> Router (<%= @workflows_by_type[:router].size %>)
@@ -70,7 +124,18 @@
     <% else %>
       <div class="space-y-3 sm:space-y-4">
         <% @agents.each do |agent| %>
-          <%= render partial: "ruby_llm/agents/agents/agent", locals: { agent: agent } %>
+          <%
+            # Determine if this agent should be shown based on sub-tab
+            # 'audio' sub-tab shows both speakers and transcribers
+            show_condition = if agent[:agent_type] == 'speaker' || agent[:agent_type] == 'transcriber'
+              "activeSubTab === null || activeSubTab === 'audio' || activeSubTab === '#{agent[:agent_type]}'"
+            else
+              "activeSubTab === null || activeSubTab === '#{agent[:agent_type]}'"
+            end
+          %>
+          <div x-show="<%= show_condition %>">
+            <%= render partial: "ruby_llm/agents/agents/agent", locals: { agent: agent, current_tab: params[:tab] || 'agents', current_subtab: params[:subtab] } %>
+          </div>
         <% end %>
       </div>
     <% end %>
@@ -84,7 +149,7 @@
       <div class="space-y-3 sm:space-y-4">
         <% @workflows.each do |workflow| %>
           <div x-show="activeSubTab === null || activeSubTab === '<%= workflow[:workflow_type] %>'">
-            <%= render partial: "ruby_llm/agents/agents/workflow", locals: { workflow: workflow } %>
+            <%= render partial: "ruby_llm/agents/agents/workflow", locals: { workflow: workflow, current_tab: params[:tab] || 'workflows', current_subtab: params[:subtab] } %>
           </div>
         <% end %>
       </div>