dmitry.galkin/chatbot-template
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ui: mobile chatbot improvements (#1155)

Browse source
This commit is contained in:
josh 2025-09-07 00:04:51 +01:00 • committed by GitHub
parent fd8ed4d863
commit 31de38ab18
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
16 changed files with 547 additions and 449 deletions
Download patch file Download diff file Expand all files Collapse all files

2
components/elements/actions.tsx
View file

@ -13,7 +13,7 @@ import type { ComponentProps } from 'react';
export type ActionsProps = ComponentProps<'div'>;
export const Actions = ({ className, children, ...props }: ActionsProps) => (
<div className={cn('flex items-center gap-1', className)} {...props}>
<div className={cn('flex gap-1 items-center', className)} {...props}>
{children}
</div>
);

7
components/elements/conversation.tsx
View file

@ -11,7 +11,10 @@ export type ConversationProps = ComponentProps<typeof StickToBottom>;
export const Conversation = ({ className, ...props }: ConversationProps) => (
<StickToBottom
className={cn('relative flex-1 overflow-y-auto', className)}
className={cn(
'overflow-y-auto relative flex-1 touch-pan-y will-change-scroll',
className,
)}
initial="smooth"
resize="smooth"
role="log"
@ -46,7 +49,7 @@ export const ConversationScrollButton = ({
!isAtBottom && (
<Button
className={cn(
'absolute bottom-4 left-[50%] translate-x-[-50%] rounded-full',
'absolute bottom-4 left-1/2 -translate-x-1/2 rounded-full z-10 shadow-lg',
className,
)}
onClick={handleScrollToBottom}

14
components/elements/reasoning.tsx
View file

@ -37,7 +37,7 @@ export type ReasoningProps = ComponentProps<typeof Collapsible> & {
duration?: number;
};
const AUTO_CLOSE_DELAY = 1000;
const AUTO_CLOSE_DELAY = 500;
const MS_IN_S = 1000;
export const Reasoning = memo(
@ -98,7 +98,7 @@ export const Reasoning = memo(
value={{ isStreaming, isOpen, setIsOpen, duration }}
>
<Collapsible
className={cn('not-prose mb-4', className)}
className={cn('not-prose', className)}
onOpenChange={handleOpenChange}
open={isOpen}
{...props}
@ -119,7 +119,7 @@ export const ReasoningTrigger = memo(
return (
<CollapsibleTrigger
className={cn(
'flex items-center gap-2 text-muted-foreground text-sm',
'flex items-center gap-1.5 text-muted-foreground text-xs hover:text-foreground transition-colors',
className,
)}
{...props}
@ -130,11 +130,11 @@ export const ReasoningTrigger = memo(
{isStreaming || duration === 0 ? (
<p>Thinking...</p>
) : (
<p>Thought for {duration} seconds</p>
<p>Thought for {duration}s</p>
)}
<ChevronDownIcon
className={cn(
'size-4 text-muted-foreground transition-transform',
'size-3 text-muted-foreground transition-transform',
isOpen ? 'rotate-180' : 'rotate-0',
)}
/>
@ -155,8 +155,8 @@ export const ReasoningContent = memo(
({ className, children, ...props }: ReasoningContentProps) => (
<CollapsibleContent
className={cn(
'mt-4 text-sm',
'data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-popover-foreground outline-none data-[state=closed]:animate-out data-[state=open]:animate-in',
'mt-2 text-xs text-muted-foreground',
'data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 outline-none data-[state=closed]:animate-out data-[state=open]:animate-in',
className,
)}
{...props}