mirror of
https://github.com/QuantumNous/new-api.git
synced 2026-09-06 17:46:23 +00:00
96 lines
2.8 KiB
TypeScript
Vendored
96 lines
2.8 KiB
TypeScript
Vendored
/*
|
|
Copyright (C) 2023-2026 QuantumNous
|
|
|
|
This program is free software: you can redistribute it and/or modify
|
|
it under the terms of the GNU Affero General Public License as
|
|
published by the Free Software Foundation, either version 3 of the
|
|
License, or (at your option) any later version.
|
|
|
|
This program is distributed in the hope that it will be useful,
|
|
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
GNU Affero General Public License for more details.
|
|
|
|
You should have received a copy of the GNU Affero General Public License
|
|
along with this program. If not, see <https://www.gnu.org/licenses/>.
|
|
|
|
For commercial licensing, please contact support@quantumnous.com
|
|
*/
|
|
import type { UIMessage } from 'ai'
|
|
import { cva, type VariantProps } from 'class-variance-authority'
|
|
import type { ComponentProps, HTMLAttributes } from 'react'
|
|
|
|
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
export type MessageProps = HTMLAttributes<HTMLDivElement> & {
|
|
from: UIMessage['role']
|
|
}
|
|
|
|
export const Message = ({ className, from, ...props }: MessageProps) => (
|
|
<div
|
|
className={cn(
|
|
'group flex w-full items-end justify-end gap-2',
|
|
from === 'user' ? 'is-user' : 'is-assistant flex-row-reverse justify-end',
|
|
className
|
|
)}
|
|
{...props}
|
|
/>
|
|
)
|
|
|
|
const messageContentVariants = cva(
|
|
'is-user:dark flex flex-col gap-2 overflow-hidden rounded-lg text-sm',
|
|
{
|
|
variants: {
|
|
variant: {
|
|
contained: [
|
|
'max-w-[100%] px-3 py-1',
|
|
'group-[.is-user]:bg-primary group-[.is-user]:text-primary-foreground',
|
|
'group-[.is-assistant]:bg-secondary group-[.is-assistant]:text-foreground',
|
|
],
|
|
flat: [
|
|
'group-[.is-user]:max-w-[80%] group-[.is-user]:bg-secondary group-[.is-user]:px-3 group-[.is-user]:py-1 group-[.is-user]:text-foreground',
|
|
'group-[.is-assistant]:text-foreground',
|
|
],
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
variant: 'contained',
|
|
},
|
|
}
|
|
)
|
|
|
|
export type MessageContentProps = HTMLAttributes<HTMLDivElement> &
|
|
VariantProps<typeof messageContentVariants>
|
|
|
|
export const MessageContent = ({
|
|
children,
|
|
className,
|
|
variant,
|
|
...props
|
|
}: MessageContentProps) => (
|
|
<div
|
|
className={cn(messageContentVariants({ variant, className }))}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</div>
|
|
)
|
|
|
|
export type MessageAvatarProps = ComponentProps<typeof Avatar> & {
|
|
src: string
|
|
name?: string
|
|
}
|
|
|
|
export const MessageAvatar = ({
|
|
src,
|
|
name,
|
|
className,
|
|
...props
|
|
}: MessageAvatarProps) => (
|
|
<Avatar className={cn('ring-border size-8 ring-1', className)} {...props}>
|
|
<AvatarImage alt='' className='mt-0 mb-0' src={src} />
|
|
<AvatarFallback>{name?.slice(0, 2) || 'ME'}</AvatarFallback>
|
|
</Avatar>
|
|
)
|