<template x-if="{{ ref }}">
  <div class="flex gap-2 items-start message group/message"
    :data-id="{{ ref }}.id" x-data="{ editing: false }">
    <div
      :class="{{ ref }}.id == 'temp' && isProcessing ? 'animate-pulse' : null">
      <template x-if="{{ ref }}.role == 'user' && {{ ref }}.user">
        <x-avatar length="1" class="avatar-sm"
          :title="`${ {{ ref }}.user.first_name} ${ {{ ref }}.user.last_name}`"
          :src="{{ ref }}.user.avatar">
        </x-avatar>
      </template>

      <template x-if="{{ ref }}.role == 'user' && !{{ ref }}.user">
        <x-avatar length="1" class="avatar-sm" icon="question-mark"></x-avatar>
      </template>

      <template x-if="{{ ref }}.role == 'assistant'  && {{ ref }}.assistant">
        <x-avatar length="1" class="avatar-sm"
          :src="{{ ref }}.assistant?.avatar" :title="{{ ref }}.assistant?.name"
          icon="box">
        </x-avatar>
      </template>

      <template x-if="{{ ref }}.role == 'assistant'  && !{{ ref }}.assistant">
        <x-avatar length="1" class="avatar-sm" icon="sparkles"
          :src="`{{ option.features.chat.avatar is defined and option.features.chat.avatar ? option.features.chat.avatar : null }}`">
        </x-avatar>
      </template>
    </div>

    <div class="flex flex-col gap-2 min-w-0 grow">
      <template x-if="{{ ref }}.role == 'user' && {{ ref }}.user">
        <div class="font-bold"
          x-text="`${ {{ ref }}.user.first_name} ${ {{ ref }}.user.last_name}`">
        </div>
      </template>

      <template x-if="{{ ref }}.role == 'user' && !{{ ref }}.user">
        <div class="font-bold text-content-dimmed">
          {{ __('Deleted user') }}</div>
      </template>

      <template x-if="{{ ref }}.role == 'assistant' && {{ ref }}.assistant">
        <div class="font-bold" x-text="{{ ref }}.assistant.name">
        </div>
      </template>

      <template x-if="{{ ref }}.role == 'assistant' && !{{ ref }}.assistant">
        <div class="font-bold">
          {{ option.features.chat.name ?? 'AI' }}
        </div>
      </template>

      <template x-if="editing">
        <form @submit.prevent="edit({{ ref }}, content); editing=false"
          x-data="{content: {{ ref }}.content}">
          <div
            class="overflow-y-auto max-h-36 autogrow-textarea text-content grow font-primary"
            :data-replicated-value="content">
            <textarea autocomplete="off" rows="1" x-model="content"
              class="block p-0 text-base bg-transparent border-none placeholder:text-content-dimmed"
              required x-ref="content" x-init="$el.focus()"></textarea>
          </div>

          <div class="flex gap-2 items-center mt-5">
            <button type="submit" :disabled="isProcessing"
              class="button button-xs">
              {{ p__('button', 'Submit') }}
            </button>

            <button @click="editing=false" type="button"
              class="button button-xs button-outline">
              {{ p__('button', 'Cancel') }}
            </button>
          </div>
        </form>
      </template>

      <template x-if="call && {{ ref }}.id == 'temp'">
        <div>
          <template x-if="call.name == 'generate_image'">
            <div class="tool-processing">
              <span>
                {% set prompt %}
                <span x-text="call?.params?.prompt"></span>
                {% endset %}

                {{ __('Generating an image...') }}
              </span>
            </div>
          </template>

          <template x-if="call.name == 'web_scrap'">
            <div class="tool-processing">
              <span>
                {{ __('Scanning the web site...') }}
              </span>
            </div>
          </template>

          <template x-if="call.name == 'google_search'">
            <div class="tool-processing">
              <template x-if="call?.params?.query">
                <span>
                  {% set query %}
                  <span x-text="call?.params?.query"></span>
                  {% endset %}

                  {{ __('Searching "%s" on Google...', query)|raw }}
                </span>
              </template>

              <template x-if="!call?.params?.query">
                <span>
                  {{ __('Searching on Google...') }}
                </span>
              </template>
            </div>
          </template>

          <template x-if="call.name == 'youtube'">
            <div class="tool-processing">
              <template x-if="call?.params?.id">
                <span>
                  {% set link %}
                  <a :href="`https://youtu.be/${call?.params?.id}`"
                    target="_blank" class="font-medium hover:text-content group"
                    x-tooltip="`https://youtu.be/${call?.params?.id}`">
                    <span class="group-hover:underline">YouTube</span>
                    <i class="text-base ti ti-external-link"></i>
                  </a>
                  {% endset %}

                  {{ __('Retrieving details from %s', link)|raw }}
                </span>
              </template>

              <template x-if="!call?.params?.id">
                <span>
                  {{ __('Retrieving details...') }}
                </span>
              </template>
            </div>
          </template>

          <template x-if="call.name == 'web_search'">
            <div class="tool-processing">
              <template x-if="call?.params?.query">
                <span>
                  {% set query %}
                  <span x-text="call?.params?.query"></span>
                  {% endset %}

                  {{ __('Searching "%s" on the web...', query)|raw }}
                </span>
              </template>

              <template x-if="!call?.params?.query">
                <span>
                  {{ __('Searching on the web...') }}
                </span>
              </template>
            </div>
          </template>

          <template x-if="call?.name == 'file_analyse'">
            <div class="tool-processing">
              <span>
                {{ __('Analysing file content...') }}
              </span>
            </div>
          </template>

          <template x-if="call?.name == 'embedding_search'">
            <div class="tool-processing">
              <span>
                {{ __('Searching for information in the uploaded files...') }}
              </span>
            </div>
          </template>

          <template x-if="call?.name == 'knowledge_base'">
            <div class="tool-processing">
              <span>
                {{ __('Searching for information in the knowledge base...') }}
              </span>
            </div>
          </template>
        </div>
      </template>

      <template
        x-if="!call && time > 3 && {{ ref }}.content.length == 0 && {{ ref }}.id == 'temp'">
        <div>
          <div class="tool-processing">
            <span>
              {{ __('Thinking...') }}
            </span>
          </div>
        </div>
      </template>

      <template x-if="!editing && {{ ref }}.quote">
        <div class="flex gap-1 items-start text-sm text-content-dimmed">
          <i class="text-sm ti ti-corner-down-right"></i>

          <div class="grow" x-text="{{ ref }}.quote"></div>
        </div>
      </template>

      <template x-if="!editing && {{ ref }}.image">
        <div class="flex">
          <a :href="{{ ref }}.image.url"
            class="flex gap-2 items-center p-2 pr-4 box min-w-72 hover:border-line"
            download>
            <div class="w-10 h-10">
              <img :src="{{ ref }}.image.url" width="{{ ref }}.image.width"
                height="{{ ref }}.height.width" alt=""
                class="object-cover object-center w-full h-full rounded-lg">
            </div>

            <div>
              <div class="text-sm font-bold">{{ __('Image file') }}</div>
              <div class="mt-0.5 text-xs text-content-dimmed">
                <span class="uppercase"
                  x-text="{{ ref }}.image.extension"></span>
                ·
                <span>
                  <span x-text="{{ ref }}.image.width">1024</span>
                  x
                  <span x-text="{{ ref }}.image.height">1024</span>
                </span>
              </div>
            </div>

            <i class="ml-auto ti ti-download text-content-dimmed"></i>
          </a>
        </div>
      </template>

      <template x-if="!editing && {{ ref }}.file && !{{ ref }}.image">
        <div class="flex">
          <a :href="{{ ref }}.file.url"
            class="flex gap-2 items-center p-2 pr-4 box min-w-72 hover:border-line"
            download>
            <div class="flex justify-center items-center w-10 h-10">
              <i class="ti ti-file-description"></i>
            </div>

            <div>
              <div class="flex gap-2 items-center text-sm font-bold">
                {{ __('File') }}

                <template x-if="!{{ ref }}.file.has_embedding">
                  <i class="text-base ti ti-alert-square-rounded-filled text-failure"
                    x-tooltip.raw="{{ __('Couldn\'t extract the file contents') }}"></i>
                </template>
              </div>
              <div class="mt-0.5 text-xs text-content-dimmed">
                <span class="uppercase"
                  x-text="{{ ref }}.file.extension"></span>
                ·
                <x-filesize :data-value="{{ ref }}.file.size"></x-filesize>
              </div>
            </div>

            <i class="ml-auto ti ti-download text-content-dimmed"></i>
          </a>
        </div>
      </template>

      <template x-if="!editing">
        <div class="content selection:bg-accent/50"
          @mouseup="{{ ref }}.role == 'assistant' ? textSelect : null">
          <x-markdown :content="{{ ref }}.content"></x-markdown>
        </div>
      </template>

      <template x-if="!editing && {{ ref }}.items?.length > 0">
        <div class="flex flex-wrap gap-4">
          <template x-for="item in {{ ref }}.items">
            <div class="flex shrink-0">
              <a :href="`app/${toolKey(item)}/${item.id}`"
                class="flex gap-2 items-center p-2 pr-4 box min-w-64 hover:border-line"
                target="_blank" x-tooltip="item.title || item.params?.prompt">
                <div
                  class="flex items-center justify-center w-10 h-10 rounded-[40%] bg-line overflow-hidden text-main">
                  <template x-if="item.object == 'image'">
                    <img :src="item.output_file.url" alt=""
                      class="object-cover object-center w-full h-full">
                  </template>
                </div>

                <div>
                  <div class="text-sm font-bold truncate max-w-48"
                    x-text="item.title || item.params?.prompt"></div>
                  <div class="mt-0.5 text-xs uppercase text-content-dimmed"
                    x-text="item.model">
                  </div>
                </div>

                <i class="ml-auto ti ti-arrow-up-right text-content-dimmed"></i>
              </a>
            </div>
          </template>
        </div>
      </template>

      <template x-if="!editing">
        <div class="flex gap-4 items-center mt-2 text-sm text-content-dimmed">
          <div class="flex gap-2 items-center">
            <button @click="copy({{ ref }})"
              class="transition-all hover:text-content"
              x-tooltip.raw="{{ __('Copy') }}">
              <i class="text-xl ti ti-copy"></i>
            </button>

            <template x-if="{{ ref }}.role == 'assistant' && {{ ref }}.id">
              <button @click="regenerate({{ ref }})"
                class="transition-all hover:text-content"
                x-tooltip.raw="{{ __('Regenerate') }}">
                <i class="text-xl ti ti-refresh"></i>
              </button>
            </template>

            <template
              x-if="{{ ref }}.role == 'user' && {{ ref }}.id && !{{ ref }}.image">
              <button @click="editing=true"
                class="transition-all hover:text-content"
                x-tooltip.raw="{{ __('Edit') }}">
                <i class="text-xl ti ti-pencil"></i>
              </button>
            </template>

            <template x-if="{{ ref }}.role == 'assistant' && {{ ref }}.id">
              <button @click="showOptions({{ ref }})"
                class="transition-all hover:text-content"
                x-tooltip.raw="{{ __('Change model') }}">
                <i class="text-xl ti ti-sparkles"></i>
              </button>
            </template>
          </div>

          <div
            class="flex gap-2 items-center px-2 py-px rounded-lg border opacity-0 transition-all border-line-dimmed group-hover/message:opacity-100 group-hover/message:delay-200">
            <template x-if="{{ ref }}.role == 'assistant' && {{ ref }}.model">
              <span class="flex gap-1 items-center">
                <i class="text-base ti ti-cpu"></i>
                <span
                  x-text="adapters.find(adapter => adapter.model == {{ ref }}.model)?.short_name || {{ ref }}.model"></span>
              </span>
            </template>

            <template x-if="{{ ref }}.content.length > 0">
              <span class="flex gap-1 items-center">
                {% set count %}
                <span x-text="{{ ref }}.content.length">
                </span>
                {% endset %}

                <i class="text-base ti ti-square-rounded-letter-t"></i>
                {{ __(":count chars", {':count': count})|raw }}
              </span>
            </template>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>