deepagents_rails 0.1.0

data/lib/generators/deepagents/view/templates/javascript.js

@@ -0,0 +1,199 @@
+// DeepAgents <%= class_name %> Chat JavaScript
+
+document.addEventListener('DOMContentLoaded', function() {
+  // Elements
+  const messagesContainer = document.getElementById('messages-container');
+  const messageForm = document.getElementById('message-form');
+  const messageInput = document.getElementById('message-input');
+  const fileUpload = document.getElementById('file-upload');
+  const filePreview = document.getElementById('file-preview');
+  
+  // Auto-resize textarea
+  if (messageInput) {
+    messageInput.addEventListener('input', function() {
+      this.style.height = 'auto';
+      this.style.height = (this.scrollHeight) + 'px';
+    });
+  }
+  
+  // File upload preview
+  if (fileUpload) {
+    fileUpload.addEventListener('change', function(e) {
+      const file = e.target.files[0];
+      if (!file) {
+        filePreview.innerHTML = '';
+        return;
+      }
+      
+      const reader = new FileReader();
+      
+      reader.onload = function(e) {
+        filePreview.innerHTML = '';
+        
+        const fileElement = document.createElement('div');
+        fileElement.className = 'deepagents-file-item';
+        
+        // Check if it's an image
+        if (file.type.startsWith('image/')) {
+          const img = document.createElement('img');
+          img.src = e.target.result;
+          img.className = 'deepagents-file-thumbnail';
+          fileElement.appendChild(img);
+        }
+        
+        const fileInfo = document.createElement('div');
+        fileInfo.className = 'deepagents-file-info';
+        fileInfo.textContent = file.name;
+        
+        const removeButton = document.createElement('button');
+        removeButton.type = 'button';
+        removeButton.className = 'deepagents-file-remove';
+        removeButton.innerHTML = '&times;';
+        removeButton.addEventListener('click', function() {
+          fileUpload.value = '';
+          filePreview.innerHTML = '';
+        });
+        
+        fileElement.appendChild(fileInfo);
+        fileElement.appendChild(removeButton);
+        filePreview.appendChild(fileElement);
+      };
+      
+      reader.readAsDataURL(file);
+    });
+  }
+  
+  // Form submission
+  if (messageForm) {
+    messageForm.addEventListener('submit', function(e) {
+      e.preventDefault();
+      
+      const formData = new FormData(this);
+      const conversationId = document.querySelector('.deepagents-container').dataset.conversationId;
+      
+      // Check if there's a file to upload first
+      if (fileUpload && fileUpload.files.length > 0) {
+        const fileFormData = new FormData();
+        fileFormData.append('file', fileUpload.files[0]);
+        
+        fetch(`/conversations/${conversationId}/upload`, {
+          method: 'POST',
+          body: fileFormData,
+          headers: {
+            'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').content
+          }
+        })
+        .then(response => response.json())
+        .then(data => {
+          // Clear file upload
+          fileUpload.value = '';
+          filePreview.innerHTML = '';
+          
+          // Now send the message
+          sendMessage(formData, conversationId);
+        })
+        .catch(error => {
+          console.error('Error uploading file:', error);
+        });
+      } else {
+        // Just send the message
+        sendMessage(formData, conversationId);
+      }
+    });
+  }
+  
+  function sendMessage(formData, conversationId) {
+    // Add a loading message
+    const loadingMessage = document.createElement('div');
+    loadingMessage.className = 'deepagents-message assistant loading';
+    loadingMessage.innerHTML = `
+      <div class="deepagents-message-avatar">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 16 16">
+          <path d="M6 12.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5ZM3 8.062C3 6.76 4.235 5.765 5.53 5.886a26.58 26.58 0 0 0 4.94 0C11.765 5.765 13 6.76 13 8.062v1.157a.933.933 0 0 1-.765.935c-.845.147-2.34.346-4.235.346-1.895 0-3.39-.2-4.235-.346A.933.933 0 0 1 3 9.219V8.062Zm4.542-.827a.25.25 0 0 0-.217.068l-.92.9a24.767 24.767 0 0 1-1.871-.183.25.25 0 0 0-.068.495c.55.076 1.232.149 2.02.193a.25.25 0 0 0 .189-.071l.754-.736.847 1.71a.25.25 0 0 0 .404.062l.932-.97a25.286 25.286 0 0 0 1.922-.188.25.25 0 0 0-.068-.495c-.538.074-1.207.145-1.98.189a.25.25 0 0 0-.166.076l-.754.785-.842-1.7a.25.25 0 0 0-.182-.135Z"/>
+          <path d="M8.5 1.866a1 1 0 1 0-1 0V3h-2A4.5 4.5 0 0 0 1 7.5V8a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1v1a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-1a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1v-.5A4.5 4.5 0 0 0 10.5 3h-2V1.866ZM14 7.5V13a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V7.5A3.5 3.5 0 0 1 5.5 4h5A3.5 3.5 0 0 1 14 7.5Z"/>
+        </svg>
+      </div>
+      <div class="deepagents-message-content">
+        <div class="deepagents-message-header">
+          <span class="deepagents-message-role">Assistant</span>
+        </div>
+        <div class="deepagents-message-body">
+          <p>Thinking...</p>
+        </div>
+      </div>
+    `;
+    messagesContainer.appendChild(loadingMessage);
+    
+    // Scroll to bottom
+    messagesContainer.scrollTop = messagesContainer.scrollHeight;
+    
+    // Clear input
+    messageInput.value = '';
+    messageInput.style.height = 'auto';
+    
+    // Send the message
+    fetch(`/conversations/${conversationId}/run`, {
+      method: 'POST',
+      body: formData,
+      headers: {
+        'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').content
+      }
+    })
+    .then(response => response.json())
+    .then(data => {
+      // Remove loading message
+      messagesContainer.removeChild(loadingMessage);
+      
+      // Refresh the conversation
+      fetch(`/conversations/${conversationId}`, {
+        headers: {
+          'Accept': 'text/html',
+          'X-Requested-With': 'XMLHttpRequest'
+        }
+      })
+      .then(response => response.text())
+      .then(html => {
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(html, 'text/html');
+        const newMessages = doc.querySelector('.deepagents-messages');
+        
+        if (newMessages) {
+          messagesContainer.innerHTML = newMessages.innerHTML;
+        }
+        
+        // Scroll to bottom
+        messagesContainer.scrollTop = messagesContainer.scrollHeight;
+      });
+    })
+    .catch(error => {
+      console.error('Error sending message:', error);
+      
+      // Remove loading message
+      messagesContainer.removeChild(loadingMessage);
+      
+      // Show error message
+      const errorMessage = document.createElement('div');
+      errorMessage.className = 'deepagents-message system error';
+      errorMessage.innerHTML = `
+        <div class="deepagents-message-avatar">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 16 16">
+            <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
+            <path d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z"/>
+          </svg>
+        </div>
+        <div class="deepagents-message-content">
+          <div class="deepagents-message-header">
+            <span class="deepagents-message-role">System</span>
+          </div>
+          <div class="deepagents-message-body">
+            <p>Error: Could not send message. Please try again.</p>
+          </div>
+        </div>
+      `;
+      messagesContainer.appendChild(errorMessage);
+      
+      // Scroll to bottom
+      messagesContainer.scrollTop = messagesContainer.scrollHeight;
+    });
+  }
+});

data/lib/generators/deepagents/view/templates/new.html.erb

@@ -0,0 +1,10 @@
+<%# DeepAgents %> <%= class_name %> <%# New View %>
+<div class="deepagents-container">
+  <h1>New Conversation</h1>
+  
+  <div class="deepagents-actions">
+    <%= link_to "Back to Conversations", #{file_name.pluralize}_path, class: "deepagents-button secondary" %>
+  </div>
+  
+  <%= render "form", #{file_name}: @#{file_name} %>
+</div>

data/lib/generators/deepagents/view/templates/show.html.erb

@@ -0,0 +1,54 @@
+<%# DeepAgents %> <%= class_name %> <%# Show View %>
+<div class="deepagents-container" data-conversation-id="<%= @conversation.id %>">
+  <div class="deepagents-header">
+    <h1><%= @conversation.title.presence || "Conversation ##{@conversation.id}" %></h1>
+    <div class="deepagents-actions">
+      <%= link_to "Back to Conversations", #{file_name.pluralize}_path, class: "deepagents-button secondary" %>
+    </div>
+  </div>
+  
+  <div class="deepagents-conversation">
+    <div class="deepagents-messages" id="messages-container">
+      <%= render partial: "conversation", locals: { conversation: @conversation } %>
+    </div>
+    
+    <div class="deepagents-input-container">
+      <%= form_with url: run_#{file_name}_path(@conversation), method: :post, class: "deepagents-form", id: "message-form", data: { remote: true } do |f| %>
+        <div class="deepagents-file-upload">
+          <%= f.file_field :file, id: "file-upload", class: "deepagents-file-input" %>
+          <label for="file-upload" class="deepagents-file-label">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+              <path d="M4.5 3a2.5 2.5 0 0 1 5 0v9a1.5 1.5 0 0 1-3 0V5a.5.5 0 0 1 1 0v7a.5.5 0 0 0 1 0V3a1.5 1.5 0 1 0-3 0v9a2.5 2.5 0 0 0 5 0V5a.5.5 0 0 1 1 0v7a3.5 3.5 0 1 1-7 0V3z"/>
+            </svg>
+          </label>
+        </div>
+        
+        <%= f.text_area :input, id: "message-input", class: "deepagents-input", placeholder: "Type your message...", rows: 1, required: true %>
+        
+        <%= f.submit "Send", class: "deepagents-send-button" %>
+      <% end %>
+      
+      <div id="file-preview" class="deepagents-file-preview"></div>
+    </div>
+  </div>
+  
+  <% if @conversation.files.any? %>
+    <div class="deepagents-files">
+      <h3>Files</h3>
+      <div class="deepagents-files-list">
+        <% @conversation.files.each do |file| %>
+          <div class="deepagents-file">
+            <% if file.image? %>
+              <img src="<%= file.url %>" alt="<%= file.filename %>" class="deepagents-file-preview">
+            <% end %>
+            <div class="deepagents-file-info">
+              <span class="deepagents-file-name"><%= file.filename %></span>
+              <span class="deepagents-file-timestamp"><%= time_ago_in_words(file.created_at) %> ago</span>
+            </div>
+            <%= link_to "Download", file.url, class: "deepagents-file-download", download: file.filename %>
+          </div>
+        <% end %>
+      </div>
+    </div>
+  <% end %>
+</div>

data/lib/generators/deepagents/view/templates/stylesheet.css

@@ -0,0 +1,397 @@
+/* DeepAgents <%= class_name %> Chat Stylesheet */
+
+.deepagents-container {
+  max-width: 1000px;
+  margin: 0 auto;
+  padding: 20px;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+}
+
+.deepagents-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.deepagents-actions {
+  margin-bottom: 20px;
+}
+
+.deepagents-button {
+  display: inline-block;
+  padding: 8px 16px;
+  background-color: #4a6cf7;
+  color: white;
+  border-radius: 4px;
+  text-decoration: none;
+  font-weight: 500;
+  border: none;
+  cursor: pointer;
+  font-size: 14px;
+}
+
+.deepagents-button:hover {
+  background-color: #3a5ce5;
+}
+
+.deepagents-button.secondary {
+  background-color: #e2e8f0;
+  color: #334155;
+}
+
+.deepagents-button.secondary:hover {
+  background-color: #cbd5e1;
+}
+
+.deepagents-conversations-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 20px;
+}
+
+.deepagents-conversation-card {
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  padding: 16px;
+  transition: box-shadow 0.2s ease;
+}
+
+.deepagents-conversation-card:hover {
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+
+.deepagents-conversation-meta {
+  display: flex;
+  justify-content: space-between;
+  color: #64748b;
+  font-size: 12px;
+  margin-bottom: 8px;
+}
+
+.deepagents-conversation-preview {
+  color: #64748b;
+  font-size: 14px;
+}
+
+.deepagents-conversation {
+  display: flex;
+  flex-direction: column;
+  height: 70vh;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.deepagents-messages {
+  flex-grow: 1;
+  overflow-y: auto;
+  padding: 16px;
+}
+
+.deepagents-message {
+  display: flex;
+  margin-bottom: 16px;
+}
+
+.deepagents-message-avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background-color: #e2e8f0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 12px;
+  flex-shrink: 0;
+}
+
+.deepagents-message.user .deepagents-message-avatar {
+  background-color: #4a6cf7;
+  color: white;
+}
+
+.deepagents-message.assistant .deepagents-message-avatar {
+  background-color: #10b981;
+  color: white;
+}
+
+.deepagents-message.system .deepagents-message-avatar {
+  background-color: #f59e0b;
+  color: white;
+}
+
+.deepagents-message.error .deepagents-message-avatar {
+  background-color: #ef4444;
+  color: white;
+}
+
+.deepagents-message-content {
+  flex-grow: 1;
+}
+
+.deepagents-message-header {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 4px;
+}
+
+.deepagents-message-role {
+  font-weight: 600;
+  font-size: 14px;
+}
+
+.deepagents-message-timestamp {
+  color: #64748b;
+  font-size: 12px;
+}
+
+.deepagents-message-body {
+  background-color: #f8fafc;
+  border-radius: 8px;
+  padding: 12px;
+}
+
+.deepagents-message.user .deepagents-message-body {
+  background-color: #eff6ff;
+}
+
+.deepagents-message.assistant .deepagents-message-body {
+  background-color: #f0fdf4;
+}
+
+.deepagents-message.system .deepagents-message-body {
+  background-color: #fef3c7;
+}
+
+.deepagents-message.error .deepagents-message-body {
+  background-color: #fee2e2;
+}
+
+.deepagents-input-container {
+  border-top: 1px solid #e2e8f0;
+  padding: 16px;
+  background-color: white;
+}
+
+.deepagents-form {
+  display: flex;
+  align-items: flex-end;
+}
+
+.deepagents-input {
+  flex-grow: 1;
+  border: 1px solid #e2e8f0;
+  border-radius: 4px;
+  padding: 8px 12px;
+  font-size: 14px;
+  resize: none;
+  max-height: 150px;
+  margin-right: 8px;
+}
+
+.deepagents-input:focus {
+  outline: none;
+  border-color: #4a6cf7;
+}
+
+.deepagents-send-button {
+  padding: 8px 16px;
+  background-color: #4a6cf7;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-weight: 500;
+}
+
+.deepagents-send-button:hover {
+  background-color: #3a5ce5;
+}
+
+.deepagents-file-upload {
+  margin-right: 8px;
+}
+
+.deepagents-file-input {
+  display: none;
+}
+
+.deepagents-file-label {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  background-color: #e2e8f0;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.deepagents-file-label:hover {
+  background-color: #cbd5e1;
+}
+
+.deepagents-file-preview {
+  margin-top: 8px;
+}
+
+.deepagents-file-item {
+  display: flex;
+  align-items: center;
+  background-color: #f8fafc;
+  border-radius: 4px;
+  padding: 8px;
+  margin-top: 8px;
+}
+
+.deepagents-file-thumbnail {
+  width: 40px;
+  height: 40px;
+  object-fit: cover;
+  border-radius: 4px;
+  margin-right: 8px;
+}
+
+.deepagents-file-info {
+  flex-grow: 1;
+  font-size: 14px;
+}
+
+.deepagents-file-remove {
+  background: none;
+  border: none;
+  color: #64748b;
+  cursor: pointer;
+  font-size: 18px;
+  padding: 0 8px;
+}
+
+.deepagents-file-remove:hover {
+  color: #ef4444;
+}
+
+.deepagents-files {
+  margin-top: 20px;
+}
+
+.deepagents-files-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 16px;
+  margin-top: 12px;
+}
+
+.deepagents-file {
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.deepagents-file-preview {
+  width: 100%;
+  height: 120px;
+  object-fit: cover;
+}
+
+.deepagents-file-name {
+  display: block;
+  font-weight: 500;
+  margin-bottom: 4px;
+}
+
+.deepagents-file-timestamp {
+  color: #64748b;
+  font-size: 12px;
+}
+
+.deepagents-file-download {
+  display: block;
+  text-align: center;
+  padding: 8px;
+  background-color: #4a6cf7;
+  color: white;
+  text-decoration: none;
+  font-size: 14px;
+  margin-top: 8px;
+}
+
+.deepagents-file-download:hover {
+  background-color: #3a5ce5;
+}
+
+.deepagents-empty-state {
+  text-align: center;
+  padding: 40px 0;
+  color: #64748b;
+}
+
+.deepagents-form-group {
+  margin-bottom: 16px;
+}
+
+.deepagents-form-group label {
+  display: block;
+  margin-bottom: 8px;
+  font-weight: 500;
+}
+
+.deepagents-form-control {
+  width: 100%;
+  padding: 8px 12px;
+  border: 1px solid #e2e8f0;
+  border-radius: 4px;
+  font-size: 14px;
+}
+
+.deepagents-form-control:focus {
+  outline: none;
+  border-color: #4a6cf7;
+}
+
+.deepagents-form-text {
+  display: block;
+  margin-top: 4px;
+  color: #64748b;
+  font-size: 12px;
+}
+
+.deepagents-form-actions {
+  margin-top: 24px;
+}
+
+.deepagents-error-messages {
+  color: #ef4444;
+  background-color: #fee2e2;
+  border: 1px solid #fecaca;
+  border-radius: 4px;
+  padding: 12px;
+  margin-bottom: 16px;
+}
+
+.deepagents-message.loading .deepagents-message-body {
+  position: relative;
+}
+
+.deepagents-message.loading .deepagents-message-body p {
+  display: flex;
+  align-items: center;
+}
+
+.deepagents-message.loading .deepagents-message-body p:after {
+  content: "...";
+  overflow: hidden;
+  display: inline-block;
+  vertical-align: bottom;
+  animation: ellipsis 2s infinite;
+  width: 0;
+}
+
+@keyframes ellipsis {
+  from {
+    width: 0;
+  }
+  to {
+    width: 1.25em;
+  }
+}

data/lib/generators/deepagents/view/view_generator.rb

@@ -0,0 +1,50 @@
+module Deepagents
+  module Generators
+    class ViewGenerator < Rails::Generators::NamedBase
+      source_root File.expand_path('templates', __dir__)
+      
+      desc "Creates DeepAgents UI views for your Rails application"
+      
+      class_option :skip_javascript, type: :boolean, default: false, desc: "Skip JavaScript file generation"
+      class_option :skip_stylesheet, type: :boolean, default: false, desc: "Skip stylesheet file generation"
+      
+      def create_views
+        template "index.html.erb", "app/views/#{file_name.pluralize}/index.html.erb"
+        template "show.html.erb", "app/views/#{file_name.pluralize}/show.html.erb"
+        template "new.html.erb", "app/views/#{file_name.pluralize}/new.html.erb"
+        template "_conversation.html.erb", "app/views/#{file_name.pluralize}/_conversation.html.erb"
+        template "_message.html.erb", "app/views/#{file_name.pluralize}/_message.html.erb"
+        template "_form.html.erb", "app/views/#{file_name.pluralize}/_form.html.erb"
+      end
+      
+      def create_javascript
+        return if options[:skip_javascript]
+        
+        template "javascript.js", "app/javascript/#{file_name}_chat.js"
+        
+        append_to_file "app/javascript/packs/application.js", <<~JS
+          
+          // DeepAgents #{class_name} Chat
+          import "../#{file_name}_chat"
+        JS
+      end
+      
+      def create_stylesheet
+        return if options[:skip_stylesheet]
+        
+        template "stylesheet.css", "app/assets/stylesheets/#{file_name}_chat.css"
+      end
+      
+      def display_next_steps
+        say "\n"
+        say "DeepAgents UI views for #{file_name} have been created! 🎨", :green
+        say "\n"
+        say "Next steps:", :yellow
+        say "  1. Ensure you have the required controller (use the controller generator if needed)"
+        say "  2. Add the JavaScript to your application.js if using Webpacker"
+        say "  3. Customize the views to match your application's design"
+        say "\n"
+      end
+    end
+  end
+end