waveterm/frontend/app/view/chat/chatmessages.tsx
Evan Simkowitz 2e91ee843c
Switch from Less to Scss (#1335)
Less hasn't received an update in over a year and the parser is missing
some modern syntax like relative colors so this switches us to scss
2024-11-21 16:05:04 -08:00

61 lines
1.8 KiB
TypeScript

// Copyright 2024, Command Line Inc.
// SPDX-License-Identifier: Apache-2.0
import { Markdown } from "@/app/element/markdown";
import clsx from "clsx";
import { OverlayScrollbarsComponent } from "overlayscrollbars-react";
import { memo, useEffect, useRef } from "react";
import "./chatmessages.scss";
export interface ChatMessage {
id: string;
username: string;
message: string;
color?: string;
userIcon?: string;
}
interface ChatMessagesProps {
messages: ChatMessage[];
className?: string;
}
const ChatMessages = memo(({ messages, className }: ChatMessagesProps) => {
const messagesEndRef = useRef<HTMLDivElement>(null);
const overlayScrollRef = useRef(null);
const scrollToBottom = () => {
messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
};
useEffect(() => {
// scrollToBottom();
}, [messages]);
return (
<OverlayScrollbarsComponent
ref={overlayScrollRef}
className={clsx("chat-messages", className)}
options={{ scrollbars: { autoHide: "leave" } }}
>
{messages.map(({ id, username, message, color, userIcon }) => (
<div key={id} className="chat-message">
{userIcon && <img src={userIcon} alt="user icon" className="chat-user-icon" />}
<span className="chat-username" style={{ color: color || "var(--main-text-color)" }}>
{username}:
</span>
<span className="chat-text">
<Markdown scrollable={false} text={message}></Markdown>
</span>
</div>
))}
<div ref={messagesEndRef} />
</OverlayScrollbarsComponent>
);
});
ChatMessages.displayName = "ChatMessages";
export { ChatMessages };