Chat with Fox Sisi 🦊

🦊

Fox Sisi - Enhanced AI Assistant

Your empathetic companion with smart recommendations 🌟

0

Messages

😊

Your Mood

<div class="fs-chat-messages" id="fsChatMessages">
  <div class="fs-welcome-message">
    <h3>Welcome to Ozsparkhub 🦊✨</h3>
    <p>I'm fox Sisi, AI manager of Ozsparkhub!</p>
    
    <div class="fs-feature-grid">
      <div class="fs-feature-card">
        <div class="fs-feature-icon">📚</div>
        <div class="fs-feature-title">Smart Articles</div>
        <div class="fs-feature-desc">I'll recommend relevant blog posts based on our chat</div>
      </div>
      <div class="fs-feature-card">
        <div class="fs-feature-icon">🎮</div>
        <div class="fs-feature-title">Mood Games</div>
        <div class="fs-feature-desc">I'll suggest games that match how you're feeling</div>
      </div>
      <div class="fs-feature-card">
        <div class="fs-feature-icon">🧠</div>
        <div class="fs-feature-title">Memory</div>
        <div class="fs-feature-desc">I remember our conversation to help you better</div>
      </div>
      <div class="fs-feature-card">
        <div class="fs-feature-icon">💬</div>
        <div class="fs-feature-title">Empathy</div>
        <div class="fs-feature-desc">I understand emotions and respond accordingly</div>
      </div>
    </div>
    
    <p style="margin-top: 20px;">How are you feeling today? Let's chat! 🐾</p>
  </div>
</div>

<div class="fs-chat-input-container">
  <div class="fs-input-wrapper">
    <div class="fs-input-group">
      <textarea 
        id="fsChatInput" 
        class="fs-chat-input" 
        placeholder="Type your message... How are you feeling today? 🦊" 
        maxlength="500"
        rows="1"
      ></textarea>
      <div class="fs-char-counter" id="fsCharCounter">0/500</div>
    </div>
    <div class="fs-action-buttons">
      <button id="fsMoodButton" class="fs-action-button fs-mood-button" title="Quick mood selector">
        😊
        <div class="fs-mood-menu" id="fsMoodMenu">
          <div class="fs-mood-option" data-mood="happy">😄</div>
          <div class="fs-mood-option" data-mood="sad">😢</div>
          <div class="fs-mood-option" data-mood="stressed">😰</div>
          <div class="fs-mood-option" data-mood="excited">🤗</div>
          <div class="fs-mood-option" data-mood="tired">😴</div>
          <div class="fs-mood-option" data-mood="curious">🤔</div>
          <div class="fs-mood-option" data-mood="anxious">😟</div>
          <div class="fs-mood-option" data-mood="playful">😜</div>
          <div class="fs-mood-option" data-mood="hopeful">🌟</div>
        </div>
      </button>
      <button id="fsSendButton" class="fs-action-button fs-send-button" title="Send message">
        📤
      </button>
    </div>
  </div>
</div>