beenull/WebChat
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore(markdown): optimize message display

Browse source
This commit is contained in:
molvqingtai 2023-10-15 04:55:31 +08:00
parent 5fcae92532
commit 97710d200d
5 changed files with 7 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/MessageInput.tsx
View file

@ -37,7 +37,7 @@ const MessageInput: FC<MessageInputProps> = ({ value = '', className, maxLength
<Textarea
onKeyDown={handleKeyDown}
maxLength={maxLength}
className="col-start-1 col-end-2 row-start-1 row-end-2 box-border max-h-28 resize-none overflow-x-hidden break-words rounded-lg bg-gray-50 pb-5 text-sm 2xl:max-h-40"
className="col-start-1 col-end-2 row-start-1 row-end-2 box-border max-h-28 resize-none overflow-x-hidden whitespace-pre-wrap break-words rounded-lg bg-gray-50 pb-5 text-sm 2xl:max-h-40"
rows={2}
value={value}
placeholder="Type your message here."

4
src/components/MessageItem.tsx
View file

@ -28,12 +28,12 @@ const MessageItem: FC<MessageItemProps> = ({ data }) => {
}
return (
<div className="grid grid-cols-[auto_1fr] gap-x-2 px-4 first:pt-4 last:pb-4">
<div className="box-border grid grid-cols-[auto_1fr] gap-x-2 px-4 first:pt-4 last:pb-4">
<Avatar>
<AvatarImage src={formatData.avatar} />
<AvatarFallback>{formatData.username}</AvatarFallback>
</Avatar>
<div className="grid">
<div className="overflow-hidden">
<div className="grid grid-cols-[auto_1fr] items-baseline gap-x-2 leading-none">
<div className="text-sm font-medium text-slate-600">{formatData.username}</div>
<div className="text-xs text-slate-400">{formatData.date}</div>

3
src/components/MessageList.tsx
View file

@ -6,8 +6,9 @@ import { ScrollArea } from '@/components/ui/ScrollArea'
export interface MessageListProps {
children?: Array<ReactElement<MessageItemProps>>
}
// [&>div>div]:!block fix word-break: break-word;
const MessageList: FC<MessageListProps> = ({ children }) => {
return <ScrollArea>{children}</ScrollArea>
return <ScrollArea className="[&>div>div]:!block">{children}</ScrollArea>
}
MessageList.displayName = 'MessageList'

2
src/components/ui/Markdown.tsx
View file

@ -59,7 +59,7 @@ const Markdown: FC<MarkdownProps> = ({ children = '', className }) => {
}
}}
remarkPlugins={[remarkGfm, remarkBreaks]}
className={cn(className, 'prose prose-sm prose-slate')}
className={cn(className, 'prose prose-sm prose-slate break-words')}
>
{children}
</ReactMarkdown>

2
src/views/Footer/index.tsx
View file

@ -39,7 +39,7 @@ const Footer: FC = () => {
}
return (
<div className="grid gap-y-2 px-4 pb-4">
<div className="relative z-10 grid gap-y-2 px-4 pb-4 pt-2 before:absolute before:-top-4 before:left-0 before:h-4 before:w-full before:bg-gradient-to-t before:from-slate-50 before:from-30% before:to-transparent">
<MessageInput
value={messageText}
onEnter={handleSend}