<div id="app">
  <div ref="menu" class="menu scrollable-menu" v-bind:class="{ 'active': menuVisible }">
    <div ref="menuCloseButton" class="close"><small id="return-to-chat">Return to chat</small>&nbsp;<i class="fas fa-window-close"></i></div> 
    {% if need_login %}
      {% include 'login-div.html' %}
    {% endif %}
{% raw %}
    <!-- Expert knowledge section -->
    <div>
      <small>For best performance, only enable knowledge you need</small>
    </div>
    <div>
      <label>Expert knowledge:</label>
      <div class="tool-item">
          <input type="checkbox"
                 {% endraw %}{% if need_login %}disabled{% endif %}{% raw %}
                 id="collection-opensesame" 
                 v-model="collection_opensesame">
          <label for="collection-opensesame">OpenSesame
          </label>
      </div>
      <div class="tool-item">
          <input type="checkbox"
                 {% endraw %}{% if need_login %}disabled{% endif %}{% raw %}
                 id="collection-datamatrix" 
                 v-model="collection_datamatrix">
          <label for="collection-datamatrix">Python coding and data analysis</label>
      </div>
      <div class="tool-item">
          <input type="checkbox"
                 {% endraw %}{% if need_login %}disabled{% endif %}{% raw %}
                 id="collection-forum" 
                 v-model="collection_forum">
          <label for="collection-forum">CogSci community forum</label>
      </div>
    </div>
    <hr class="menu-divider">    
    <div>
      <small>For best performance, only enable tools you need</small>
    </div>    
    <div>
      <label>Tools:</label>
      <div class="tool-item">
          <input type="checkbox"
                 {% endraw %}{% if need_login %}disabled{% endif %}{% raw %}
                 id="tool-openalex" 
                 v-model="tool_openalex">
          <label for="tool-openalex">
            Search and download scientific literature (OpenAlex)
            <small>Recommended</small>
          </label>
      </div>
      <div class="tool-item">
          <input type="checkbox"
                 {% endraw %}{% if need_login %}disabled{% endif %}{% raw %}
                 id="tool-search-google-scholar" 
                 v-model="tool_search_google_scholar">
          <label for="tool-search-google-scholar">
            Search scientific literature (Google Scholar)
            <small>Sometimes blocked</small>
          </label>
      </div>
      <div class="tool-item">
          <input type="checkbox"
                 {% endraw %}{% if need_login %}disabled{% endif %}{% raw %}
                 id="tool-generate-image-flux" 
                 v-model="tool_generate_image_flux">
          <label for="tool-generate-image-flux">
          Generate and edit images (Flux.2)
          <small>Attach images to edit them</small>
          </label>
      </div>
      <div class="tool-item">
          <input type="checkbox"
                 {% endraw %}{% if need_login %}disabled{% endif %}{% raw %}
                 id="tool-generate-image-dalle3" 
                 v-model="tool_generate_image_dalle3">
          <label for="tool-generate-image-dalle3">Generate images (Dall-E 3)</label>
      </div>
    </div>
    <hr class="menu-divider">
    <div>
      <small>Build experiments, analyze data, and run code with application connectors</small>
    </div>    
    <div>
      <label>Connect to 
        <a href="https://osdoc.cogsci.nl/tutorials/beginner-sigmund/" target="_blank">OpenSesame</a>,
        <a href="https://github.com/open-cogsci/sigmund-analyst" target="_blank">Sigmund Analyst</a>,
        <a href="https://github.com/open-cogsci/jupyter-extension-sigmund" target="_blank">JupyterLab</a>
    </div>
    <hr class="menu-divider">    
    <!-- Model selection -->
    <div class="model-selector">
      <small>To save energy and protect the environment, use problem-solving models only for complex reasoning</small>
        <div class="model-buttons">
            <button
                {% endraw %}{% if need_login %}disabled{% endif %}{% raw %}
                @click="modelConfig = 'openai'" 
                :class="{ active: modelConfig === 'openai' }">
                <!-- Icon for OpenAI model -->
                <img src="/static/openai.png" alt="OpenAI Icon">
                <span>OpenAI<br><small>GPT5.2<br>Conversations</small></span>
            </button>
            <button
                {% endraw %}{% if need_login %}disabled{% endif %}{% raw %}
                @click="modelConfig = 'openai_thinking'" 
                :class="{ active: modelConfig === 'openai_thinking' }">
                <!-- Icon for OpenAI model -->
                <img src="/static/openai.png" alt="OpenAI Icon">
                <span>OpenAI<br><small>GPT5.2<br>Problem solving</small></span>
            </button>
            <button
                {% endraw %}{% if need_login %}disabled{% endif %}{% raw %}
                @click="modelConfig = 'anthropic'" 
                :class="{ active: modelConfig === 'anthropic' }">
                <!-- Icon for Anthropic model -->
                <img src="/static/anthropic.png" alt="Anthropic Icon">
                <span>Anthropic<br><small>Claude 4.6<br>Sonnet<br>Conversations</small></span>
            </button>
            <button
                {% endraw %}{% if need_login %}disabled{% endif %}{% raw %}
                @click="modelConfig = 'anthropic_thinking'" 
                :class="{ active: modelConfig === 'anthropic_thinking' }">
                <!-- Icon for Anthropic model -->
                <img src="/static/anthropic.png" alt="Anthropic Icon">
                <span>Anthropic<br><small>Claude 4.6<br>Opus<br>Problem solving</small></span>
            </button>
            <button
                {% endraw %}{% if need_login %}disabled{% endif %}{% raw %}
                @click="modelConfig = 'mistral'" 
                :class="{ active: modelConfig === 'mistral' }">
                <!-- Icon for Mistral model -->
                <img src="/static/mistral.png" alt="Mistral Icon">
                <span>Mistral<br><small>Large 3<br>Conversations</small></span>
            </button>
        </div>        
    </div>
    <hr class="menu-divider">
{% endraw %}    
    {% if need_login %}
    <div @click="navigateTo('/terms')">Terms and conditions</div>    
    {% else %}
    <div v-if="shouldShowNewConversationButton" @click="navigateTo(getNewConversationUrl())">New conversation</div>
    <div @click="showConversations">Browse conversations</div>
    <div @click="navigateTo('/api/conversation/clear')">Clear conversation</div>
    <hr class="menu-divider">    
    <div @click="navigateTo('/terms')">Terms and conditions</div>
    <div @click="navigateTo('/subscribe/customer-portal')" v-if="showManageSubscriptions">Manage subscription</div>
    <div @click="navigateTo('/api/conversation/export')">Download your data</div>
    <div @click="navigateTo('/logout')">Log out</div>
    {% endif %}
{% raw %}    
  </div>
  <!-- Modal for browsing conversations -->
  <div class="modal" v-if="showModal" v-bind:class="{ 'active': showModal }">
    <div class="modal-content">
      <div id='conversation-heading'>Conversations
        <div class="close" @click="closeModal"><i class="fas fa-window-close"></i></div>
      </div>
      <!-- Search input and button -->
      <div class="search-conversations">
          <input v-model="searchQuery" @keydown.enter="fetchConversations" type="text" placeholder="Search …">
      </div>      
      <div id="loadingConversationsMessage" v-show="isLoadingConversations">Loading conversations …</div>
      <div v-for="(conversation, index) in sortedConversations" :key="conversation.id">
        <span v-if="index !== 0" class="delete-convo" @click="deleteConversation(conversation.id)">
          <i class="fas fa-trash-alt"></i>
        </span>
        <span @click="activateConversation(conversation.id)" class="conversation-title">
          {{ conversation.title }}
        </span>
      </div>
    </div>
  </div>
</div>
{% endraw %}

<script>
function setSetting(key, value) {
  const data = {};
  data[key] = String(value);
  console.log('setting:', key, ' = ', data);
  fetch('/api/setting/set', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify(data),
  })
  .then((response) => {
    if (!response.ok) {
      throw new Error(`Failed to set ${key} setting: ${response.statusText}`);
    }
    return response.json();
  })
  .then((json) => {
    if (!json.success) {
      throw new Error(`Failed to set ${key} setting: ${json.message}`);
    }
  })
  .catch((error) => {
    console.error(error);
  });
}

new Vue({
  el: '#app',
  data: {
    menuVisible: false,
    showModal: false,
    conversations: {},
    showManageSubscriptions: {{ subscription_required|lower }},
    isUploading: false,
    modelConfig: sigmundSettings.model_config,
    forceModelConfigUpdate: 0,
    tool_generate_image_dalle3: sigmundSettings.tool_generate_image_dalle3 === 'true',
    tool_generate_image_flux: sigmundSettings.tool_generate_image_flux === 'true',
    tool_search_google_scholar: sigmundSettings.tool_search_google_scholar === 'true',
    tool_openalex: sigmundSettings.tool_search_openalex === 'true',
    collection_opensesame: sigmundSettings.collection_opensesame === 'true',
    collection_datamatrix: sigmundSettings.collection_datamatrix === 'true',
    collection_forum: sigmundSettings.collection_forum === 'true',
    shouldShowNewConversationButton: true,
    isLoadingConversations: true,
    searchQuery: ''
  },
  computed: {
    sortedConversations() {
      return Object.entries(this.conversations)
        .map(([id, [title, timestamp]]) => ({ id, title, timestamp }))
        .sort((a, b) => b.timestamp - a.timestamp);
    }
  },
  watch: {
    modelConfig(value) { setSetting('model_config', value); },
    tool_generate_image_dalle3(value) { setSetting('tool_generate_image_dalle3', value); },
    tool_generate_image_flux(value) { setSetting('tool_generate_image_flux', value); },
    tool_search_google_scholar(value) { setSetting('tool_search_google_scholar', value); },
    tool_openalex(value) {
      setSetting('tool_search_openalex', value); 
      setSetting('tool_download_from_openalex', value); 
    },
    collection_opensesame(value) { setSetting('collection_opensesame', value); },
    collection_datamatrix(value) { setSetting('collection_datamatrix', value); },
    collection_forum(value) { setSetting('collection_forum', value); }
  },
  methods: {
    closeMenu(event) {
      // Only close the menu if the click was not inside the menu
      if (this.$refs.menuCloseButton.contains(event.target) || !this.$refs.menu.contains(event.target)) {
        this.menuVisible = false;
        window.removeEventListener('click', this.closeMenu);
      }
    },
    getNewConversationUrl() {
      return '/api/conversation/new';
    },
    toggleMenu: function() {
      const responseElement = document.getElementById('response');
      this.shouldShowNewConversationButton = responseElement.children.length > 1;
      this.menuVisible = !this.menuVisible;
      // Attach an event handler to close the menu when the window is clicked.
      // This is done in a timeout to avoid it from being invoked directly as
      // a result of the current click
      setTimeout(() => {
        if (this.menuVisible) {
          window.addEventListener('click', this.closeMenu);
        }
      }, 100);
    },
    navigateTo: function(path) {
      window.location.href = path;
    },
    showConversations: function() {
      this.fetchConversations();
      this.showModal = true;
      this.menuVisible = false;
      console.log('showing conversations')
    },
    closeModal: function() {
      this.showModal = false;
    },
    fetchConversations(query = '') {
        this.conversations = {};
        this.isLoadingConversations = true;
        fetch(`/api/conversation/list?query=${encodeURIComponent(this.searchQuery)}`)
            .then(response => response.json())
            .then(data => {
                console.log(data);
                this.conversations = data;
                this.isLoadingConversations = false;
            })
            .catch(error => {
                console.error('Error fetching conversations:', error);
            });
    },
    activateConversation: function(conversationId) {
      this.navigateTo(`/api/conversation/activate/${conversationId}`);
    },
    deleteConversation: function(conversationId) {
      // Optimistically remove the conversation from the list
      Vue.delete(this.conversations, conversationId);
      // Make delete request to server
      fetch(`/api/conversation/delete/${conversationId}`, { method: 'DELETE' })
        .then(response => {
          if (!response.ok) {
            // If the delete failed, add it back to the list
            this.fetchConversations();
          }
        });
    }
  }
});
</script>