appchat 0.0.3 → 0.0.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f9bb854d39e8d17f65dcc5ff09269f488e63a50fe080e1c7ae104d9326d8d8b9
-  data.tar.gz: 50c75e1d61f287bd89d865b9dffbd24bd77c5448cc13c6407788117a0c49140f
+  metadata.gz: 3071421a8c3c49e11f5c5186b9f17a00bd37d45229d0d95a3b466ae9b9032fee
+  data.tar.gz: 79284185b56a3efaeb60e1ec1ad144ada532fd499e686b4604db7a29aabccd16
 SHA512:
-  metadata.gz: ddecc383090bcb31337e1fab220b510fe62afe86d2763cbd95a837b2ae87c52f7aef7d08130411b02e443c76c5392a70d1481cc1556e4928a29aefbe30c1c91a
-  data.tar.gz: a04b84d8eab498add64fb2e4111a8fd491e6dec1af3a984957dfc713c26c4f55d90acff6a16ca83a0d9806087efb26db87b06ec4f861e77bc6ff338e4ac227d2
+  metadata.gz: 9e642582fe817de68a171c14b272a0b0ceb2257b96021ae9a51e630c5ef562ed982c452fdc9694c2d6e6c81378720f636e0e8218f51d1704134d383602cf2df7
+  data.tar.gz: a71996c59642154416cb3178b9406d44242b5626ab7069aeb6341a15e1062d6c297131dfd19de2455c7e59be0cbf8af8c43e6daa0879afb269c001a88723f0a3

data/lib/generators/appchat/appchat_generator.rb

@@ -23,21 +23,38 @@ class AppchatGenerator < Rails::Generators::Base
     run 'rails tailwindcss:install'
   end
 
-  def generate_scaffolds
-    generate "model", "Chat context:text"
+  def set_routes
     route "resources :chats"
-    generate "scaffold", "Message chat:references content:text role:integer"
+    route "resources :messages"
   end
 
-  def create_views
+  def generate_models
+    generate "model", "Chat context:text"
+    generate "model", "Message chat:references content:text role:integer"
+  end
+
+  def create_controllers
     copy_file "chats_controller.rb", "app/controllers/chats_controller.rb"
+    copy_file "messages_controller.rb", "app/controllers/messages_controller.rb", force: true
+  end
+
+  def create_views
     copy_file "chats/chat.html.erb", "app/views/chats/_chat.html.erb", force: true
     copy_file "chats/index.html.erb", "app/views/chats/index.html.erb", force: true
     copy_file "chats/show.html.erb", "app/views/chats/show.html.erb", force: true
     copy_file "messages/index.html.erb", "app/views/messages/index.html.erb", force: true
     copy_file "messages/new.html.erb", "app/views/messages/new.html.erb", force: true
     copy_file "messages/message.html.erb", "app/views/messages/_message.html.erb", force: true
+    copy_file "messages/_typing_bubbles.html.erb", "app/views/messages/_typing_bubbles.html.erb", force: true
+  end
+
+  def create_stylesheets
+    copy_file "assets/appchat.tailwind.css", "app/assets/stylesheets/appchat.tailwind.css", force: true
+  end
+
+  def create_stimulus_controllers
     copy_file "javascript/chat_message_controller.js", "app/javascript/controllers/chat_message_controller.js"
+    copy_file "javascript/speech_to_text_controller.js", "app/javascript/controllers/speech_to_text_controller.js"
   end
 
   def copy_models
@@ -61,8 +78,14 @@ class AppchatGenerator < Rails::Generators::Base
     copy_file "get_ai_response_job.rb", "app/jobs/get_ai_response_job.rb"
   end
 
-  def create_messages_controller
-    copy_file "messages_controller.rb", "app/controllers/messages_controller.rb", force: true
+  def swap_class_in_layout
+    layout_file = "app/views/layouts/application.html.erb"
+
+    if File.exist?(layout_file)
+      gsub_file layout_file, /\bmt-28\b/, "mt-10"
+    else
+      say "Layout file not found. No changes were made.", :red
+    end
   end
 
   def show_art

data/lib/generators/appchat/templates/assets/appchat.tailwind.css

@@ -0,0 +1,76 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+
+
+@layer components {
+
+  .typing {
+    background-color: #e0e0e0;
+    display: block;
+    width: 60px;
+    height: 40px;
+    border-radius: 20px;
+    margin: 0 1rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .circle {
+    display: block;
+    height: 10px;
+    width: 10px;
+    border-radius: 50%;
+    background-color: #8d8d8d;
+    margin: 3px;
+  }
+
+  .circle.scaling {
+    animation: typing 1000ms ease-in-out infinite;
+    animation-delay: 3600ms;
+  }
+
+  .circle:nth-child(1) {
+    animation-delay: 0ms;
+  }
+
+  .circle:nth-child(2) {
+    animation-delay: 333ms;
+  }
+
+  .circle:nth-child(3) {
+    animation-delay: 666ms;
+  }
+
+  @keyframes typing {
+    0% {
+      transform: scale(1);
+    }
+    33% {
+      transform: scale(1);
+    }
+    50% {
+      transform: scale(1.4);
+    }
+    100% {
+      transform: scale(1);
+    }
+  }
+
+  #microphone-button.recording {
+    animation: flash 1s infinite;
+  }
+
+  @keyframes flash {
+    0%, 100% {
+      opacity: 80;
+      background-color: #EE4B2B; /* Ensure the color remains during the flash */
+    }
+    50% {
+      opacity: 0.5;
+      background-color: #EE4B2B; /* Ensure the color remains during the flash */
+    }
+  }
+}

data/lib/generators/appchat/templates/chats/chat.html.erb

@@ -1,5 +1,5 @@
 <%= link_to chat, data: { turbo_frame: :chat } do %>
-<div class="w-full text-gray-100 hover:text-green-500">
-  <%= chat&.messages&.first&.content || "New AI chat conversation" %>
-</div>
+  <div class="w-full text-gray-100 hover:text-green-500">
+    <%= chat&.messages&.first&.content&.truncate(45) || "New AI chat conversation" %>
+  </div>
 <% end %>

data/lib/generators/appchat/templates/chats/index.html.erb

@@ -3,20 +3,23 @@
     background-color: black;
   }
 </style>
+
 <div class="flex w-full">
-<%= turbo_stream_from :chats %>
-<div class="max-w-sm w-full h-full flex flex-col gap-4 p-2 w-full flex-shrink-0 bg-[#2e2e2e] rounded-lg" id="chats">
-  <%= link_to  chats_path, data: { turbo_method: :post, turbo_frame: :chat }, class: "flex gap-2 justify-center items-center bg-gray-500 text-gray-100 rounded-lg p-2 text-center mr-auto" 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">
-      <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
-    </svg>
-    <span> Create Chat </span>
-  <% end %>
-  <% @chats.each do |chat| %>
-    <%= render "chat", chat: chat %>
-  <% end %>
-</div>
-<div class="w-full ml-4">
-  <%= turbo_frame_tag :chat, src: ( chat_path(@chats.first) if @chats.any? )  %>
-</div>
+  <%= turbo_stream_from :chats %>
+  <div class="max-w-sm w-full h-full flex flex-col gap-4 p-2 w-full flex-shrink-0 bg-[#2e2e2e] rounded-lg" id="chats">
+    <%= link_to  chats_path, data: { turbo_method: :post, turbo_frame: :chat }, class: "flex gap-2 justify-center items-center bg-gray-500 text-gray-100 rounded-lg p-2 text-center mr-auto" 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">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+      </svg>
+      <span> Create Chat </span>
+    <% end %>
+    <div class="h-[70vh] overflow-y-hidden overflow-y-scroll">
+      <% @chats.each do |chat| %>
+        <%= render "chat", chat: chat %>
+      <% end %>
+    </div>
+  </div>
+  <div class="w-full ml-4">
+    <%= turbo_frame_tag :chat, src: ( chat_path(@chats.first) if @chats.any? )  %>
+  </div>
 </div>

data/lib/generators/appchat/templates/chats_controller.rb

@@ -3,7 +3,7 @@ class ChatsController < ApplicationController
     @chat = Chat.find(params[:id])
   end
   def index
-    @chats = Chat.all
+    @chats = Chat.all.reverse
   end
   def create
     @chat = Chat.create

data/lib/generators/appchat/templates/javascript/speech_to_text_controller.js

@@ -0,0 +1,65 @@
+import { Controller } from "@hotwired/stimulus";
+
+// Connects to data-controller="speech-to-text"
+export default class extends Controller {
+  static targets = ["microphoneButton", "chatInput"]
+
+  connect() {
+    const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+    if (SpeechRecognition) {
+      this.microphoneButtonTarget.classList.remove("hidden")
+    } else {
+      return
+    }
+
+    this.recognition = new SpeechRecognition();
+    this.recognition.continuous = false;
+    this.recognition.lang = 'en-US';
+    this.recognition.interimResults = false;
+    this.recognition.maxAlternatives = 1;
+
+    this.recognition.onresult = this.handleResult.bind(this);
+    this.recognition.onerror = this.handleError.bind(this);
+    this.recognition.onstart = this.handleStart.bind(this);
+    this.recognition.onend = this.handleEnd.bind(this);
+
+    this.isRecognizing = false; // Track if recognition is active
+  }
+
+  startRecognition(event) {
+    event.preventDefault();
+    if (this.isRecognizing) {
+      console.log("Recognition already started");
+      return;
+    }
+
+    try {
+      this.recognition.start();
+      this.isRecognizing = true;
+    } catch (error) {
+      console.error("Recognition start failed:", error);
+      this.isRecognizing = false;
+    }
+  }
+
+  handleStart() {
+    this.microphoneButtonTarget.classList.add("recording");
+  }
+
+  handleEnd() {
+    this.microphoneButtonTarget.classList.remove("recording");
+    this.isRecognizing = false;
+  }
+
+  handleResult(event) {
+    const transcript = event.results[0][0].transcript;
+    this.chatInputTarget.value += ` ${transcript}`;
+    this.recognition.stop();
+  }
+
+  handleError(event) {
+    console.error(`Error occurred in recognition: ${event.error}`);
+    this.isRecognizing = false;
+    alert(`Speech recognition error: ${event.error}`);
+  }
+}

data/lib/generators/appchat/templates/messages/_typing_bubbles.html.erb

@@ -0,0 +1,5 @@
+<div class="typing">
+  <span class="circle scaling"></span>
+  <span class="circle scaling"></span>
+  <span class="circle scaling"></span>
+</div>

data/lib/generators/appchat/templates/messages/message.html.erb

@@ -1,3 +1,7 @@
 <div data-chat-message-target="message" id="<%= dom_id(message) %>" class="bg-gray-200 text-gray-900 shadow-lg p-4 rounded-lg">
-  <%= message.content %>
+  <% if message.content? %>
+    <%=  message.content %>
+  <% else %>
+    <%= render 'messages/typing_bubbles' %>
+  <% end %>
 </div>

data/lib/generators/appchat/templates/messages/new.html.erb

@@ -1,16 +1,39 @@
 <%= turbo_frame_tag :new_message do %>
   <%= form_with model: @chat.messages.new, url: messages_path(chat_id: @chat.id) do |f| %>
-   <div class="w-full flex items-center gap-2"> 
-   <div class="flex flex-col w-full">
-      <%= f.label :content, "What do you want to ask?" %>
-      <%= f.text_area :content, class: "w-full" %>
-    </div>
-    <%= button_tag class: "mt-4 flex p-2 rounded-lg bg-gradient-to-r from-indigo-500 to-blue-500 text-blue-100 font-semibold" do %>
-      Send Message
-      <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="M6 12 3.269 3.125A59.769 59.769 0 0 1 21.485 12 59.768 59.768 0 0 1 3.27 20.875L5.999 12Zm0 0h7.5" />
-      </svg>
-    <% end %>
-    </div>
+   <div class="w-full flex items-center gap-2 mt-4">
+      <div class="flex flex-col w-full" data-controller="speech-to-text">
+        <div class="relative w-full">
+          <%= f.text_area :content, class: "w-full pr-32 rounded-lg", "data-speech-to-text-target":"chatInput" %>
+          <button id="microphone-button"
+            data-speech-to-text-target="microphoneButton"
+            data-speech-to-text-recording-class="recording"
+            data-action="click->speech-to-text#startRecognition"
+            class="absolute right-14 top-1/2 transform -translate-y-1/2 p-1 mr-2 bg-gray-200 rounded-full hidden">
+            <svg
+              fill="#000000"
+              height="40px"
+              width="40px"
+              version="1.1"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 512 512"
+              xmlns:xlink="http://www.w3.org/1999/xlink"
+              enable-background="new 0 0 512 512">
+              <g>
+                <g>
+                  <path d="m439.5,236c0-11.3-9.1-20.4-20.4-20.4s-20.4,9.1-20.4,20.4c0,70-64,126.9-142.7,126.9-78.7,0-142.7-56.9-142.7-126.9 0-11.3-9.1-20.4-20.4-20.4s-20.4,9.1-20.4,20.4c0,86.2 71.5,157.4 163.1,166.7v57.5h-23.6c-11.3,0-20.4,9.1-20.4,20.4 0,11.3 9.1,20.4 20.4,20.4h88c11.3,0 20.4-9.1 20.4-20.4 0-11.3-9.1-20.4-20.4-20.4h-23.6v-57.5c91.6-9.3 163.1-80.5 163.1-166.7z"/>
+                  <path d="m256,323.5c51,0 92.3-41.3 92.3-92.3v-127.9c0-51-41.3-92.3-92.3-92.3s-92.3,41.3-92.3,92.3v127.9c0,51 41.3,92.3 92.3,92.3zm-52.3-220.2c0-28.8 23.5-52.3 52.3-52.3s52.3,23.5 52.3,52.3v127.9c0,28.8-23.5,52.3-52.3,52.3s-52.3-23.5-52.3-52.3v-127.9z"/>
+                </g>
+              </g>
+            </svg>
+          </button>
+          <%= button_tag class: "absolute top-1 right-0 flex p-2 rounded-lg text-gray-900 font-semibold" do %>
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-10">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M6 12 3.269 3.125A59.769 59.769 0 0 1 21.485 12 59.768 59.768 0 0 1 3.27 20.875L5.999 12Zm0 0h7.5" />
+            </svg>
+          <% end %>
+        </div>
+      </div>
+
+      </div>
   <% end %>
 <% end %>

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: appchat
 version: !ruby/object:Gem::Version
-  version: 0.0.3
+  version: 0.0.5
 platform: ruby
 authors:
 - hackliteracy
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-08-10 00:00:00.000000000 Z
+date: 2024-08-29 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -73,12 +73,15 @@ extensions: []
 extra_rdoc_files: []
 files:
 - lib/generators/appchat/appchat_generator.rb
+- lib/generators/appchat/templates/assets/appchat.tailwind.css
 - lib/generators/appchat/templates/chats/chat.html.erb
 - lib/generators/appchat/templates/chats/index.html.erb
 - lib/generators/appchat/templates/chats/show.html.erb
 - lib/generators/appchat/templates/chats_controller.rb
 - lib/generators/appchat/templates/get_ai_response_job.rb
 - lib/generators/appchat/templates/javascript/chat_message_controller.js
+- lib/generators/appchat/templates/javascript/speech_to_text_controller.js
+- lib/generators/appchat/templates/messages/_typing_bubbles.html.erb
 - lib/generators/appchat/templates/messages/index.html.erb
 - lib/generators/appchat/templates/messages/message.html.erb
 - lib/generators/appchat/templates/messages/new.html.erb
@@ -105,7 +108,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.5.11
+rubygems_version: 3.5.17
 signing_key:
 specification_version: 4
 summary: Appchat makes it easy to add a chat to your app