llm_meta_widget 0.1.0

data/app/assets/stylesheets/llm_meta_widget/conversation.css

@@ -0,0 +1,183 @@
+/*
+ * Canonical "chat conversation" styles for the llm_meta ecosystem.
+ *
+ * Owned by the llm_meta_widget gem. Consumed by:
+ *   - the widget partial itself (llm_meta_widget/_chat_panel.html.erb)
+ *   - any llm_meta_client-scaffolded chat host that adopts the same
+ *     conversation surface
+ *
+ * Scoped by the `.llm-meta-conversation` opt-in class on a wrapping
+ * element — so these rules only affect elements the consumer has
+ * declared as chat-conversation surfaces. Prevents accidental style
+ * bleed onto random host-page elements named .message or .message-role.
+ *
+ * Any host that wants the styles applied wraps its conversation
+ * markup in <div class="llm-meta-conversation"> ... </div> and includes
+ * this file (served via /llm_meta_widget_assets/conversation.css).
+ */
+
+.llm-meta-conversation .message {
+	position: relative;
+	margin-bottom: 6px;
+	padding: 6px 10px;
+	border-radius: 8px;
+	max-width: 85%;
+	line-height: 1.4;
+	word-wrap: break-word;
+}
+.llm-meta-conversation .message.user {
+	background-color: #dbeafe;
+	border: 1px solid #bfdbfe;
+	margin-left: auto;
+}
+.llm-meta-conversation .message.assistant {
+	background-color: #ffffff;
+	border: 1px solid #e5e7eb;
+	margin-right: auto;
+}
+.llm-meta-conversation .message.system {
+	background-color: #fef3c7;
+	border: 1px solid #fde68a;
+	color: #78350f;
+	font-size: 0.9em;
+	font-style: italic;
+}
+.llm-meta-conversation .message.error {
+	background-color: #fee2e2;
+	border: 1px solid #fecaca;
+	color: #991b1b;
+}
+
+.llm-meta-conversation .message-role {
+	display: block;
+	font-weight: 600;
+	font-size: 13px;
+	color: #374151;
+	margin-bottom: 4px;
+}
+.llm-meta-conversation .message-content {
+	line-height: 1.4;
+	word-wrap: break-word;
+	overflow-wrap: anywhere;
+	min-width: 0;
+	color: #1f2937;
+}
+
+/* Markdown-rendered content styling — matches llm_meta_chat's
+ * .message-content descendants in chats.css so LLM output looks the
+ * same wherever it renders (widget's streaming path uses marked.esm.js;
+ * chat host's saved-message path uses Redcarpet server-side; both
+ * produce standard HTML that these rules style). */
+.llm-meta-conversation .message-content p { margin: 0 0 0.5em 0; }
+.llm-meta-conversation .message-content p:last-child { margin-bottom: 0; }
+.llm-meta-conversation .message-content h1,
+.llm-meta-conversation .message-content h2,
+.llm-meta-conversation .message-content h3,
+.llm-meta-conversation .message-content h4,
+.llm-meta-conversation .message-content h5,
+.llm-meta-conversation .message-content h6 {
+	margin: 0.5em 0 0.25em 0;
+	line-height: 1.25;
+}
+.llm-meta-conversation .message-content ul,
+.llm-meta-conversation .message-content ol {
+	margin: 0.25em 0 0.5em 1.25em;
+	padding: 0;
+}
+.llm-meta-conversation .message-content li { margin: 0.1em 0; }
+.llm-meta-conversation .message-content blockquote {
+	border-left: 3px solid #d1d5db;
+	margin: 0.5em 0;
+	padding: 0.1em 0.75em;
+	color: #4b5563;
+}
+.llm-meta-conversation .message-content code {
+	background-color: #f3f4f6;
+	padding: 1px 4px;
+	border-radius: 4px;
+	font-size: 0.9em;
+	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+}
+.llm-meta-conversation .message-content pre {
+	background-color: #f3f4f6;
+	border: 1px solid #e5e7eb;
+	border-radius: 6px;
+	padding: 8px 10px;
+	margin: 0.5em 0;
+	overflow-x: auto;
+	max-width: 100%;
+	white-space: pre;
+}
+.llm-meta-conversation .message-content pre code { background: none; padding: 0; }
+.llm-meta-conversation .message-content table {
+	border-collapse: collapse;
+	margin: 0.5em 0;
+	display: block;
+	overflow-x: auto;
+	max-width: 100%;
+}
+.llm-meta-conversation .message-content th,
+.llm-meta-conversation .message-content td {
+	border: 1px solid #d1d5db;
+	padding: 4px 8px;
+}
+.llm-meta-conversation .message-content th { background-color: #f3f4f6; }
+.llm-meta-conversation .message-content a {
+	color: #2563eb;
+	text-decoration: underline;
+}
+.llm-meta-conversation .message-content img { max-width: 100%; height: auto; }
+
+/* Tool-use footer inside an assistant bubble — compact chips naming the
+ * tools the LLM invoked this turn. Gives users visual confirmation of
+ * what actually happened, particularly when the LLM's own text is thin. */
+.llm-meta-conversation .lmw-tool-chips {
+	margin-top: 0.5em;
+	padding-top: 0.5em;
+	border-top: 1px dashed #e5e7eb;
+	display: flex; flex-wrap: wrap; gap: 4px;
+}
+.llm-meta-conversation .lmw-tool-chip {
+	display: inline-block;
+	padding: 2px 8px;
+	background: #eef2ff;
+	color: #3730a3;
+	border: 1px solid #c7d2fe;
+	border-radius: 10px;
+	font-size: 0.8em;
+	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+	line-height: 1.4;
+}
+.llm-meta-conversation .lmw-tool-chip.error {
+	background: #fee2e2;
+	color: #991b1b;
+	border-color: #fecaca;
+}
+
+/* Thinking-token collapsible block — same shape as llm_meta_chat's
+ * .message-thinking. Streams during reasoning, collapses to a
+ * "(finished)" summary once text starts flowing. */
+.llm-meta-conversation .message-thinking {
+	margin: 0.5em 0;
+	padding: 0.5em 0.75em;
+	background: #f3f4f6;
+	border-left: 3px solid #9ca3af;
+	border-radius: 4px;
+	font-size: 0.85em;
+}
+.llm-meta-conversation .message-thinking summary {
+	cursor: pointer;
+	color: #6b7280;
+	font-weight: 500;
+	user-select: none;
+}
+.llm-meta-conversation .message-thinking-content {
+	margin-top: 0.5em;
+	color: #4b5563;
+	white-space: pre-wrap;
+	font-family: ui-monospace, "SF Mono", monospace;
+	font-size: 0.9em;
+	line-height: 1.5;
+	max-height: 10em;
+	overflow-y: auto;
+}

data/app/controllers/llm_meta_widget/assets_controller.rb

@@ -0,0 +1,62 @@
+require "action_controller/base"
+
+module LlmMetaWidget
+  # Serves the widget's JS module from the gem's disk. Bypasses the host's
+  # asset pipeline (Sprockets vs Propshaft compatibility) — same wire URL
+  # on every host that installs the gem. The widget partial references
+  # this route via <%= llm_meta_widget_orchestrator_path %>.
+  class AssetsController < ActionController::Base
+    # This action serves a public read-only JS module intended to be
+    # <script src="…">-embedded on any page. Rails' default
+    # RequestForgeryProtection includes a cross-origin JS check that
+    # raises `InvalidCrossOriginRequest` on such loads whenever the
+    # request's Referer is missing or from a "different" origin — even
+    # same-app-same-host requests can trigger it in dev. Disable both
+    # CSRF and that check for this controller: the endpoint has no
+    # side effects and no authenticated context to protect.
+    skip_forgery_protection
+
+    ORCHESTRATOR_PATH = File.expand_path("../../assets/javascripts/llm_meta_widget/orchestrator.js", __dir__).freeze
+    ORCHESTRATOR_BODY = File.read(ORCHESTRATOR_PATH).freeze
+    ORCHESTRATOR_ETAG = %("#{Digest::SHA1.hexdigest(ORCHESTRATOR_BODY)}").freeze
+
+    CONVERSATION_CSS_PATH = File.expand_path("../../assets/stylesheets/llm_meta_widget/conversation.css", __dir__).freeze
+    CONVERSATION_CSS_BODY = File.read(CONVERSATION_CSS_PATH).freeze
+    CONVERSATION_CSS_ETAG = %("#{Digest::SHA1.hexdigest(CONVERSATION_CSS_BODY)}").freeze
+
+    # Vendored marked v12 ESM — client-side markdown renderer used by the
+    # widget for streaming assistant responses (llm_meta_chat renders
+    # server-side via Redcarpet on saved messages; the widget streams
+    # deltas, so it needs a client-side renderer). Sourced from
+    # https://cdn.jsdelivr.net/npm/marked@12/lib/marked.esm.js.
+    MARKED_PATH = File.expand_path("../../assets/javascripts/llm_meta_widget/marked.esm.js", __dir__).freeze
+    MARKED_BODY = File.read(MARKED_PATH).freeze
+    MARKED_ETAG = %("#{Digest::SHA1.hexdigest(MARKED_BODY)}").freeze
+
+    def orchestrator
+      serve_asset(ORCHESTRATOR_BODY, ORCHESTRATOR_ETAG, "text/javascript")
+    end
+
+    def conversation_css
+      serve_asset(CONVERSATION_CSS_BODY, CONVERSATION_CSS_ETAG, "text/css")
+    end
+
+    def marked
+      serve_asset(MARKED_BODY, MARKED_ETAG, "text/javascript")
+    end
+
+    private
+
+    # Weak-etag revalidation — browsers cache the body but revalidate on
+    # each page load so a gem update propagates without user hard-reloads.
+    def serve_asset(body, etag, mime)
+      response.set_header("ETag", etag)
+      if request.headers["If-None-Match"] == etag
+        head :not_modified
+      else
+        response.set_header("Cache-Control", "public, must-revalidate, max-age=0")
+        send_data body, type: mime, disposition: "inline"
+      end
+    end
+  end
+end

data/app/helpers/llm_meta_widget/widget_helper.rb

@@ -0,0 +1,46 @@
+module LlmMetaWidget
+  # Renders the client-orchestrated chat widget on the current page.
+  #
+  #   <%= llm_meta_widget(base_url: "https://llmbranch.dbcls.jp",
+  #                       model:    "qwen3-6-35b-fast") %>
+  #
+  # The host page must ALSO provide:
+  #   - <script type="application/json" id="ai-actions">…</script> — local
+  #     action schemas (name/description/input_schema each).
+  #   - window.aiState — reader functions called each turn to build the
+  #     system prompt with current page state.
+  #   - window.aiActions — action implementations invoked fire-and-forget
+  #     when the LLM emits a matching tool_call.
+  #
+  # See llm_meta_widget's README for the three MCP-tool classes it supports
+  # (page-embedded aiActions / host-wide well-known / hub-registered).
+  module WidgetHelper
+    DEFAULTS = {
+      api_key_uuid:            "ollama-local",
+      orchestrator_path:       "/llm_meta_widget_assets/orchestrator.js",
+      actions_schema_id:       "ai-actions",
+      state_global:            "aiState",
+      actions_global:          "aiActions",
+      remote_tools_schema_id:  "remote-mcp-tools",
+      # nil → widget auto-discovers same-origin /.well-known/mcp.json at boot;
+      # explicit array → fetch those URLs; empty array → disable entirely.
+      well_known_urls:         nil,
+      max_rounds:              3,
+      # Level-1 pickers — enable visitor-driven selection of model and
+      # hub-registered anon-public MCP tools. See README for the level
+      # taxonomy (0 = independent, 1 = hub anon, 2 = hub signed-in).
+      enable_model_picker:     true,
+      enable_tool_picker:      true,
+      # Host allowlists — nil means "show everything the hub returns for
+      # anon" (all Ollama models / all public_to_anonymous MCP servers).
+      # Pass arrays to curate.
+      models:                  nil,   # e.g. ["qwen3-6-35b-fast", "qwen3-6-35b-no-think"]
+      hub_tools:               nil    # e.g. ["togomcp", "pubdictionaries"] — MCP server names
+    }.freeze
+
+    def llm_meta_widget(base_url:, model:, **overrides)
+      locals = DEFAULTS.merge(base_url: base_url, model: model, **overrides)
+      render partial: "llm_meta_widget/chat_panel", locals: locals
+    end
+  end
+end