43 lines
2.0 KiB
PHP
43 lines
2.0 KiB
PHP
@props([
|
|
'senderName' => 'Interviewer',
|
|
'isCandidate' => false,
|
|
'color' => '#6366f1',
|
|
'message' => '',
|
|
'timestamp' => null,
|
|
])
|
|
|
|
@php
|
|
$resolvedColor = $isCandidate ? '#38bdf8' : ($color ?? '#6366f1');
|
|
$timeStr = $timestamp ? \Carbon\Carbon::parse($timestamp)->format('H:i:s') : now()->format('H:i:s');
|
|
|
|
// Hex to rgba helper for background opacity
|
|
$hex = ltrim($resolvedColor, '#');
|
|
if (strlen($hex) == 3) {
|
|
$r = hexdec(substr($hex,0,1).substr($hex,0,1));
|
|
$g = hexdec(substr($hex,1,1).substr($hex,1,1));
|
|
$b = hexdec(substr($hex,2,1).substr($hex,2,1));
|
|
} else {
|
|
$r = hexdec(substr($hex,0,2));
|
|
$g = hexdec(substr($hex,2,2));
|
|
$b = hexdec(substr($hex,4,2));
|
|
}
|
|
$bgRgba = "rgba({$r}, {$g}, {$b}, 0.1)";
|
|
$borderRgba = "rgba({$r}, {$g}, {$b}, 0.35)";
|
|
@endphp
|
|
|
|
<div {{ $attributes->merge(['class' => 'chat-message mb-2 p-2.5 rounded-lg border-l-2 transition-all']) }} style="background: {{ $bgRgba }}; border-color: {{ $resolvedColor }};">
|
|
<div class="flex justify-between items-center mb-1 gap-2">
|
|
<div class="flex items-center gap-1.5 min-w-0">
|
|
<span class="w-1.5 h-1.5 rounded-full shrink-0" style="background: {{ $resolvedColor }};"></span>
|
|
<strong class="text-xs truncate" style="color: {{ $resolvedColor }};">{{ $senderName }}</strong>
|
|
@if($isCandidate)
|
|
<span class="text-[9.5px] uppercase font-bold px-1.5 py-0.2 rounded bg-sky-500/20 text-sky-300 border border-sky-500/30 shrink-0">Candidate</span>
|
|
@else
|
|
<span class="text-[9.5px] uppercase font-bold px-1.5 py-0.2 rounded bg-indigo-500/20 text-indigo-300 border border-indigo-500/30 shrink-0">Panelist</span>
|
|
@endif
|
|
</div>
|
|
<span class="text-[10.5px] text-slate-500 shrink-0 font-mono">{{ $timeStr }}</span>
|
|
</div>
|
|
<div class="text-slate-200 text-xs leading-relaxed font-medium pl-3 break-words">{{ $message }}</div>
|
|
</div>
|