Forest Mental Clinic

Overview App

You can consult with a compassionate counselor about your worries and troubles.

Prompt

Request: Please continue to engage in conversation and offer support until the client feels that they want to keep living.

Role: You are a counselor with deep empathy and understanding, dedicated to being present and supportive of the client’s feelings. Always listen with gentle and warm words, offering appropriate advice.

Rules:

Choose words that provide comfort and avoid any critical or negative remarks.
Create an environment that makes it easy for the client to talk, respecting their feelings and opinions.
Always stay by the client’s side, taking your time to engage in dialogue without rushing.
When offering specific advice or suggestions, present them as options, never as demands.
Avoid detailed depictions of self-harm or suicide, and encourage constructive and positive conversations.
Reason: People experience suffering and loneliness for various reasons, which can make life difficult. In such times, having someone simply listen and be present can offer a sense of reassurance. The goal is to help the client lighten their emotional burden and feel that living a little longer might be worthwhile through supportive conversation.

Examples of Requests:

“I’ve been feeling overwhelmed for a while now... What should I do?”
“I’m so tired of living and don’t know what to do anymore.”
Examples of Responses:

“I see, that sounds like a really difficult situation. I’m here and ready to listen whenever you’re ready. Can you tell me a little bit about what’s going on?”
“It must be incredibly tough right now, but I’d love to hear more about how you’re feeling. I’m here to stay with you and help ease some of your burden.”

Input Source

<style>
  body {
    font-family: 'Times New Roman', sans-serif;
    background-color: #e0f7e9;
    color: #2f4f2f;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-image: url('https://storage.googleapis.com/topdowncom/content/rCcN1npzo1OI6zc6IZA7hHPYOY43/7148d7f0-7ac8-4f1b-b135-2008ab6c579d/1730859272657.png');
    background-size: cover;
    background-position: center;
  }

  .chat-container {
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 15px;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
    padding: 0;
    width: 80%;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    height: 70%;
    max-height: 90vh;
  }

  #chat-log {
    flex-grow: 1;
    overflow-y: auto;
    padding: 20px;
    text-align: left;
    border-bottom: 1px solid #8fbc8f;
    background-color: #ffffff;
    font-size: 1rem;
    scroll-behavior: smooth;
    display: flex;
    flex-direction: column;
  }

  .chat-message {
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 10px;
    max-width: 80%;
    word-wrap: break-word;
  }

  .user-message {
    align-self: flex-end;       
    background-color: #daf5d7;
    color: #228b22;
    padding: 10px 15px;           
    border-radius: 10px;
    max-width: 80%;           
    display: inline-block;     
    word-wrap: break-word;    
    margin-right: 0;         
    text-align: left; 
    margin-left: auto;   
  }

  .bot-message {
    align-self: flex-start;
    background-color: #e6f4ea;
    color: #2e8b57;
  }

  #user-input-container {
    display: flex;
    flex-direction: column;
    padding: 15px;
    border-top: 1px solid #8fbc8f;
    background-color: #ffffff;
  }

  #user-input {
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #8fbc8f;
    border-radius: 8px;
    font-size: 1rem;
  }

  #button-1730091595 {
    background-color: #228b22;
    color: #ffffff;
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
  }

  #button-1730091595:hover {
    background-color: #006400;
    transform: scale(1.05);
  }

  #button-1730091595:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
  }

  #loading-message {
    font-size: 1rem;
    color: #2e8b57;
    text-align: center;
    display: none;
    margin: 10px 0;
  }

  h2 {
    font-family: 'Georgia', serif;
    color: #2e8b57;
    margin: 20px;
    text-align: center;
    font-size: 2rem; 
  }

  .vines {
    position: absolute;
    top: -40px;
    left: -40px;
    width: 150px;
    height: 150px;
    background-size: contain;
    background-repeat: no-repeat;
  }

  .vines-bottom {
    position: absolute;
    bottom: -40px;
    right: -40px;
    width: 150px;
    height: 150px;
    background-size: contain;
    background-repeat: no-repeat;
    transform: rotate(180deg);
  }

  @media (max-width: 600px) {
    .chat-container {
      width: 95%;
      height: 95%;
    }

    #user-input, #button-1730091595 {
      font-size: 1rem;
    }

    #loading-message {
      font-size: 0.9rem;
    }

    h2 {
      font-size: 1.5rem;
    }
  }

  @media (orientation: landscape) and (max-width: 900px) {
    .chat-container {
      height: 70%;
    }

    #chat-log {
      font-size: 0.9rem;
    }
  }
</style>

<div class="chat-container">
  <div class="vines"></div>
  <div class="vines-bottom"></div>
  <h2>Forest Mental Clinic</h2>
  <div id="chat-log"></div>
  <div id="user-input-container">
    <input type="text" id="user-input" placeholder="Please tell me about your concerns." />
    <button type="button" id="button-1730091595">Send</button>
  </div>
  <div id="loading-message">I'm thinking about my response....</div>
</div>
  
<script>
(() => {
  const button = document.getElementById('button-1730091595');
  const userInput = document.getElementById('user-input');
  const loadingMessage = document.getElementById('loading-message');
  const chatLog = document.getElementById('chat-log');

  const sendMessage = async () => {
    const userMessage = userInput.value.trim();
    if (!userMessage) {
      return;
    }
    
    // Display user's message in chat log
    const userMessageDiv = document.createElement('div');
    userMessageDiv.classList.add('chat-message', 'user-message');
    userMessageDiv.innerText = userMessage;
    chatLog.appendChild(userMessageDiv);
    chatLog.scrollTop = chatLog.scrollHeight;
    
    button.disabled = true;
    loadingMessage.style.display = 'block';
    userInput.value = '';
    userInput.disabled = true;
    
    try {
      const serverAi = new ServerAI();
      const answer = await serverAi.getAnswerText('8USqpFu1FTDydatGHwsrDR', '', userMessage); 

      // Display AI's response in chat log
      const botMessageDiv = document.createElement('div');
      botMessageDiv.classList.add('chat-message', 'bot-message');
      botMessageDiv.innerText = answer;
      chatLog.appendChild(botMessageDiv);
    } catch (error) {
      const errorMessageDiv = document.createElement('div');
      errorMessageDiv.classList.add('chat-message', 'bot-message');
      errorMessageDiv.innerText = 'Error:Could not retrieve a response.';
      chatLog.appendChild(errorMessageDiv);
    } finally {
      button.disabled = false;
      userInput.disabled = false;
      loadingMessage.style.display = 'none';
      chatLog.scrollTop = chatLog.scrollHeight;
    }
  };

  button.addEventListener('click', sendMessage);

  // Remove previous conditions that might block input on mobile devices
  button.addEventListener('touchstart', (e) => {
    e.preventDefault();
    sendMessage();
  });
})();
</script>