aeno 0.0.3

data/app/components/aeno/primitives/input_text_area_ai/component.rb

@@ -0,0 +1,47 @@
+# frozen_string_literal: true
+
+module Aeno::Primitives::InputTextAreaAi
+  class Component < ::Aeno::FormBuilder::BaseComponent
+    prop :rows, description: "Number of visible rows", default: -> { 6 }
+    prop :ai_url, description: "AI endpoint URL"
+    prop :ai_prompt, description: "AI prompt template", optional: true
+    prop :system_prompts, description: "System prompts array", default: -> { [] }
+    prop :model, description: "AI model to use", optional: true
+    prop :ai_button_label, description: "AI button label", default: -> { "AI Assist" }
+    prop :ai_button_position, description: "AI button position", default: -> { :bottom_right }
+
+    examples("Input Text Area AI", description: "Text area with AI assistance") do |b|
+      b.example(:default, title: "Default") do |e|
+        e.preview name: "content", ai_url: "/api/ai/complete"
+      end
+
+      b.example(:custom_label, title: "Custom Button") do |e|
+        e.preview name: "description", ai_url: "/api/ai", ai_button_label: "Generate"
+      end
+    end
+
+    def stimulus_values
+      values = {
+        "#{controller_name}-ai-url-value" => ai_url,
+        "#{controller_name}-ai-button-label-value" => ai_button_label
+      }
+      values["#{controller_name}-ai-prompt-value"] = ai_prompt if ai_prompt.present?
+      values["#{controller_name}-system-prompts-value"] = system_prompts.to_json if system_prompts.any?
+      values["#{controller_name}-model-value"] = model if model.present?
+      values
+    end
+
+    def button_position_classes
+      case ai_button_position.to_sym
+      when :top_right
+        "top-2 right-2"
+      when :top_left
+        "top-2 left-2"
+      when :bottom_left
+        "bottom-2 left-2"
+      else
+        "bottom-2 right-2"
+      end
+    end
+  end
+end

data/app/components/aeno/primitives/input_text_area_ai/controller.js

@@ -0,0 +1,198 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static targets = [
+    "textarea",
+    "aiButton",
+    "buttonIcon",
+    "buttonSpinner",
+    "buttonLabel",
+    "streamingIndicator"
+  ];
+
+  static values = {
+    aiUrl: String,
+    aiPrompt: String,
+    systemPrompts: { type: Array, default: [] },
+    model: String,
+    aiButtonLabel: { type: String, default: "AI Assist" },
+    generating: { type: Boolean, default: false }
+  };
+
+  connect() {
+    this.abortController = null;
+  }
+
+  disconnect() {
+    this.cancelGeneration();
+  }
+
+  async generateAi() {
+    if (this.generatingValue) {
+      this.cancelGeneration();
+      return;
+    }
+
+    const currentText = this.textareaTarget.value;
+
+    const prompt = this.aiPromptValue
+      ? this.aiPromptValue.replace("{{content}}", currentText)
+      : currentText;
+
+    if (!prompt.trim()) {
+      this.textareaTarget.focus();
+      return;
+    }
+
+    this.startGenerating();
+
+    try {
+      this.abortController = new AbortController();
+
+      const body = {
+        prompt: prompt
+      };
+
+      if (this.systemPromptsValue.length > 0) {
+        body.system_prompts = this.systemPromptsValue;
+      }
+
+      if (this.modelValue) {
+        body.model = this.modelValue;
+      }
+
+      const response = await fetch(this.aiUrlValue, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "Accept": "text/event-stream",
+          "X-CSRF-Token": this.csrfToken()
+        },
+        body: JSON.stringify(body),
+        signal: this.abortController.signal
+      });
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+
+      const contentType = response.headers.get("content-type");
+
+      if (contentType?.includes("text/event-stream") || contentType?.includes("application/x-ndjson")) {
+        await this.handleStreamingResponse(response);
+      } else {
+        await this.handleJsonResponse(response);
+      }
+
+    } catch (error) {
+      if (error.name === "AbortError") {
+        console.log("Generation cancelled");
+      } else {
+        console.error("AI generation failed:", error);
+        this.dispatch("error", { detail: { message: error.message } });
+      }
+    } finally {
+      this.stopGenerating();
+    }
+  }
+
+  async handleStreamingResponse(response) {
+    const reader = response.body.getReader();
+    const decoder = new TextDecoder();
+
+    const originalContent = this.textareaTarget.value;
+    const separator = originalContent.trim() ? "\n\n" : "";
+    let generatedContent = "";
+
+    try {
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+
+        const chunk = decoder.decode(value, { stream: true });
+        const lines = chunk.split("\n");
+
+        for (const line of lines) {
+          if (line.startsWith("data: ")) {
+            const data = line.slice(6);
+
+            if (data === "[DONE]") {
+              continue;
+            }
+
+            try {
+              const parsed = JSON.parse(data);
+              const content = parsed.content || parsed.text || parsed.delta?.content || "";
+
+              if (content) {
+                generatedContent += content;
+                this.textareaTarget.value = originalContent + separator + generatedContent;
+                this.scrollTextareaToBottom();
+              }
+            } catch {
+              if (data.trim() && data !== "[DONE]") {
+                generatedContent += data;
+                this.textareaTarget.value = originalContent + separator + generatedContent;
+                this.scrollTextareaToBottom();
+              }
+            }
+          }
+        }
+      }
+    } catch (error) {
+      if (error.name !== "AbortError") {
+        throw error;
+      }
+    }
+
+    this.dispatch("complete", { detail: { content: generatedContent } });
+  }
+
+  async handleJsonResponse(response) {
+    const data = await response.json();
+    const content = data.content || data.text || data.response || "";
+
+    if (content) {
+      const originalContent = this.textareaTarget.value;
+      const separator = originalContent.trim() ? "\n\n" : "";
+      this.textareaTarget.value = originalContent + separator + content;
+      this.dispatch("complete", { detail: { content } });
+    }
+  }
+
+  cancelGeneration() {
+    if (this.abortController) {
+      this.abortController.abort();
+      this.abortController = null;
+    }
+  }
+
+  startGenerating() {
+    this.generatingValue = true;
+    this.aiButtonTarget.disabled = false;
+    this.buttonIconTarget.classList.add("hidden");
+    this.buttonSpinnerTarget.classList.remove("hidden");
+    this.buttonLabelTarget.textContent = "Cancel";
+    this.streamingIndicatorTarget.classList.remove("hidden");
+    this.textareaTarget.readOnly = true;
+  }
+
+  stopGenerating() {
+    this.generatingValue = false;
+    this.aiButtonTarget.disabled = false;
+    this.buttonIconTarget.classList.remove("hidden");
+    this.buttonSpinnerTarget.classList.add("hidden");
+    this.buttonLabelTarget.textContent = this.aiButtonLabelValue;
+    this.streamingIndicatorTarget.classList.add("hidden");
+    this.textareaTarget.readOnly = false;
+    this.abortController = null;
+  }
+
+  scrollTextareaToBottom() {
+    this.textareaTarget.scrollTop = this.textareaTarget.scrollHeight;
+  }
+
+  csrfToken() {
+    return document.querySelector('meta[name="csrf-token"]')?.content || "";
+  }
+}

data/app/components/aeno/primitives/input_text_area_ai/styles.css

@@ -0,0 +1,91 @@
+/* Input Text Area AI */
+.cp-input-text-area-ai {
+}
+
+.cp-input-text-area-ai__container {
+  position: relative;
+}
+
+.cp-input-text-area-ai__textarea {
+  display: block;
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  padding-right: 6rem;
+  font-size: 0.875rem;
+  color: var(--ui-input-fg);
+  background: var(--ui-input-bg);
+  border: 1px solid var(--ui-input-border);
+  border-radius: var(--ui-input-radius, 0.375rem);
+  outline: none;
+  resize: vertical;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.cp-input-text-area-ai__textarea::placeholder {
+  color: var(--ui-input-placeholder);
+}
+
+.cp-input-text-area-ai__textarea:focus {
+  border-color: var(--ui-input-border-focus);
+  box-shadow: 0 0 0 1px var(--ui-input-ring);
+}
+
+.cp-input-text-area-ai__textarea:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.cp-input-text-area-ai__actions {
+  position: absolute;
+  bottom: 0.5rem;
+  right: 0.5rem;
+}
+
+.cp-input-text-area-ai__ai-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.375rem 0.75rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--ui-primary);
+  background: var(--ui-accent);
+  border: none;
+  border-radius: var(--ui-radius-sm);
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+}
+
+.cp-input-text-area-ai__ai-btn:hover {
+  background: var(--ui-accent-foreground);
+  color: var(--ui-accent);
+}
+
+.cp-input-text-area-ai__ai-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.cp-input-text-area-ai__ai-icon {
+  width: 1rem;
+  height: 1rem;
+}
+
+.cp-input-text-area-ai__spinner--hidden {
+  display: none;
+}
+
+.cp-input-text-area-ai__streaming {
+  position: absolute;
+  bottom: 0.5rem;
+  left: 0.5rem;
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-size: 0.75rem;
+  color: var(--ui-muted-foreground);
+}
+
+.cp-input-text-area-ai__streaming--hidden {
+  display: none;
+}

data/app/components/aeno/primitives/input_wrapper/component.html.erb

@@ -0,0 +1,20 @@
+<div class="cp-input-wrapper <%= 'cp-input-wrapper--disabled' if disabled %>">
+  <% if label %>
+    <label for="<%= id || name %>" class="cp-input-wrapper__label">
+      <%= label %>
+      <% if required %>
+        <span class="cp-input-wrapper__required">*</span>
+      <% end %>
+    </label>
+  <% end %>
+
+  <div class="cp-input-wrapper__field">
+    <%= content %>
+  </div>
+
+  <% if error_text %>
+    <p class="cp-input-wrapper__error"><%= error_text %></p>
+  <% elsif helper_text %>
+    <p class="cp-input-wrapper__helper"><%= helper_text %></p>
+  <% end %>
+</div>

data/app/components/aeno/primitives/input_wrapper/component.rb

@@ -0,0 +1,31 @@
+module Aeno::Primitives::InputWrapper
+  class Component < ::Aeno::ApplicationViewComponent
+    prop :label, description: "Input label", optional: true
+    prop :name, description: "Input name attribute"
+    prop :id, description: "Input id attribute", optional: true
+    prop :helper_text, description: "Helper text below input", optional: true
+    prop :error_text, description: "Error message", optional: true
+    prop :disabled, description: "Disabled state", default: -> { false }
+    prop :required, description: "Required field", default: -> { false }
+
+    option(:data, default: proc { {} })
+
+    examples("Input Wrapper", description: "Wrapper for form inputs with label and messages") do |b|
+      b.example(:default, title: "Default") do |e|
+        e.preview name: "field"
+      end
+
+      b.example(:with_label, title: "With Label") do |e|
+        e.preview name: "email", label: "Email Address"
+      end
+
+      b.example(:with_helper, title: "With Helper Text") do |e|
+        e.preview name: "username", label: "Username", helper_text: "Choose a unique username"
+      end
+
+      b.example(:with_error, title: "With Error") do |e|
+        e.preview name: "email", label: "Email", error_text: "Email is invalid"
+      end
+    end
+  end
+end

data/app/components/aeno/primitives/input_wrapper/styles.css

@@ -0,0 +1,72 @@
+/* Input Wrapper */
+.cp-input-wrapper {
+}
+
+.cp-input-wrapper--disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.cp-input-wrapper__label {
+  display: block;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--ui-foreground);
+  margin-bottom: 0.25rem;
+}
+
+.cp-input-wrapper__required {
+  color: var(--ui-destructive);
+}
+
+.cp-input-wrapper__field {
+  position: relative;
+}
+
+.cp-input-wrapper__helper {
+  margin-top: 0.25rem;
+  font-size: 0.875rem;
+  color: var(--ui-muted-foreground);
+}
+
+.cp-input-wrapper__error {
+  margin-top: 0.25rem;
+  font-size: 0.875rem;
+  color: var(--ui-destructive);
+}
+
+/* Shared input styles */
+.cp-input {
+  display: block;
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  color: var(--ui-input-fg);
+  background: var(--ui-input-bg);
+  border: 1px solid var(--ui-input-border);
+  border-radius: var(--ui-input-radius, 0.375rem);
+  outline: none;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.cp-input::placeholder {
+  color: var(--ui-input-placeholder);
+}
+
+.cp-input:focus {
+  border-color: var(--ui-input-border-focus);
+  box-shadow: 0 0 0 1px var(--ui-input-ring);
+}
+
+.cp-input:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.cp-input--error {
+  border-color: var(--ui-destructive);
+}
+
+.cp-input--error:focus {
+  box-shadow: 0 0 0 1px var(--ui-destructive);
+}

data/app/components/aeno/primitives/layouts/agentic/component.html.erb

@@ -0,0 +1,4 @@
+<div class="<%= component_classes %>">
+  <div class="cp-layouts-agentic__sidebar"><%= sidebar %></div>
+  <div class="cp-layouts-agentic__content"><%= content %></div>
+</div>

data/app/components/aeno/primitives/layouts/agentic/component.rb

@@ -0,0 +1,9 @@
+module Aeno::Primitives::Layouts::Agentic
+  class Component < Aeno::ApplicationViewComponent
+    renders_one :sidebar, Aeno::Primitives::Sidebar::Component
+
+    def component_classes
+      classes
+    end
+  end
+end

data/app/components/aeno/primitives/layouts/agentic/styles.css

@@ -0,0 +1,23 @@
+.cp-layouts-agentic {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100vw;
+  height: 100vh;
+  display: grid;
+  grid-template-columns: 1fr 5fr;
+
+  &__sidebar {
+    height: 100vh;
+    min-width: 0;
+    overflow: hidden;
+    border-right: 1px solid var(--ui-border);
+  }
+
+  &__content {
+    height: 100vh;
+    min-width: 0;
+  }
+}

data/app/components/aeno/primitives/layouts/app/aside.rb

@@ -0,0 +1,9 @@
+module Aeno::Primitives::Layouts::App
+  class Aside < Aeno::ApplicationViewComponent
+    erb_template <<~ERB
+      <aside class="cp-layout-app__aside" style="<%= merged_style %>">
+        <%= content %>
+      </aside>
+    ERB
+  end
+end

data/app/components/aeno/primitives/layouts/app/component.html.erb

@@ -0,0 +1,14 @@
+<div class="cp-layout-app<%= " cp-layout-app--with-aside" if aside? %>">
+  <%= sidebar %>
+  <main class="cp-layout-app__main">
+    <% if header? %>
+      <header class="cp-layout-app__header">
+        <%= header %>
+      </header>
+    <% end %>
+    <div class="cp-layout-app__body">
+      <%= content %>
+    </div>
+  </main>
+  <%= aside if aside? %>
+</div>

data/app/components/aeno/primitives/layouts/app/component.rb

@@ -0,0 +1,11 @@
+module Aeno::Primitives::Layouts::App
+  class Component < Aeno::ApplicationViewComponent
+    renders_one :sidebar, ->(style: nil, &block) {
+      Aeno::Primitives::Layouts::App::Sidebar.new(style: style, &block)
+    }
+    renders_one :header
+    renders_one :aside, ->(style: nil, &block) {
+      Aeno::Primitives::Layouts::App::Aside.new(style: style, &block)
+    }
+  end
+end

data/app/components/aeno/primitives/layouts/app/sidebar.rb

@@ -0,0 +1,9 @@
+module Aeno::Primitives::Layouts::App
+  class Sidebar < Aeno::ApplicationViewComponent
+    erb_template <<~ERB
+      <aside class="cp-layout-app__sidebar" style="<%= merged_style %>">
+        <%= content %>
+      </aside>
+    ERB
+  end
+end

data/app/components/aeno/primitives/layouts/app/styles.css

@@ -0,0 +1,46 @@
+/* App Layout */
+.cp-layout-app {
+  position: fixed;
+  inset: 0;
+  display: grid;
+  grid-template-columns: auto 1fr;
+  width: 100vw;
+  height: 100vh;
+
+  &--with-aside {
+    grid-template-columns: auto 1fr auto;
+  }
+
+  &__sidebar {
+    height: 100vh;
+    flex-shrink: 0;
+    overflow: hidden;
+  }
+
+  &__main {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  &__header {
+    flex-shrink: 0;
+    border-bottom: 1px solid var(--ui-sidebar-border, #e5e5e5);
+    padding: 1rem 2rem;
+  }
+
+  &__body {
+    flex: 1;
+    overflow-y: auto;
+    padding: 2rem;
+  }
+
+  &__aside {
+    height: 100vh;
+    flex-shrink: 0;
+    overflow: hidden;
+    border-left: 1px solid var(--ui-sidebar-border, #e5e5e5);
+  }
+}

data/app/components/aeno/primitives/page/component.html.erb

@@ -0,0 +1,24 @@
+<div class="cp-page">
+  <div class="cp-page__header">
+    <div class="cp-page__title-area">
+      <h1 class="cp-page__title">
+        <span class="cp-page__title-text"><%= title %></span>
+        <% if subtitle %>
+          <span class="cp-page__subtitle"><%= subtitle %></span>
+        <% end %>
+      </h1>
+      <% if description %>
+        <p class="cp-page__description"><%= description %></p>
+      <% end %>
+    </div>
+    <% if actions_area %>
+      <div class="cp-page__actions">
+        <%= actions_area %>
+      </div>
+    <% end %>
+  </div>
+
+  <div class="cp-page__content">
+    <%= content %>
+  </div>
+</div>

data/app/components/aeno/primitives/page/component.rb

@@ -0,0 +1,23 @@
+module Aeno::Primitives::Page
+  class Component < Aeno::ApplicationViewComponent
+    prop :title, description: "Page title"
+    prop :subtitle, description: "Optional subtitle", optional: true
+    prop :description, description: "Page description", optional: true
+
+    renders_one(:actions_area)
+
+    examples("Page", description: "Page layout with title and content") do |b|
+      b.example(:default, title: "Default") do |e|
+        e.preview title: "Dashboard"
+      end
+
+      b.example(:with_subtitle, title: "With Subtitle") do |e|
+        e.preview title: "Users", subtitle: "(123)"
+      end
+
+      b.example(:with_description, title: "With Description") do |e|
+        e.preview title: "Settings", description: "Manage your account settings"
+      end
+    end
+  end
+end