tramway 2.3 → 2.3.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c7533942aab1b11f547036f0ff9e819c9162d30c3cc11221e578f175d9b3215b
-  data.tar.gz: 52f17dda1d18d9c1c93f91e3a5a372a7a0b38957e220bbdc0fc25f7d6ff3c5d1
+  metadata.gz: 0062ba6e33495a79ef0d2dc0fcca348e7de9ed5a892855d800bc7de45022205d
+  data.tar.gz: 350731c7514a5b6f3d513635c2397f65a52f81cb50a05ff0e198af191a09b75d
 SHA512:
-  metadata.gz: b7e1e85e67d07628c99411d29945c7cc102dce00278abc83c88999e8880ef11082a3a304ba792f6daca306c8ef65cdffbeaabfcabf523016ed3fb1d9c42a35cc
-  data.tar.gz: dba51b7a03411bac7f6cbe4b7b1e4049a13f9863e3a943ecc0fce58cae17471b29c6b14cd24d4aef6f4e7a41d44afe06bccd8d6fd6e2801d72c0550bb205a92d
+  metadata.gz: 4c5ad624bc5aa06c742ac6a02cbaea4accfe21028ec422f5818514a3bb87b854f06e830986f35d767a2fe82f06f0d3ab433e615651522e8ab332d46925e54c58
+  data.tar.gz: ffd97ea24ee55e590368a3a34beafcb440010358a65db27d0e231629225bcd05f0d0f22987c38f6dc7ebf97193ebc6f26ba76628280b2e1e92169f1b20dd69fa

data/README.md

@@ -884,9 +884,28 @@ message fields like `text`, `data`, or `sent_at` are forwarded to `tramway/chats
   send_message_path: chat_messages_path %>
 ```
 
+
 If you do not want to render the message form, pass `message_form: nil`. When the form is present, `send_message_path` is
 required and the helper will generate the correct POST form.
 
+To append messages to an already-rendered `tramway_chat` stream, use `tramway_chat_append_message`.
+The method is mixed into controllers and ActiveRecord models by Tramway and expects:
+- `chat_id:` — the same value used in `tramway_chat chat_id:`
+- `message_type:` — only `:sent` or `:received` (raises `ArgumentError` otherwise)
+- `text:` — message content
+- `sent_at:` — message timestamp
+
+```ruby
+tramway_chat_append_message(
+  chat_id: 'support-chat',
+  message_type: :received,
+  text: 'We got your request',
+  sent_at: Time.current
+)
+```
+
+It broadcasts with `target: 'messages'` and renders the `tramway/chats/message` partial so the message appears in the live chat.
+
 ### Tramway Table Component
 
 Tramway provides a responsive, tailwind-styled table with light and dark themes. Use the `tramway_table`, `tramway_row`, and

data/app/components/tramway/chat_component.html.haml

@@ -1,28 +1,77 @@
 = helpers.turbo_stream_from chat_id, 'messages'
 
-.flex-1.min-h-0.flex.flex-col
-  #chat.mx-auto.flex.flex-1.flex-col.w-full.rounded-2xl.border.shadow-sm.ring-gray-700.md:p-4.border-gray-100.min-h-0.overflow-hidden{ data: { controller: 'chat' } }
-    .flex-1.min-h-0.overflow-y-auto.p-2.md:p-6.space-y-2.md:space-y-4.md:rounded-xl.rounded-t-xl#messages{ data: { chat_target: 'messages' }, class: 'text-gray-100 bg-gray-800/60' }
-      - messages.each do |message|
-        = component "tramway/chats/message", **message
-      - if disabled?
-        = inline_svg 'icons/dots.svg', class: 'w-8 h-8 text-gray-500 mx-auto my-4'
-    
-    - if message_form.present?
-      .shrink-0.border-gray-200.md:pt-2.border-gray-700
-        = form_for message_form, url: send_message_path, method: :post, html: { class: 'flex items-center md:gap-1' } do |f|
-          - waiting_placeholder = t('chat.placeholders.waiting')
-          - typing_placeholder = t('chat.placeholders.type')
-          = f.text_field :text,
-            class: 'flex-1 md:rounded-full rounded-bl-2xl md:border border-gray-300 px-4 py-2 text-sm text-gray-900 shadow-sm placeholder:text-gray-400 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200 disabled:cursor-not-allowed disabled:bg-gray-100 border-gray-600 bg-gray-800 text-white focus:border-blue-400 focus:ring-blue-500/30',
-            placeholder: send_messages_enabled ? typing_placeholder : waiting_placeholder,
-            data: { chat_target: 'input' },
-            disabled: !send_messages_enabled
-
-          = f.hidden_field :chat_id, value: chat_id
-
-          - options.each do |(key, value)|
-            = f.hidden_field key, value: value
-
-          = f.submit '🡩',
-            class: 'md:rounded-full bg-blue-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200 bg-blue-500 hover:bg-blue-400 cursor-pointer'
+#chat.flex.flex-1.h-full.w-full.min-h-0.min-w-0.flex-col
+  #messages.flex.flex-col.flex-1.min-h-0.overflow-y-auto.p-2.md:p-6.space-y-2.md:space-y-4.md:rounded-xl.rounded-t-xl{ class: 'text-gray-100 bg-gray-800/60' }
+    - messages.each do |message|
+      = component "tramway/chats/message", **message
+    - if disabled?
+      = inline_svg 'icons/dots.svg', class: 'w-8 h-8 text-gray-500 mx-auto my-4'
+
+  - if message_form.present?
+    .shrink-0.border-gray-200.md:pt-2.border-gray-700
+      = form_for message_form, url: send_message_path, as: :message, method: :post, html: { class: 'flex items-center md:gap-1' } do |f|
+        - waiting_placeholder = t('tramway.chat.placeholders.waiting')
+        - typing_placeholder = t('tramway.chat.placeholders.type')
+        = f.text_field :text,
+          class: 'flex-1 md:rounded-full rounded-bl-2xl md:border border-gray-300 px-4 py-2 text-sm text-gray-900 shadow-sm placeholder:text-gray-400 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200 disabled:cursor-not-allowed disabled:bg-gray-100 border-gray-600 bg-gray-800 text-white focus:border-blue-400 focus:ring-blue-500/30',
+          placeholder: send_messages_enabled ? typing_placeholder : waiting_placeholder,
+          disabled: !send_messages_enabled
+
+        = f.hidden_field :chat_id, value: chat_id
+
+        - options.each do |(key, value)|
+          = f.hidden_field key, value: value
+
+        = f.submit '🡩',
+          class: 'md:rounded-full bg-blue-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200 bg-blue-500 hover:bg-blue-400 cursor-pointer'
+
+:javascript
+  (() => {
+    const setupChatScroll = () => {
+      const messages = document.getElementById('messages');
+      if (!messages || messages.dataset.chatScrollInitialized === 'true') return;
+
+      const scrollToBottom = () => {
+        messages.scrollTop = messages.scrollHeight;
+      };
+
+      scrollToBottom();
+
+      const observer = new MutationObserver(scrollToBottom);
+      observer.observe(messages, { childList: true });
+
+      messages.dataset.chatScrollInitialized = 'true';
+    };
+
+    const setupChatInputClear = () => {
+      const forms = document.querySelectorAll('form[action][method]');
+
+      forms.forEach((form) => {
+        if (form.dataset.chatInputClearInitialized === 'true') return;
+
+        const textInput = form.querySelector('input[name="message[text]"]');
+        if (!textInput) return;
+
+        form.addEventListener('turbo:submit-end', (event) => {
+          if (event.detail.success) {
+            textInput.value = '';
+          }
+        });
+
+        form.dataset.chatInputClearInitialized = 'true';
+      });
+    };
+
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', () => {
+        setupChatScroll();
+        setupChatInputClear();
+      }, { once: true });
+    } else {
+      setupChatScroll();
+      setupChatInputClear();
+    }
+
+    document.addEventListener('turbo:load', setupChatScroll);
+    document.addEventListener('turbo:load', setupChatInputClear);
+  })();

data/app/components/tramway/native_text_component.html.haml

@@ -1,3 +1,2 @@
-- lines&.each do |line|
-  %p{ class: text_class }
-    = line
+%div
+  = rendered_html

data/app/components/tramway/native_text_component.rb

@@ -1,27 +1,148 @@
 # frozen_string_literal: true
 
+require 'erb'
+
 module Tramway
   # Displays text with size-based utility classes.
   class NativeTextComponent < Tramway::BaseComponent
+    URL_REGEX = %r{https?://[^\s<]+}
+    MAX_URL_LENGTH = 41
+    HEADER_REGEX = /\A(#{Regexp.escape('#')}{1,6})\s+(.+)\z/
+    LIST_ITEM_REGEX = /\A[-*]\s+(.+)\z/
+    HEADER_CLASSES = {
+      1 => 'text-4xl font-bold leading-tight mt-4 mb-2',
+      2 => 'text-3xl font-bold leading-tight mt-4 mb-2',
+      3 => 'text-2xl font-semibold leading-snug mt-3 mb-2',
+      4 => 'text-xl font-semibold leading-snug mt-3 mb-2',
+      5 => 'text-lg font-semibold leading-snug mt-2 mb-1',
+      6 => 'text-base font-semibold leading-snug mt-2 mb-1'
+    }.freeze
+
     option :text
     option :size, optional: true, default: -> { :middle }
     option :klass, optional: true, default: -> { '' }
 
-    def lines
-      @lines ||= text&.split("\n")
+    def rendered_html
+      # Safe because this is an empty static string literal, not user-controlled content.
+      return ''.html_safe if text.blank?
+
+      helpers.safe_join(rendered_blocks)
     end
 
     def text_class
-      case size
-      when :small
-        'text-sm'
-      when :large
-        'text-lg'
-      when :middle
-        'text-base'
-      else
-        'md:text-sm lg:text-base'
-      end + " #{klass}"
+      { small: 'text-sm', large: 'text-lg', middle: 'text-base' }.fetch(size, 'md:text-sm lg:text-base') + " #{klass}"
+    end
+
+    private
+
+    # rubocop:disable Metrics/AbcSize
+    # rubocop:disable Metrics/MethodLength
+    def rendered_blocks
+      blocks = []
+      list_items = []
+
+      text.split("\n").each do |line|
+        stripped_line = line.strip
+
+        if stripped_line.blank?
+          flush_list_items(blocks, list_items)
+          next
+        end
+
+        header_match = stripped_line.match(HEADER_REGEX)
+        if header_match
+          flush_list_items(blocks, list_items)
+          blocks << helpers.content_tag(
+            "h#{header_match[1].length}",
+            render_inline_markdown(header_match[2]),
+            class: header_class(header_match[1].length)
+          )
+          next
+        end
+
+        list_match = stripped_line.match(LIST_ITEM_REGEX)
+        if list_match
+          list_items << helpers.content_tag(:li, render_inline_markdown(list_match[1]),
+                                            class: "#{text_class} marker:hidden")
+          next
+        end
+
+        flush_list_items(blocks, list_items)
+        blocks << helpers.content_tag(:p, render_inline_markdown(stripped_line), class: "#{text_class} my-1")
+      end
+
+      flush_list_items(blocks, list_items)
+      blocks
+    end
+    # rubocop:enable Metrics/AbcSize
+    # rubocop:enable Metrics/MethodLength
+
+    def flush_list_items(blocks, list_items)
+      return if list_items.empty?
+
+      blocks << helpers.content_tag(:ul, helpers.safe_join(list_items), class: "list-none pl-5 my-2 #{klass}")
+      list_items.clear
+    end
+
+    def header_class(level)
+      "#{HEADER_CLASSES.fetch(level)} #{klass}".strip
+    end
+
+    def render_inline_markdown(content)
+      escaped_content = ERB::Util.html_escape(content)
+      with_bold = escaped_content.gsub(/\*\*(.+?)\*\*/, '<strong>\\1</strong>')
+      with_italics = with_bold.gsub(/(?<!\*)\*(?!\*)(.+?)(?<!\*)\*(?!\*)/, '<em>\\1</em>')
+      with_underscored_italics = with_italics.gsub(/(?<!_)_(?!_)(.+?)(?<!_)_(?!_)/, '<em>\\1</em>')
+      # Safe because user input has already been escaped above and only controlled tags are introduced.
+      # rubocop:disable Rails/OutputSafety
+      linkified(with_underscored_italics).html_safe
+    end
+
+    # rubocop:disable Metrics/MethodLength
+    # rubocop:disable Metrics/AbcSize
+    def linkified(content)
+      fragments = []
+      current_index = 0
+
+      content.to_enum(:scan, URL_REGEX).map do
+        match = Regexp.last_match
+        matched_url = match[0]
+        url, trailing = strip_trailing_punctuation(matched_url)
+
+        # Safe because this fragment is sliced from `content`, which was already HTML-escaped.
+
+        fragments << content[current_index...match.begin(0)].html_safe # rubocop:disable Rails/OutputSafety
+        fragments << helpers.link_to(
+          shorten(url),
+          url,
+          target: '_blank',
+          rel: 'noopener noreferrer',
+          class: 'text-blue-400 hover:underline'
+        )
+        # Safe because `trailing` can only contain stripped URL punctuation (.,!?;:).
+        fragments << trailing.html_safe if trailing.present? # rubocop:disable Rails/OutputSafety
+        current_index = match.end(0)
+      end
+
+      # Safe because this tail fragment also comes from the already escaped `content` string.
+      fragments << content[current_index..].html_safe if current_index < content.length
+      # rubocop:enable Rails/OutputSafety
+
+      helpers.safe_join(fragments)
+    end
+    # rubocop:enable Metrics/AbcSize
+    # rubocop:enable Metrics/MethodLength
+
+    def strip_trailing_punctuation(url)
+      stripped_url = url.sub(/[.,!?;:]+\z/, '')
+      trailing = url.delete_prefix(stripped_url)
+      [stripped_url, trailing]
+    end
+
+    def shorten(url)
+      return url if url.length <= MAX_URL_LENGTH
+
+      "#{url[0...MAX_URL_LENGTH]}..."
     end
   end
 end

data/app/views/tramway/chats/_message.html.haml

@@ -0,0 +1,4 @@
+= component 'tramway/chats/message',
+  type:,
+  text:,
+  sent_at:

data/config/tailwind.config.js

@@ -48,6 +48,7 @@ module.exports = {
     'hover:bg-blue-400',
     'text-gray-100',
     'text-gray-400',
+    'text-blue-400',
     'placeholder:text-gray-400',
     'focus:border-blue-400',
     'focus:ring-blue-500/30',
@@ -85,6 +86,7 @@ module.exports = {
     'bg-blue-600',
     'bg-gray-800/60',
     'min-h-0',
+    'min-w-0',
     'flex-1',
     'overflow-y-auto',
     'overflow-hidden',
@@ -102,6 +104,9 @@ module.exports = {
     'rounded-bl-2xl',
     'md:border',
     'md:gap-1',
+    'hover:underline',
+    'marker:hidden',
+    'list-none',
 
     // === Custom table layout utilities ===
     'div-table',

data/docs/AGENTS.md

@@ -132,6 +132,10 @@ When you need chat UI, use the `tramway_chat` helper. Pass `chat_id`, `messages`
 Each message must include `:id` and a `:type` of `:sent` or `:received`, and other keys (like `:text`, `:data`, `:sent_at`)
 are forwarded to `tramway/chats/message_component`. Use `message_form: nil` when you only need read-only chat rendering.
 
+For live updates to a rendered `tramway_chat`, use `tramway_chat_append_message(chat_id:, message_type:, text:, sent_at:)`.
+This method is included in all controllers and ActiveRecord models. `message_type` must be `:sent` or `:received`, otherwise
+it raises `ArgumentError`. `chat_id` must match the stream id used in `tramway_chat`.
+
 ### Rule 9
 If page `create` or `update` is configured for an entity, use Tramway Form pattern for forms. Visible fields are configured via `form_fields` method.
 
@@ -448,6 +452,18 @@ scope :for_role, -> (role) { where role: role }
 ### Rule 28
 In case, you need to make a one link in tramway_table on each row. Use `tramway_row href: your_link` instead of putting the like inside a cell.
 
+### Rule 29
+Always use tramway decorated objects in views.
+
+### Rule 30
+For Tailwind classes with `/`, `[`, `]` characters use `{ class: 'here is the complicated class' }` in HAML.
+
+### Rule 31
+Always `tramway_decorate` and `tramway_form` for creating these types of objects. Don't use decorator and form classes for this.
+
+### Rule 32
+In Tramway Decorators, use `delegate_attributes` method instead of `delegate :something, to: :object`
+
 ## Controller Patterns
 
 - Keep actions short and explicit with guard clauses.

data/lib/tramway/chats/broadcast.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Tramway
+  module Chats
+    # This module provides a method to broadcast new chat messages to a Tramway Chat
+    module Broadcast
+      MESSAGE_TYPES = %i[sent received].freeze
+
+      def tramway_chat_append_message(chat_id:, type:, text:, sent_at:)
+        raise ArgumentError, 'message_type must be :sent or :received' unless MESSAGE_TYPES.include?(type.to_sym)
+
+        Turbo::StreamsChannel.broadcast_append_to [chat_id, 'messages'],
+                                                  target: 'messages',
+                                                  partial: 'tramway/chats/message',
+                                                  locals: { type:, text:, sent_at: }
+      end
+    end
+  end
+end

data/lib/tramway/engine.rb

@@ -12,6 +12,7 @@ module Tramway
       load_decorator_helper
       load_form_helper
       load_routes_helper
+      load_chats_broadcast
       configure_pagination if Tramway.config.pagination[:enabled]
     end
 
@@ -67,6 +68,16 @@ module Tramway
       end
     end
 
+    def load_chats_broadcast
+      ActiveSupport.on_load(:action_controller) do |loaded_class|
+        loaded_class.include Tramway::Chats::Broadcast
+      end
+
+      ActiveSupport.on_load(:active_record) do |loaded_class|
+        loaded_class.include Tramway::Chats::Broadcast
+      end
+    end
+
     def configure_pagination
       ActiveSupport.on_load(:action_controller) do
         # Detecting tramway views path

data/lib/tramway/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Tramway
-  VERSION = '2.3'
+  VERSION = '2.3.1'
 end

data/lib/tramway.rb

@@ -6,6 +6,7 @@ require 'tramway/engine'
 require 'tramway/base_decorator'
 require 'tramway/base_form'
 require 'tramway/config'
+require 'tramway/chats/broadcast'
 require 'tramway/views/form_builder'
 require 'view_component/compiler'
 require 'view_component/engine'

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: tramway
 version: !ruby/object:Gem::Version
-  version: '2.3'
+  version: 2.3.1
 platform: ruby
 authors:
 - kalashnikovisme
@@ -243,6 +243,7 @@ files:
 - app/views/kaminari/_page.html.haml
 - app/views/kaminari/_paginator.html.haml
 - app/views/kaminari/_prev_page.html.haml
+- app/views/tramway/chats/_message.html.haml
 - app/views/tramway/entities/_form.html.haml
 - app/views/tramway/entities/_list.html.haml
 - app/views/tramway/entities/edit.html.haml
@@ -261,6 +262,7 @@ files:
 - lib/tramway.rb
 - lib/tramway/base_decorator.rb
 - lib/tramway/base_form.rb
+- lib/tramway/chats/broadcast.rb
 - lib/tramway/config.rb
 - lib/tramway/configs/entities/page.rb
 - lib/tramway/configs/entities/route.rb