模板里怎么添加ai对话功能？

1️⃣ Ai对话对应 HTML代码片段

<div id="js--ai-search-completion-container"
     data-controller="ai-search-completion"
     data-ai-search-completion-hidden-class="hidden opacity-0"
     data-ai-search-completion-url-value="/-/ai-search-completion"
     data-ai-search-completion-auto-submit-value="true"
     data-ai-search-completion-messages-value='{"thinking":"AI 正在思考...","completed":"AI 已完成","canceled":"已取消回答"}'>

  <!-- 消息显示容器 -->
  <div data-ai-search-completion-target="messages" class="chat-container overflow-y-auto gap-2 ai-response prose scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-gray-100">
  </div>

  <!-- 用户消息模板 -->
  <template data-ai-search-completion-target="userMessageTemplate">
    <div class="flex gap-3 justify-end items-start">
      <div class="text-right">
        <div class="inline-block p-3 max-w-xs break-words rounded-xl rounded-br-none bg-base-200 text-base-content ai-user-message">
        </div>
        <div class="mt-2 text-sm font-medium text-base-content/80">{{ current_user.name }}</div>
      </div>
      <img src="{{ current_user.image | default: avatar }}" class="w-10 h-10 rounded-full" />
    </div>
  </template>

  <!-- AI 消息模板 -->
  <template data-ai-search-completion-target="assistantMessageTemplate">
    <div class="flex gap-3 items-start">
      <div class="avatar avatar-online avatar-placeholder">
        <div class="w-10 rounded-full bg-neutral text-neutral-content">
          <span class="text-xl">AI</span>
        </div>
      </div>
      <div class="flex-1 min-w-0">
        <div class="p-3 break-words rounded-xl rounded-bl-none text-info-content bg-info w-fit max-w-3/4 ai-assistant-message chat-bubble prose ProseMirror">
        </div>
        <div class="mt-1 text-sm font-medium text-base-content/80">{{ site.settings.robot_name }}</div>
      </div>
    </div>
  </template>

  <!-- 错误显示 -->
  <div data-ai-search-completion-target="error" class="hidden text-red-500 opacity-100 transition-opacity duration-300"></div>

  <!-- 输入框 -->
  <textarea data-ai-search-completion-target="input"
            autocomplete="off"
            class="flex-1 p-2 mr-4 rounded-md border-0 bg-base-300 sm:min-h-20 text-base-content/50 input input-bordered focus:outline-none focus:ring-0 placeholder:text-base-content/60"
            placeholder="请输入你的问题…"></textarea>

  <!-- 发送按钮 -->
  <button data-ai-search-completion-target="send"
          type="button"
          class="text-base btn btn-primary">
    <i class="ri-send-plane-2-fill"></i>
  </button>

  <!-- 可选重试按钮模板（JS 中动态创建） -->
  <button data-ai-search-completion-target="retryButton" class="hidden"></button>
</div>

2️⃣ Stimulus Targets 与 HTML 属性对应表

3️⃣ Stimulus Values 对应 HTML 属性

4️⃣ Stimulus Classes

5️⃣ 流程概览

1. 用户在 data-ai-search-completion-target="input"输入消息 → 按回车或点击 data-ai-search-completion-target="send"

2. 调用 #sendUserMessage() → 清空输入框 → 调用 sendMessage(message)

3. sendMessage 使用 EventSource 向 url 发送消息

4. SSE 流式返回：

   • status=streaming → 实时更新 AI 消息内容

   • status=completed → AI 消息完成，追加 messagesValue.completed 提示

   • status=error → 显示错误消息 + 重试按钮

5. 页面消息追加使用 userMessageTemplateTarget 和 assistantMessageTemplateTarget

6️⃣ 历史会话消息获取

后端 Liquid 获取示例：

{% assign chat_messages = site.chat_messages | order_by: '-created_at' | limit: 10 %}
<div class="overflow-y-auto gap-2 ai-response prose scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-gray-100">
  {% for message in chat_messages reversed %}
    {% if message.role == 'user' %}
      <div class="ai-user-message">{{ message.content }}</div>
    {% else %}
      <div class="ai-assistant-message">{{ message.content }}</div>
    {% endif %}
  {% endfor %}
</div>

实践要点：

• 使用 reversed 将时间倒序的数据正序显示（旧消息在上）。

7️⃣页面初始化或外部触发初始消息

<script>
(function () {
  setTimeout(function () {
    const aiSearchCompletion = document.getElementById('js--ai-search-completion');
    if(aiSearchCompletion){
      aiSearchCompletion.dataset.aiSearchCompletionMessageValue = "{{ search.keywords | escape_once }}";
      setTimeout(function () {
        const messagesElement = document.querySelector('[data-ai-search-completion-target="messages"]');
        if(messagesElement){
          messagesElement.scrollIntoView({ block: 'end', behavior: 'auto' });
        }
      }, 1000);
    }
  }, 1000);
})();
</script>

实践要点：

• data-ai-search-completion-message-value 用于初始化页面消息，或者外部 JS 触发发送初始查询。也可以在元素上直接设置data-ai-search-completion-message-value

• 结合 Stimulus Controller 的 messageValueChanged() 可以在页面加载时自动提交消息。