|
|
@@ -1019,83 +1019,85 @@
|
|
|
</button>
|
|
|
</Tooltip>
|
|
|
|
|
|
- <Tooltip content={$i18n.t('Read Aloud')} placement="bottom">
|
|
|
- <button
|
|
|
- id="speak-button-{message.id}"
|
|
|
- class="{isLastMessage
|
|
|
- ? 'visible'
|
|
|
- : 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition"
|
|
|
- on:click={() => {
|
|
|
- if (!loadingSpeech) {
|
|
|
- toggleSpeakMessage();
|
|
|
- }
|
|
|
- }}
|
|
|
- >
|
|
|
- {#if loadingSpeech}
|
|
|
- <svg
|
|
|
- class=" w-4 h-4"
|
|
|
- fill="currentColor"
|
|
|
- viewBox="0 0 24 24"
|
|
|
- xmlns="http://www.w3.org/2000/svg"
|
|
|
- >
|
|
|
- <style>
|
|
|
- .spinner_S1WN {
|
|
|
- animation: spinner_MGfb 0.8s linear infinite;
|
|
|
- animation-delay: -0.8s;
|
|
|
- }
|
|
|
+ {#if $user?.role === 'admin' || ($user?.permissions?.chat?.tts ?? true)}
|
|
|
+ <Tooltip content={$i18n.t('Read Aloud')} placement="bottom">
|
|
|
+ <button
|
|
|
+ id="speak-button-{message.id}"
|
|
|
+ class="{isLastMessage
|
|
|
+ ? 'visible'
|
|
|
+ : 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition"
|
|
|
+ on:click={() => {
|
|
|
+ if (!loadingSpeech) {
|
|
|
+ toggleSpeakMessage();
|
|
|
+ }
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ {#if loadingSpeech}
|
|
|
+ <svg
|
|
|
+ class=" w-4 h-4"
|
|
|
+ fill="currentColor"
|
|
|
+ viewBox="0 0 24 24"
|
|
|
+ xmlns="http://www.w3.org/2000/svg"
|
|
|
+ >
|
|
|
+ <style>
|
|
|
+ .spinner_S1WN {
|
|
|
+ animation: spinner_MGfb 0.8s linear infinite;
|
|
|
+ animation-delay: -0.8s;
|
|
|
+ }
|
|
|
|
|
|
- .spinner_Km9P {
|
|
|
- animation-delay: -0.65s;
|
|
|
- }
|
|
|
+ .spinner_Km9P {
|
|
|
+ animation-delay: -0.65s;
|
|
|
+ }
|
|
|
|
|
|
- .spinner_JApP {
|
|
|
- animation-delay: -0.5s;
|
|
|
- }
|
|
|
+ .spinner_JApP {
|
|
|
+ animation-delay: -0.5s;
|
|
|
+ }
|
|
|
|
|
|
- @keyframes spinner_MGfb {
|
|
|
- 93.75%,
|
|
|
- 100% {
|
|
|
- opacity: 0.2;
|
|
|
+ @keyframes spinner_MGfb {
|
|
|
+ 93.75%,
|
|
|
+ 100% {
|
|
|
+ opacity: 0.2;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
- </style>
|
|
|
- <circle class="spinner_S1WN" cx="4" cy="12" r="3" />
|
|
|
- <circle class="spinner_S1WN spinner_Km9P" cx="12" cy="12" r="3" />
|
|
|
- <circle class="spinner_S1WN spinner_JApP" cx="20" cy="12" r="3" />
|
|
|
- </svg>
|
|
|
- {:else if speaking}
|
|
|
- <svg
|
|
|
- xmlns="http://www.w3.org/2000/svg"
|
|
|
- fill="none"
|
|
|
- viewBox="0 0 24 24"
|
|
|
- stroke-width="2.3"
|
|
|
- stroke="currentColor"
|
|
|
- class="w-4 h-4"
|
|
|
- >
|
|
|
- <path
|
|
|
- stroke-linecap="round"
|
|
|
- stroke-linejoin="round"
|
|
|
- d="M17.25 9.75 19.5 12m0 0 2.25 2.25M19.5 12l2.25-2.25M19.5 12l-2.25 2.25m-10.5-6 4.72-4.72a.75.75 0 0 1 1.28.53v15.88a.75.75 0 0 1-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.507-1.938-1.354A9.009 9.009 0 0 1 2.25 12c0-.83.112-1.633.322-2.396C2.806 8.756 3.63 8.25 4.51 8.25H6.75Z"
|
|
|
- />
|
|
|
- </svg>
|
|
|
- {:else}
|
|
|
- <svg
|
|
|
- xmlns="http://www.w3.org/2000/svg"
|
|
|
- fill="none"
|
|
|
- viewBox="0 0 24 24"
|
|
|
- stroke-width="2.3"
|
|
|
- stroke="currentColor"
|
|
|
- class="w-4 h-4"
|
|
|
- >
|
|
|
- <path
|
|
|
- stroke-linecap="round"
|
|
|
- stroke-linejoin="round"
|
|
|
- d="M19.114 5.636a9 9 0 010 12.728M16.463 8.288a5.25 5.25 0 010 7.424M6.75 8.25l4.72-4.72a.75.75 0 011.28.53v15.88a.75.75 0 01-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.507-1.938-1.354A9.01 9.01 0 012.25 12c0-.83.112-1.633.322-2.396C2.806 8.756 3.63 8.25 4.51 8.25H6.75z"
|
|
|
- />
|
|
|
- </svg>
|
|
|
- {/if}
|
|
|
- </button>
|
|
|
- </Tooltip>
|
|
|
+ </style>
|
|
|
+ <circle class="spinner_S1WN" cx="4" cy="12" r="3" />
|
|
|
+ <circle class="spinner_S1WN spinner_Km9P" cx="12" cy="12" r="3" />
|
|
|
+ <circle class="spinner_S1WN spinner_JApP" cx="20" cy="12" r="3" />
|
|
|
+ </svg>
|
|
|
+ {:else if speaking}
|
|
|
+ <svg
|
|
|
+ xmlns="http://www.w3.org/2000/svg"
|
|
|
+ fill="none"
|
|
|
+ viewBox="0 0 24 24"
|
|
|
+ stroke-width="2.3"
|
|
|
+ stroke="currentColor"
|
|
|
+ class="w-4 h-4"
|
|
|
+ >
|
|
|
+ <path
|
|
|
+ stroke-linecap="round"
|
|
|
+ stroke-linejoin="round"
|
|
|
+ d="M17.25 9.75 19.5 12m0 0 2.25 2.25M19.5 12l2.25-2.25M19.5 12l-2.25 2.25m-10.5-6 4.72-4.72a.75.75 0 0 1 1.28.53v15.88a.75.75 0 0 1-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.507-1.938-1.354A9.009 9.009 0 0 1 2.25 12c0-.83.112-1.633.322-2.396C2.806 8.756 3.63 8.25 4.51 8.25H6.75Z"
|
|
|
+ />
|
|
|
+ </svg>
|
|
|
+ {:else}
|
|
|
+ <svg
|
|
|
+ xmlns="http://www.w3.org/2000/svg"
|
|
|
+ fill="none"
|
|
|
+ viewBox="0 0 24 24"
|
|
|
+ stroke-width="2.3"
|
|
|
+ stroke="currentColor"
|
|
|
+ class="w-4 h-4"
|
|
|
+ >
|
|
|
+ <path
|
|
|
+ stroke-linecap="round"
|
|
|
+ stroke-linejoin="round"
|
|
|
+ d="M19.114 5.636a9 9 0 010 12.728M16.463 8.288a5.25 5.25 0 010 7.424M6.75 8.25l4.72-4.72a.75.75 0 011.28.53v15.88a.75.75 0 01-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.507-1.938-1.354A9.01 9.01 0 012.25 12c0-.83.112-1.633.322-2.396C2.806 8.756 3.63 8.25 4.51 8.25H6.75z"
|
|
|
+ />
|
|
|
+ </svg>
|
|
|
+ {/if}
|
|
|
+ </button>
|
|
|
+ </Tooltip>
|
|
|
+ {/if}
|
|
|
|
|
|
{#if $config?.features.enable_image_generation && ($user?.role === 'admin' || $user?.permissions?.features?.image_generation) && !readOnly}
|
|
|
<Tooltip content={$i18n.t('Generate Image')} placement="bottom">
|
Timothy Jaeryang Baek