fix:make chat window more mobile friendly
This commit is contained in:
hackerESQ
@@ -132,41 +132,53 @@ new class extends Component {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
}"
|
}"
|
||||||
class=""
|
class="fixed z-50 bottom-8 right-8"
|
||||||
>
|
>
|
||||||
|
{{-- toggle button --}}
|
||||||
<x-button
|
<x-button
|
||||||
|
x-show="!open"
|
||||||
@click="$dispatch('toggle-ai-chat')"
|
@click="$dispatch('toggle-ai-chat')"
|
||||||
class="btn btn-circle btn-lg btn-primary fixed bottom-10 right-10"
|
class="flex btn btn-circle md:btn-lg btn-primary"
|
||||||
>
|
>
|
||||||
<x-slot:label>
|
<x-slot:label>
|
||||||
<x-icon name="o-sparkles" class="w-8 h-8"></x-icon>
|
<x-icon name="o-sparkles" class="w-6 h-6 md:w-8 md:h-8"></x-icon>
|
||||||
</x-slot:label>
|
</x-slot:label>
|
||||||
</x-button>
|
</x-button>
|
||||||
|
|
||||||
|
{{-- popup --}}
|
||||||
<div
|
<div
|
||||||
x-on:toggle-ai-chat.window="open = !open"
|
x-on:toggle-ai-chat.window="open = !open"
|
||||||
x-show="open"
|
x-show="open"
|
||||||
x-trap="open"
|
x-trap="open"
|
||||||
x-bind:inert="!open"
|
x-bind:inert="!open"
|
||||||
x-transition.opacity
|
x-transition:enter="transition ease-out duration-300"
|
||||||
|
x-transition:enter-start="opacity-0 transform translate-y-full"
|
||||||
|
x-transition:enter-end="opacity-100 transform translate-y-0"
|
||||||
|
x-transition:leave="transition ease-in duration-200"
|
||||||
|
x-transition:leave-start="opacity-100 transform translate-y-0"
|
||||||
|
x-transition:leave-end="opacity-0 transform translate-y-full"
|
||||||
x-cloak
|
x-cloak
|
||||||
key="ai-chat"
|
key="ai-chat"
|
||||||
class="fixed
|
class="fixed bg-base-100 shadow-2xl rounded-none md:rounded-lg
|
||||||
bottom-0 right-0 w-full h-screen
|
inset-0 h-screen w-full
|
||||||
md:bottom-[7rem] md:right-10 md:w-[35rem] md:h-auto"
|
md:inset-auto md:right-6 md:bottom-6 md:w-[30rem] md:h-[46rem]"
|
||||||
>
|
>
|
||||||
|
<div
|
||||||
<x-card class="h-screen md:h-auto shadow-2xl" title="{{ __('AI Chat') }}" x-intersect="scrollChatWindow()">
|
class="absolute inset-0 flex flex-col overflow-hidden p-4"
|
||||||
{{-- close button --}}
|
x-intersect="scrollChatWindow()"
|
||||||
<x-button
|
>
|
||||||
icon="o-x-mark"
|
<div class="flex grow-0 justify-between items-center pb-4 ">
|
||||||
class="absolute top-5 right-4 btn-ghost btn-circle btn-sm"
|
<h2 class="text-lg text-bold">{{ __('AI Chat') }}</h2>
|
||||||
title="{{ __('Close') }}"
|
<x-button
|
||||||
@click="open = false"
|
icon="o-x-mark"
|
||||||
/>
|
class="absolute top-5 right-4 btn-ghost btn-circle btn-sm"
|
||||||
|
title="{{ __('Close') }}"
|
||||||
|
@click="open = false"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
{{-- chat window --}}
|
{{-- chat window --}}
|
||||||
<div class="h-[25rem] overflow-y-scroll ai-chat" x-ref="chatWindow">
|
<div class="grow overflow-hidden overflow-y-scroll ai-chat" x-ref="chatWindow">
|
||||||
|
|
||||||
<div class="flex gap-3 mb-5 flex-1">
|
<div class="flex gap-3 mb-5 flex-1">
|
||||||
<span class="
|
<span class="
|
||||||
@@ -248,43 +260,45 @@ new class extends Component {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{{-- prompt input --}}
|
{{-- prompt input --}}
|
||||||
<form submit="startCompletion" class="mt-3">
|
<div class="mt-3 grow-0">
|
||||||
<div class="">
|
<form submit="startCompletion" >
|
||||||
@foreach($suggested_prompts as $prompt)
|
<div class="">
|
||||||
<x-button
|
@foreach($suggested_prompts as $prompt)
|
||||||
class="btn-xs btn-primary btn-outline mr-1 mb-2"
|
<x-button
|
||||||
label="{{ $prompt['text'] }}"
|
class="btn-xs btn-primary btn-outline mr-1 mb-2"
|
||||||
wire:click="startCompletion('{{ $prompt['value'] }}')"
|
label="{{ $prompt['text'] }}"
|
||||||
/>
|
wire:click="startCompletion('{{ $prompt['value'] }}')"
|
||||||
@endforeach
|
/>
|
||||||
|
@endforeach
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex justify-between align-bottom space-x-2 mt-1">
|
|
||||||
|
|
||||||
<div class="w-full">
|
|
||||||
|
|
||||||
<x-textarea
|
|
||||||
wire:model="prompt"
|
|
||||||
class="h-24 resize-none "
|
|
||||||
placeholder="{{ __('Have a question? AI might be able to help...') }}"
|
|
||||||
wire:keydown.enter.prevent="startCompletion"
|
|
||||||
autofocus
|
|
||||||
></x-textarea>
|
|
||||||
</div>
|
</div>
|
||||||
<x-button
|
|
||||||
spinner="generate"
|
|
||||||
wire:click="startCompletion"
|
|
||||||
class="btn btn-ghost h-24"
|
|
||||||
icon="o-paper-airplane"
|
|
||||||
></x-button>
|
|
||||||
|
|
||||||
</div>
|
<div class="flex justify-between align-bottom space-x-2 mt-1">
|
||||||
|
|
||||||
<div class="w-full mt-2">
|
<div class="w-full">
|
||||||
<p class="text-xs text-secondary leading-tight">{{ __('Advice generated by AI may contain errors. Use at your own risk. Always consult a licensed investment advisor.') }} </p>
|
|
||||||
</div>
|
<x-textarea
|
||||||
</form>
|
wire:model="prompt"
|
||||||
</x-card>
|
class="h-24 resize-none "
|
||||||
|
placeholder="{{ __('Have a question? AI might be able to help...') }}"
|
||||||
|
wire:keydown.enter.prevent="startCompletion"
|
||||||
|
autofocus
|
||||||
|
></x-textarea>
|
||||||
|
</div>
|
||||||
|
<x-button
|
||||||
|
spinner="generate"
|
||||||
|
wire:click="startCompletion"
|
||||||
|
class="btn btn-ghost h-24"
|
||||||
|
icon="o-paper-airplane"
|
||||||
|
></x-button>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="w-full mt-2">
|
||||||
|
<p class="text-xs text-secondary leading-tight">{{ __('Advice generated by AI may contain errors. Use at your own risk. Always consult a licensed investment advisor.') }} </p>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user