{% extends "base.html" %}


{% block extrahead %}
<style>
  svg.ms-w-12 {
    width: 2rem !important;
  }
  svg.ms-h-12 {
    height: 2rem !important;
  }
  /* Temporary solution for the font sizes  */
  #headlessui-dialog-panel-2 p{
    font-size: 16px;
  }
  #headlessui-dialog-panel-2 textarea{
    font-size: 16px;
  }
  #headlessui-dialog-panel-2 span{
    font-size: 14px;

  }
  #headlessui-dialog-panel-2 div{
    font-size: 16px;
  }
  #headlessui-dialog-panel-2 a{
    font-size: 14px;
    line-height: 1rem;
  }
  #headlessui-dialog-panel-2 button{
    border: 1px solid #0000001d;
    line-height: 1rem;

}
  /* Temporary solution for the font size  */
  #headlessui-dialog-panel-2 > div > div > div > div.ms-w-full.ms-rounded-xl.ms-flex.ms-flex-col.ms-relative > div > div > div > div > div.ms-flex.ms-flex-row.ms-items-center.ms-justify-between.ms-gap-1 > p{
    font-size: 14px;
    line-height: 1rem;
  }

</style>

<div id="my-component-root" class="mendable-search"></div>

<script src="https://unpkg.com/@mendable/search@0.0.155/dist/umd/mendable-bundle.min.js"></script>
{% raw %}
<script>
    Mendable.initialize({
      anon_key: 'a0bd44db-eb3b-412f-8924-b31c58244a64',
      type: 'floatingButton',
      style : { accentColor: '#3F51B5', darkMode: false },
      floatingButtonStyle:{
        backgroundColor: '#3F51B5',
        color: '#fff',
      },
      icon: "https://mendable-storage.s3.amazonaws.com/autoGPT.gif",
      botIcon: "https://mendable-storage.s3.amazonaws.com/autoGPTbot.gif",
    })
  </script>
{% endraw %}
{% endblock %}