Fix duration format and minimized chat layout
- Format duration as hours+minutes when > 60min (e.g., 2h 26min) - Change minimized chat to compact chip style (matching web) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
229c9aa1c7
commit
409da8afda
2 changed files with 22 additions and 18 deletions
|
|
@ -332,28 +332,20 @@ export function ChatWidget({ ticketId }: ChatWidgetProps) {
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
// Versao minimizada (recolhida)
|
// Versao minimizada (chip compacto igual web)
|
||||||
if (isMinimized) {
|
if (isMinimized) {
|
||||||
return (
|
return (
|
||||||
<div className="flex h-screen flex-col bg-white">
|
<div className="flex h-screen flex-col items-center justify-end bg-transparent p-4">
|
||||||
<button
|
<button
|
||||||
onClick={() => setIsMinimized(false)}
|
onClick={() => setIsMinimized(false)}
|
||||||
data-tauri-drag-region
|
className="flex items-center gap-2 rounded-full bg-black px-4 py-2 text-white shadow-lg hover:bg-black/90"
|
||||||
className="flex w-full items-center gap-3 border-b border-slate-200 bg-slate-50 px-4 py-3 text-left hover:bg-slate-100"
|
|
||||||
>
|
>
|
||||||
<div className="flex size-10 items-center justify-center rounded-full bg-black text-white">
|
<MessageCircle className="size-4" />
|
||||||
<MessageCircle className="size-5" />
|
<span className="text-sm font-medium">
|
||||||
</div>
|
|
||||||
<div className="flex-1">
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<p className="text-sm font-semibold text-slate-900">
|
|
||||||
Chat #{ticketInfo?.ref}
|
Chat #{ticketInfo?.ref}
|
||||||
</p>
|
</span>
|
||||||
<span className="size-2 rounded-full bg-emerald-500" />
|
<span className="size-2 rounded-full bg-emerald-400" />
|
||||||
</div>
|
<ChevronUp className="size-4" />
|
||||||
<p className="text-xs text-slate-500">Clique para expandir</p>
|
|
||||||
</div>
|
|
||||||
<ChevronUp className="size-4 text-slate-400" />
|
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|
|
||||||
|
|
@ -54,6 +54,18 @@ type ChatSession = {
|
||||||
|
|
||||||
const MESSAGES_PER_PAGE = 20
|
const MESSAGES_PER_PAGE = 20
|
||||||
|
|
||||||
|
function formatDuration(minutes: number): string {
|
||||||
|
if (minutes < 60) {
|
||||||
|
return `${minutes} min`
|
||||||
|
}
|
||||||
|
const hours = Math.floor(minutes / 60)
|
||||||
|
const mins = minutes % 60
|
||||||
|
if (mins === 0) {
|
||||||
|
return `${hours}h`
|
||||||
|
}
|
||||||
|
return `${hours}h ${mins}min`
|
||||||
|
}
|
||||||
|
|
||||||
function MessageAttachmentPreview({ attachment }: { attachment: { storageId: string; name: string; type: string | null } }) {
|
function MessageAttachmentPreview({ attachment }: { attachment: { storageId: string; name: string; type: string | null } }) {
|
||||||
const getFileUrl = useAction(api.files.getUrl)
|
const getFileUrl = useAction(api.files.getUrl)
|
||||||
const [loading, setLoading] = useState(false)
|
const [loading, setLoading] = useState(false)
|
||||||
|
|
@ -147,7 +159,7 @@ function ChatSessionCard({ session, isExpanded, onToggle }: { session: ChatSessi
|
||||||
<span>-</span>
|
<span>-</span>
|
||||||
<span>{session.messageCount} mensagens</span>
|
<span>{session.messageCount} mensagens</span>
|
||||||
<span>-</span>
|
<span>-</span>
|
||||||
<span>{duration} min</span>
|
<span>{formatDuration(duration)}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue