Upstream/waveterm
1
0
Fork 0
mirror of https://github.com/wavetermdev/waveterm.git synced 2025-01-22 21:42:49 +01:00
Code Issues Packages Projects Releases Wiki Activity

save work

Browse Source
This commit is contained in:
Red Adaya 2024-10-03 13:30:35 +08:00
parent 74efd1a825
commit 0525efc1ce
11 changed files with 963 additions and 513 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/app/element/menu.less → frontend/app/element/contextmenu.less
View File

@ -1,4 +1,4 @@
.menu {
.context-menu {
position: absolute;
z-index: 1000; // TODO: put this in theme.less
display: flex;
@ -13,7 +13,7 @@
background: #212121;
box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.3);
.menu-item {
.context-menu-item {
padding: 4px 6px;
cursor: pointer;
color: #fff;

546
frontend/app/element/contextmenu.stories.tsx Normal file
View File

@ -0,0 +1,546 @@
import type { Meta, StoryObj } from "@storybook/react";
import { fn } from "@storybook/test";
import { useEffect, useRef, useState } from "react";
import { ContextMenu } from "./contextmenu";
const items = [
{ label: "Fruit", onClick: (e) => console.log("Clicked Option 1") },
{
label: "Vegetables",
subItems: [
{ label: "Carrot", onClick: (e) => console.log("Clicked Option 2 -> 1") },
{ label: "Potato", onClick: (e) => console.log("Clicked Option 2 -> 2") },
],
},
{
label: "Beverages",
subItems: [
{ label: "Juice", onClick: (e) => console.log("Clicked Option 3 -> 1") },
{ label: "Tea", onClick: (e) => console.log("Clicked Option 3 -> 2") },
{
label: "Coffee",
subItems: [
{ label: "Espresso", onClick: (e) => console.log("Clicked Option 3 -> 3 -> 1") },
{ label: "Latte", onClick: (e) => console.log("Clicked Option 3 -> 3 -> 2") },
{ label: "Cappuccino", onClick: (e) => console.log("Clicked Option 3 -> 3 -> 3") },
{
label: "Mocha",
subItems: [
{ label: "Dark Chocolate", onClick: (e) => console.log("Clicked Option 3 -> 3 -> 4 -> 1") },
{
label: "White Chocolate",
onClick: (e) => console.log("Clicked Option 3 -> 3 -> 4 -> 2"),
},
{ label: "Milk Chocolate", onClick: (e) => console.log("Clicked Option 3 -> 3 -> 4 -> 3") },
],
},
],
},
],
},
{
label: "Desserts",
subItems: [
{ label: "Cake", onClick: (e) => console.log("Clicked Option 4 -> 1") },
{ label: "Ice Cream", onClick: (e) => console.log("Clicked Option 4 -> 2") },
{ label: "Cookies", onClick: (e) => console.log("Clicked Option 4 -> 3") },
{ label: "Brownies", onClick: (e) => console.log("Clicked Option 4 -> 4") },
{ label: "Cupcakes", onClick: (e) => console.log("Clicked Option 4 -> 5") },
{ label: "Donuts", onClick: (e) => console.log("Clicked Option 4 -> 6") },
{ label: "Pie", onClick: (e) => console.log("Clicked Option 4 -> 7") },
],
},
];
const meta = {
title: "Elements/Menu",
component: ContextMenu,
args: {
items: [],
anchorRef: undefined,
scopeRef: undefined,
initialPosition: undefined,
className: "",
setVisibility: fn(),
},
argTypes: {
items: {
description: "Items of menu",
},
anchorRef: {
description: "Element to attach the menu",
},
initialPosition: {
description: "Initial position of the menu",
},
setVisibility: {
description: "Visibility event handler",
},
scopeRef: {
description: "Component that defines the boundaries of the menu",
},
className: {
description: "Custom className",
},
},
} satisfies Meta<typeof ContextMenu>;
export default meta;
type Story = StoryObj<typeof meta>;
// export const DefaultRendererLeftPositioned: Story = {
// render: (args) => {
// const anchorRef = useRef<HTMLButtonElement>(null);
// const scopeRef = useRef<HTMLDivElement>(null);
// const [isMenuVisible, setIsMenuVisible] = useState(false);
// const handleAnchorClick = () => {
// setIsMenuVisible((prev) => !prev);
// };
// const mapItemsWithClick = (items: any[]) => {
// return items.map((item) => ({
// ...item,
// onClick: () => {
// if (item.onClick) {
// item.onClick();
// setIsMenuVisible(false);
// }
// },
// subItems: item.subItems ? mapItemsWithClick(item.subItems) : undefined,
// }));
// };
// const modifiedArgs = {
// ...args,
// items: mapItemsWithClick(args.items),
// };
// return (
// <div
// ref={scopeRef}
// className="boundary"
// style={{ padding: "20px", height: "300px", border: "2px solid black", position: "relative" }}
// >
// <div style={{ position: "absolute", top: 0, left: 0 }}>
// <Button
// ref={anchorRef}
// className="grey border-radius-3 vertical-padding-6 horizontal-padding-8"
// style={{ borderColor: isMenuVisible ? "var(--accent-color)" : "transparent" }}
// onClick={handleAnchorClick}
// >
// Anchor Element
// <i className="fa-sharp fa-solid fa-angle-down" style={{ marginLeft: 4 }}></i>
// </Button>
// </div>
// {isMenuVisible && (
// <Menu
// {...modifiedArgs}
// setVisibility={(visible) => setIsMenuVisible(visible)}
// anchorRef={anchorRef}
// scopeRef={scopeRef}
// />
// )}
// </div>
// );
// },
// args: {
// items: items,
// },
// };
// export const DefaultRendererRightPositioned: Story = {
// render: (args) => {
// const anchorRef = useRef<HTMLButtonElement>(null);
// const scopeRef = useRef<HTMLDivElement>(null);
// const [isMenuVisible, setIsMenuVisible] = useState(false);
// const handleAnchorClick = () => {
// setIsMenuVisible((prev) => !prev);
// };
// const mapItemsWithClick = (items: any[]) => {
// return items.map((item) => ({
// ...item,
// onClick: () => {
// if (item.onClick) {
// item.onClick();
// }
// setIsMenuVisible(false);
// },
// subItems: item.subItems ? mapItemsWithClick(item.subItems) : undefined,
// }));
// };
// const modifiedArgs = {
// ...args,
// items: mapItemsWithClick(args.items),
// };
// return (
// <div
// ref={scopeRef}
// className="boundary"
// style={{ padding: "20px", height: "300px", border: "2px solid black", position: "relative" }}
// >
// <div style={{ position: "absolute", top: 0, right: 0 }}>
// <Button
// ref={anchorRef}
// className="grey border-radius-3 vertical-padding-6 horizontal-padding-8"
// style={{ borderColor: isMenuVisible ? "var(--accent-color)" : "transparent" }}
// onClick={handleAnchorClick}
// >
// Anchor Element
// <i className="fa-sharp fa-solid fa-angle-down" style={{ marginLeft: 4 }}></i>
// </Button>
// </div>
// {isMenuVisible && (
// <Menu
// {...modifiedArgs}
// setVisibility={(visible) => setIsMenuVisible(visible)}
// anchorRef={anchorRef}
// scopeRef={scopeRef}
// />
// )}
// </div>
// );
// },
// args: {
// items: items,
// },
// };
// export const DefaultRendererBottomRightPositioned: Story = {
// render: (args) => {
// const anchorRef = useRef<HTMLButtonElement>(null);
// const scopeRef = useRef<HTMLDivElement>(null);
// const [isMenuVisible, setIsMenuVisible] = useState(false);
// const handleAnchorClick = () => {
// setIsMenuVisible((prev) => !prev);
// };
// const mapItemsWithClick = (items: any[]) => {
// return items.map((item) => ({
// ...item,
// onClick: () => {
// if (item.onClick) {
// item.onClick();
// }
// setIsMenuVisible(false);
// },
// subItems: item.subItems ? mapItemsWithClick(item.subItems) : undefined,
// }));
// };
// const modifiedArgs = {
// ...args,
// items: mapItemsWithClick(args.items),
// };
// return (
// <div
// ref={scopeRef}
// className="boundary"
// style={{ padding: "20px", height: "300px", border: "2px solid black", position: "relative" }}
// >
// <div style={{ position: "absolute", bottom: 0, left: 0 }}>
// <Button
// ref={anchorRef}
// className="grey border-radius-3 vertical-padding-6 horizontal-padding-8"
// style={{ borderColor: isMenuVisible ? "var(--accent-color)" : "transparent" }}
// onClick={handleAnchorClick}
// >
// Anchor Element
// <i className="fa-sharp fa-solid fa-angle-down" style={{ marginLeft: 4 }}></i>
// </Button>
// </div>
// {isMenuVisible && (
// <Menu
// {...modifiedArgs}
// setVisibility={(visible) => setIsMenuVisible(visible)}
// anchorRef={anchorRef}
// scopeRef={scopeRef}
// />
// )}
// </div>
// );
// },
// args: {
// items: items,
// },
// };
// export const DefaultRendererBottomLeftPositioned: Story = {
// render: (args) => {
// const anchorRef = useRef<HTMLButtonElement>(null);
// const scopeRef = useRef<HTMLDivElement>(null);
// const [isMenuVisible, setIsMenuVisible] = useState(false);
// const handleAnchorClick = () => {
// setIsMenuVisible((prev) => !prev);
// };
// const mapItemsWithClick = (items: any[]) => {
// return items.map((item) => ({
// ...item,
// onClick: () => {
// if (item.onClick) {
// item.onClick();
// }
// setIsMenuVisible(false);
// },
// subItems: item.subItems ? mapItemsWithClick(item.subItems) : undefined,
// }));
// };
// const modifiedArgs = {
// ...args,
// items: mapItemsWithClick(args.items),
// };
// return (
// <div
// ref={scopeRef}
// className="boundary"
// style={{ padding: "20px", height: "300px", border: "2px solid black", position: "relative" }}
// >
// <div style={{ position: "absolute", bottom: 0, right: 0 }}>
// <Button
// ref={anchorRef}
// className="grey border-radius-3 vertical-padding-6 horizontal-padding-8"
// style={{ borderColor: isMenuVisible ? "var(--accent-color)" : "transparent" }}
// onClick={handleAnchorClick}
// >
// Anchor Element
// <i className="fa-sharp fa-solid fa-angle-down" style={{ marginLeft: 4 }}></i>
// </Button>
// </div>
// {isMenuVisible && (
// <Menu
// {...modifiedArgs}
// setVisibility={(visible) => setIsMenuVisible(visible)}
// anchorRef={anchorRef}
// scopeRef={scopeRef}
// />
// )}
// </div>
// );
// },
// args: {
// items: items,
// },
// };
// export const CustomRenderer: Story = {
// render: (args) => {
// const anchorRef = useRef<HTMLButtonElement>(null);
// const scopeRef = useRef<HTMLDivElement>(null);
// const [isMenuVisible, setIsMenuVisible] = useState(false);
// const handleAnchorClick = () => {
// setIsMenuVisible((prev) => !prev);
// };
// const mapItemsWithClick = (items: any[]) => {
// return items.map((item) => ({
// ...item,
// onClick: () => {
// if (item.onClick) {
// item.onClick();
// }
// setIsMenuVisible(false);
// },
// subItems: item.subItems ? mapItemsWithClick(item.subItems) : undefined,
// }));
// };
// const renderMenuItem = (item: any, props: any) => (
// <div {...props}>
// <strong>{item.label}</strong>
// {item.subItems && <span style={{ marginLeft: "10px", color: "#888" }}>▶</span>}
// </div>
// );
// const renderMenu = (subMenu: JSX.Element) => <div>{subMenu}</div>;
// const modifiedArgs = {
// ...args,
// items: mapItemsWithClick(args.items),
// };
// return (
// <div
// ref={scopeRef}
// className="boundary"
// style={{ padding: "20px", height: "300px", border: "2px solid black" }}
// >
// <div style={{ height: "400px" }}>
// <Button
// ref={anchorRef}
// className="grey border-radius-3 vertical-padding-6 horizontal-padding-8"
// style={{ borderColor: isMenuVisible ? "var(--accent-color)" : "transparent" }}
// onClick={handleAnchorClick}
// >
// Anchor Element
// <i className="fa-sharp fa-solid fa-angle-down" style={{ marginLeft: 4 }}></i>
// </Button>
// </div>
// {isMenuVisible && (
// <Menu
// {...modifiedArgs}
// setVisibility={(visible) => setIsMenuVisible(visible)}
// anchorRef={anchorRef}
// scopeRef={scopeRef}
// renderMenu={renderMenu}
// renderMenuItem={renderMenuItem}
// />
// )}
// </div>
// );
// },
// args: {
// items: items,
// },
// };
export const RightClickMenu: Story = {
render: (args) => {
const scopeRef = useRef<HTMLDivElement>(null);
const [isMenuVisible, setIsMenuVisible] = useState(false);
const [menuPosition, setMenuPosition] = useState<{ top: number; left: number }>({ top: 0, left: 0 });
const handleBlockRightClick = (e: MouseEvent) => {
e.preventDefault(); // Prevent the default context menu
setMenuPosition({ top: e.clientY, left: e.clientX });
setIsMenuVisible(true);
};
useEffect(() => {
const blockElement = scopeRef.current;
if (blockElement) {
blockElement.addEventListener("contextmenu", handleBlockRightClick);
}
return () => {
if (blockElement) {
blockElement.removeEventListener("contextmenu", handleBlockRightClick);
}
};
}, []);
const mapItemsWithClick = (items: any[]) => {
return items.map((item) => ({
...item,
onClick: () => {
if (item.onClick) {
item.onClick();
setIsMenuVisible(false);
}
},
subItems: item.subItems ? mapItemsWithClick(item.subItems) : undefined,
}));
};
const modifiedArgs = {
...args,
items: mapItemsWithClick(args.items),
};
return (
<div
ref={scopeRef}
className="boundary"
style={{ padding: "20px", height: "300px", border: "2px solid black" }}
>
{isMenuVisible && (
<ContextMenu
{...modifiedArgs}
setVisibility={(visible) => setIsMenuVisible(visible)}
initialPosition={menuPosition}
scopeRef={scopeRef}
/>
)}
</div>
);
},
args: {
items: items,
},
};
export const RightMenuWidthCustomRenderer: Story = {
render: (args) => {
const scopeRef = useRef<HTMLDivElement>(null);
const [isMenuVisible, setIsMenuVisible] = useState(false);
const [menuPosition, setMenuPosition] = useState<{ top: number; left: number }>({ top: 0, left: 0 });
const handleBlockRightClick = (e: MouseEvent) => {
e.preventDefault(); // Prevent the default context menu
setMenuPosition({ top: e.clientY, left: e.clientX });
setIsMenuVisible(true);
};
useEffect(() => {
const blockElement = scopeRef.current;
if (blockElement) {
blockElement.addEventListener("contextmenu", handleBlockRightClick);
}
return () => {
if (blockElement) {
blockElement.removeEventListener("contextmenu", handleBlockRightClick);
}
};
}, []);
const mapItemsWithClick = (items: any[]) => {
return items.map((item) => ({
...item,
onClick: () => {
if (item.onClick) {
item.onClick();
}
setIsMenuVisible(false);
},
subItems: item.subItems ? mapItemsWithClick(item.subItems) : undefined,
}));
};
const renderMenuItem = (item: any, props: any) => (
<div {...props}>
<strong>{item.label}</strong>
{item.subItems && <span style={{ marginLeft: "10px", color: "#888" }}>▶</span>}
</div>
);
const renderMenu = (subMenu: JSX.Element) => <div>{subMenu}</div>;
const modifiedArgs = {
...args,
items: mapItemsWithClick(args.items),
};
return (
<div
ref={scopeRef}
className="boundary"
style={{ padding: "20px", height: "300px", border: "2px solid black" }}
>
{isMenuVisible && (
<ContextMenu
{...modifiedArgs}
setVisibility={(visible) => setIsMenuVisible(visible)}
initialPosition={menuPosition}
scopeRef={scopeRef}
renderMenu={renderMenu}
renderMenuItem={renderMenuItem}
/>
)}
</div>
);
},
args: {
items: items,
},
};

77
frontend/app/element/menu.tsx → frontend/app/element/contextmenu.tsx
View File

@ -6,7 +6,7 @@ import React, { memo, useEffect, useLayoutEffect, useRef, useState } from "react
import ReactDOM from "react-dom";
import { useDimensionsWithExistingRef } from "@/app/hook/useDimensions";
import "./menu.less";
import "./contextmenu.less";
type MenuItem = {
label: string;
@ -14,11 +14,11 @@ type MenuItem = {
onClick?: (e) => void;
};
const SubMenu = memo(
const SubContextMenu = memo(
({
subItems,
parentKey,
subMenuPosition,
subContextMenuPosition,
visibleSubMenus,
hoveredItems,
subMenuRefs,
@ -29,7 +29,7 @@ const SubMenu = memo(
}: {
subItems: MenuItem[];
parentKey: string;
subMenuPosition: {
subContextMenuPosition: {
[key: string]: { top: number; left: number; label: string };
};
visibleSubMenus: { [key: string]: any };
@ -52,12 +52,12 @@ const SubMenu = memo(
}
});
const position = subMenuPosition[parentKey];
const position = subContextMenuPosition[parentKey];
const isPositioned = position && position.top !== undefined && position.left !== undefined;
const subMenu = (
<div
className="menu sub-menu"
className="context-menu context-sub-menu"
ref={subMenuRefs.current[parentKey]}
style={{
top: position?.top || 0,
@ -72,14 +72,14 @@ const SubMenu = memo(
const isActive = hoveredItems.includes(newKey);
const menuItemProps = {
className: clsx("menu-item", { active: isActive }),
className: clsx("context-menu-item", { active: isActive }),
onMouseEnter: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) =>
handleMouseEnterItem(event, parentKey, idx, item),
onClick: (e: React.MouseEvent<HTMLDivElement>) => handleOnClick(e, item),
};
const renderedItem = renderMenuItem ? (
renderMenuItem(item, menuItemProps) // Remove portal here
renderMenuItem(item, menuItemProps)
) : (
<div key={newKey} {...menuItemProps}>
<span className="label">{item.label}</span>
@ -91,10 +91,10 @@ const SubMenu = memo(
<React.Fragment key={newKey}>
{renderedItem}
{visibleSubMenus[newKey]?.visible && item.subItems && (
<SubMenu
<SubContextMenu
subItems={item.subItems}
parentKey={newKey}
subMenuPosition={subMenuPosition}
subContextMenuPosition={subContextMenuPosition}
visibleSubMenus={visibleSubMenus}
hoveredItems={hoveredItems}
handleMouseEnterItem={handleMouseEnterItem}
@ -114,7 +114,7 @@ const SubMenu = memo(
}
);
const Menu = memo(
const ContextMenu = memo(
({
items,
anchorRef,
@ -140,16 +140,16 @@ const Menu = memo(
[key: string]: { top: number; left: number; label: string };
}>({});
const [position, setPosition] = useState<{ top: number; left: number }>({ top: 0, left: 0 });
const menuRef = useRef<HTMLDivElement>(null);
const subMenuRefs = useRef<{ [key: string]: React.RefObject<HTMLDivElement> }>({});
const contextMenuRef = useRef<HTMLDivElement>(null);
const subContextMenuRefs = useRef<{ [key: string]: React.RefObject<HTMLDivElement> }>({});
const domRect = useDimensionsWithExistingRef(scopeRef, 30);
const width = domRect?.width ?? 0;
const height = domRect?.height ?? 0;
items.forEach((_, idx) => {
const key = `${idx}`;
if (!subMenuRefs.current[key]) {
subMenuRefs.current[key] = React.createRef<HTMLDivElement>();
if (!subContextMenuRefs.current[key]) {
subContextMenuRefs.current[key] = React.createRef<HTMLDivElement>();
}
});
@ -163,8 +163,8 @@ const Menu = memo(
const scrollTop = window.scrollY || document.documentElement.scrollTop;
const scrollLeft = window.scrollX || document.documentElement.scrollLeft;
const menuWidth = menuRef.current?.offsetWidth || 0;
const menuHeight = menuRef.current?.offsetHeight || 0;
const menuWidth = contextMenuRef.current?.offsetWidth || 0;
const menuHeight = contextMenuRef.current?.offsetHeight || 0;
const boundaryTop = 0;
const boundaryLeft = 0;
@ -192,7 +192,7 @@ const Menu = memo(
}
setPosition({ top, left });
} else if (anchorRef.current && menuRef.current) {
} else if (anchorRef.current && contextMenuRef.current) {
// Calculate position based on anchorRef if it exists
const anchorRect = anchorRef.current.getBoundingClientRect();
const scrollTop = window.scrollY || document.documentElement.scrollTop;
@ -201,8 +201,8 @@ const Menu = memo(
let top = anchorRect.bottom + scrollTop;
let left = anchorRect.left + scrollLeft;
const menuWidth = menuRef.current.offsetWidth;
const menuHeight = menuRef.current.offsetHeight;
const menuWidth = contextMenuRef.current.offsetWidth;
const menuHeight = contextMenuRef.current.offsetHeight;
const boundaryTop = 0;
const boundaryLeft = 0;
@ -237,16 +237,17 @@ const Menu = memo(
useEffect(() => {
const handleClickOutside = (event: MouseEvent) => {
const isClickInsideDropdown = menuRef.current && menuRef.current.contains(event.target as Node);
const isClickInsideDropdown =
contextMenuRef.current && contextMenuRef.current.contains(event.target as Node);
const isClickInsideAnchor = anchorRef?.current
? anchorRef.current.contains(event.target as Node)
: false;
const isClickInsideSubMenus = Object.keys(subMenuRefs.current).some(
const isClickInsideSubMenus = Object.keys(subContextMenuRefs.current).some(
(key) =>
subMenuRefs.current[key]?.current &&
subMenuRefs.current[key]?.current.contains(event.target as Node)
subContextMenuRefs.current[key]?.current &&
subContextMenuRefs.current[key]?.current.contains(event.target as Node)
);
if (!isClickInsideDropdown && !isClickInsideAnchor && !isClickInsideSubMenus) {
@ -262,21 +263,21 @@ const Menu = memo(
}, []);
// Position submenus based on available space and scroll position
const handleSubMenuPosition = (
const handleSubContextMenuPosition = (
key: string,
itemRect: DOMRect,
parentRef: React.RefObject<HTMLDivElement>,
label: string
) => {
setTimeout(() => {
const subMenuRef = subMenuRefs.current[key]?.current;
if (!subMenuRef) return;
const subContextMenuRef = subContextMenuRefs.current[key]?.current;
if (!subContextMenuRef) return;
const scrollTop = window.scrollY || document.documentElement.scrollTop;
const scrollLeft = window.scrollX || document.documentElement.scrollLeft;
const submenuWidth = subMenuRef.offsetWidth;
const submenuHeight = subMenuRef.offsetHeight;
const submenuWidth = subContextMenuRef.offsetWidth;
const submenuHeight = subContextMenuRef.offsetHeight;
let left = itemRect.right + scrollLeft - 2; // Adjust for horizontal scroll
let top = itemRect.top - 2 + scrollTop; // Adjust for vertical scroll
@ -340,7 +341,7 @@ const Menu = memo(
setHoveredItems(newHoveredItems);
const itemRect = event.currentTarget.getBoundingClientRect();
handleSubMenuPosition(key, itemRect, menuRef, item.label);
handleSubContextMenuPosition(key, itemRect, contextMenuRef, item.label);
};
const handleOnClick = (e: React.MouseEvent<HTMLDivElement>, item: MenuItem) => {
@ -386,13 +387,17 @@ const Menu = memo(
// );
const menuMenu = (
<div className={clsx("menu", className)} ref={menuRef} style={{ top: position.top, left: position.left }}>
<div
className={clsx("context-menu", className)}
ref={contextMenuRef}
style={{ top: position.top, left: position.left }}
>
{items.map((item, index) => {
const key = `${index}`;
const isActive = hoveredItems.includes(key);
const menuItemProps = {
className: clsx("menu-item", { active: isActive }),
className: clsx("context-menu-item", { active: isActive }),
onMouseEnter: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) =>
handleMouseEnterItem(event, null, index, item),
onClick: (e: React.MouseEvent<HTMLDivElement>) => handleOnClick(e, item),
@ -411,15 +416,15 @@ const Menu = memo(
<React.Fragment key={key}>
{renderedItem}
{visibleSubMenus[key]?.visible && item.subItems && (
<SubMenu
<SubContextMenu
subItems={item.subItems}
parentKey={key}
subMenuPosition={subMenuPosition}
subContextMenuPosition={subMenuPosition}
visibleSubMenus={visibleSubMenus}
hoveredItems={hoveredItems}
handleMouseEnterItem={handleMouseEnterItem}
handleOnClick={handleOnClick}
subMenuRefs={subMenuRefs}
subMenuRefs={subContextMenuRefs}
renderMenu={renderMenu}
renderMenuItem={renderMenuItem}
/>
@ -434,4 +439,4 @@ const Menu = memo(
}
);
export { Menu };
export { ContextMenu };

0
frontend/app/element/dropdown.less Normal file
View File

0
frontend/app/element/dropdown.tsx Normal file
View File

11
frontend/app/element/list.stories.tsx
View File

@ -198,19 +198,24 @@ export const NestedWithClickHandlers: Story = {
const avatarItems = [
{
text: "John Doe",
icon: <Avatar name="John Doe" status="online" className="size-md" />,
icon: <Avatar name="John Doe" status="online" className="size-lg" />,
onClick: () => console.log("John Doe clicked"),
},
{
text: "Jane Smith",
icon: <Avatar name="Jane Smith" status="busy" className="size-md" />,
icon: <Avatar name="Jane Smith" status="busy" className="size-lg" />,
onClick: () => console.log("Jane Smith clicked"),
},
{
text: "Robert Brown",
icon: <Avatar name="Robert Brown" status="away" className="size-md" />,
icon: <Avatar name="Robert Brown" status="away" className="size-lg" />,
onClick: () => console.log("Robert Brown clicked"),
},
{
text: "Alice Lambert",
icon: <Avatar name="Alice Lambert" status="offline" className="size-lg" />,
onClick: () => console.log("Alice Lambert clicked"),
},
];
export const WithAvatars: Story = {

2
frontend/app/element/list.tsx
View File

@ -7,7 +7,7 @@ import "./list.less";
interface ListItem {
text: string;
icon: React.ReactNode;
icon?: React.ReactNode;
children?: ListItem[];
onClick?: () => void;
}

471
frontend/app/element/menu.stories.tsx
View File

@ -1,471 +0,0 @@
import type { Meta, StoryObj } from "@storybook/react";
import { fn } from "@storybook/test";
import { useEffect, useRef, useState } from "react";
import { Button } from "./button";
import { Menu } from "./menu";
const items = [
{ label: "Fruit", onClick: (e) => console.log("Clicked Option 1") },
{
label: "Vegetables",
subItems: [
{ label: "Carrot", onClick: (e) => console.log("Clicked Option 2 -> 1") },
{ label: "Potato", onClick: (e) => console.log("Clicked Option 2 -> 2") },
],
},
{
label: "Beverages",
subItems: [
{ label: "Juice", onClick: (e) => console.log("Clicked Option 3 -> 1") },
{ label: "Tea", onClick: (e) => console.log("Clicked Option 3 -> 2") },
{
label: "Coffee",
subItems: [
{ label: "Espresso", onClick: (e) => console.log("Clicked Option 3 -> 3 -> 1") },
{ label: "Latte", onClick: (e) => console.log("Clicked Option 3 -> 3 -> 2") },
{ label: "Cappuccino", onClick: (e) => console.log("Clicked Option 3 -> 3 -> 3") },
{
label: "Mocha",
subItems: [
{ label: "Dark Chocolate", onClick: (e) => console.log("Clicked Option 3 -> 3 -> 4 -> 1") },
{
label: "White Chocolate",
onClick: (e) => console.log("Clicked Option 3 -> 3 -> 4 -> 2"),
},
{ label: "Milk Chocolate", onClick: (e) => console.log("Clicked Option 3 -> 3 -> 4 -> 3") },
],
},
],
},
],
},
{
label: "Desserts",
subItems: [
{ label: "Cake", onClick: (e) => console.log("Clicked Option 4 -> 1") },
{ label: "Ice Cream", onClick: (e) => console.log("Clicked Option 4 -> 2") },
{ label: "Cookies", onClick: (e) => console.log("Clicked Option 4 -> 3") },
{ label: "Brownies", onClick: (e) => console.log("Clicked Option 4 -> 4") },
{ label: "Cupcakes", onClick: (e) => console.log("Clicked Option 4 -> 5") },
{ label: "Donuts", onClick: (e) => console.log("Clicked Option 4 -> 6") },
{ label: "Pie", onClick: (e) => console.log("Clicked Option 4 -> 7") },
],
},
];
const meta = {
title: "Elements/Menu",
component: Menu,
args: {
items: [],
anchorRef: undefined,
scopeRef: undefined,
initialPosition: undefined,
className: "",
setVisibility: fn(),
},
argTypes: {
items: {
description: "Items of menu",
},
anchorRef: {
description: "Element to attach the menu",
},
initialPosition: {
description: "Initial position of the menu",
},
setVisibility: {
description: "Visibility event handler",
},
scopeRef: {
description: "Component that defines the boundaries of the menu",
},
className: {
description: "Custom className",
},
},
} satisfies Meta<typeof Menu>;
export default meta;
type Story = StoryObj<typeof meta>;
export const DefaultRendererLeftPositioned: Story = {
render: (args) => {
const anchorRef = useRef<HTMLButtonElement>(null);
const scopeRef = useRef<HTMLDivElement>(null);
const [isMenuVisible, setIsMenuVisible] = useState(false);
const handleAnchorClick = () => {
setIsMenuVisible((prev) => !prev);
};
const mapItemsWithClick = (items: any[]) => {
return items.map((item) => ({
...item,
onClick: () => {
if (item.onClick) {
item.onClick();
setIsMenuVisible(false);
}
},
subItems: item.subItems ? mapItemsWithClick(item.subItems) : undefined,
}));
};
const modifiedArgs = {
...args,
items: mapItemsWithClick(args.items),
};
return (
<div
ref={scopeRef}
className="boundary"
style={{ padding: "20px", height: "300px", border: "2px solid black", position: "relative" }}
>
<div style={{ position: "absolute", top: 0, left: 0 }}>
<Button
ref={anchorRef}
className="grey border-radius-3 vertical-padding-6 horizontal-padding-8"
style={{ borderColor: isMenuVisible ? "var(--accent-color)" : "transparent" }}
onClick={handleAnchorClick}
>
Anchor Element
<i className="fa-sharp fa-solid fa-angle-down" style={{ marginLeft: 4 }}></i>
</Button>
</div>
{isMenuVisible && (
<Menu
{...modifiedArgs}
setVisibility={(visible) => setIsMenuVisible(visible)}
anchorRef={anchorRef}
scopeRef={scopeRef}
/>
)}
</div>
);
},
args: {
items: items,
},
};
export const DefaultRendererRightPositioned: Story = {
render: (args) => {
const anchorRef = useRef<HTMLButtonElement>(null);
const scopeRef = useRef<HTMLDivElement>(null);
const [isMenuVisible, setIsMenuVisible] = useState(false);
const handleAnchorClick = () => {
setIsMenuVisible((prev) => !prev);
};
const mapItemsWithClick = (items: any[]) => {
return items.map((item) => ({
...item,
onClick: () => {
if (item.onClick) {
item.onClick();
}
setIsMenuVisible(false);
},
subItems: item.subItems ? mapItemsWithClick(item.subItems) : undefined,
}));
};
const modifiedArgs = {
...args,
items: mapItemsWithClick(args.items),
};
return (
<div
ref={scopeRef}
className="boundary"
style={{ padding: "20px", height: "300px", border: "2px solid black", position: "relative" }}
>
<div style={{ position: "absolute", top: 0, right: 0 }}>
<Button
ref={anchorRef}
className="grey border-radius-3 vertical-padding-6 horizontal-padding-8"
style={{ borderColor: isMenuVisible ? "var(--accent-color)" : "transparent" }}
onClick={handleAnchorClick}
>
Anchor Element
<i className="fa-sharp fa-solid fa-angle-down" style={{ marginLeft: 4 }}></i>
</Button>
</div>
{isMenuVisible && (
<Menu
{...modifiedArgs}
setVisibility={(visible) => setIsMenuVisible(visible)}
anchorRef={anchorRef}
scopeRef={scopeRef}
/>
)}
</div>
);
},
args: {
items: items,
},
};
export const DefaultRendererBottomRightPositioned: Story = {
render: (args) => {
const anchorRef = useRef<HTMLButtonElement>(null);
const scopeRef = useRef<HTMLDivElement>(null);
const [isMenuVisible, setIsMenuVisible] = useState(false);
const handleAnchorClick = () => {
setIsMenuVisible((prev) => !prev);
};
const mapItemsWithClick = (items: any[]) => {
return items.map((item) => ({
...item,
onClick: () => {
if (item.onClick) {
item.onClick();
}
setIsMenuVisible(false);
},
subItems: item.subItems ? mapItemsWithClick(item.subItems) : undefined,
}));
};
const modifiedArgs = {
...args,
items: mapItemsWithClick(args.items),
};
return (
<div
ref={scopeRef}
className="boundary"
style={{ padding: "20px", height: "300px", border: "2px solid black", position: "relative" }}
>
<div style={{ position: "absolute", bottom: 0, left: 0 }}>
<Button
ref={anchorRef}
className="grey border-radius-3 vertical-padding-6 horizontal-padding-8"
style={{ borderColor: isMenuVisible ? "var(--accent-color)" : "transparent" }}
onClick={handleAnchorClick}
>
Anchor Element
<i className="fa-sharp fa-solid fa-angle-down" style={{ marginLeft: 4 }}></i>
</Button>
</div>
{isMenuVisible && (
<Menu
{...modifiedArgs}
setVisibility={(visible) => setIsMenuVisible(visible)}
anchorRef={anchorRef}
scopeRef={scopeRef}
/>
)}
</div>
);
},
args: {
items: items,
},
};
export const DefaultRendererBottomLeftPositioned: Story = {
render: (args) => {
const anchorRef = useRef<HTMLButtonElement>(null);
const scopeRef = useRef<HTMLDivElement>(null);
const [isMenuVisible, setIsMenuVisible] = useState(false);
const handleAnchorClick = () => {
setIsMenuVisible((prev) => !prev);
};
const mapItemsWithClick = (items: any[]) => {
return items.map((item) => ({
...item,
onClick: () => {
if (item.onClick) {
item.onClick();
}
setIsMenuVisible(false);
},
subItems: item.subItems ? mapItemsWithClick(item.subItems) : undefined,
}));
};
const modifiedArgs = {
...args,
items: mapItemsWithClick(args.items),
};
return (
<div
ref={scopeRef}
className="boundary"
style={{ padding: "20px", height: "300px", border: "2px solid black", position: "relative" }}
>
<div style={{ position: "absolute", bottom: 0, right: 0 }}>
<Button
ref={anchorRef}
className="grey border-radius-3 vertical-padding-6 horizontal-padding-8"
style={{ borderColor: isMenuVisible ? "var(--accent-color)" : "transparent" }}
onClick={handleAnchorClick}
>
Anchor Element
<i className="fa-sharp fa-solid fa-angle-down" style={{ marginLeft: 4 }}></i>
</Button>
</div>
{isMenuVisible && (
<Menu
{...modifiedArgs}
setVisibility={(visible) => setIsMenuVisible(visible)}
anchorRef={anchorRef}
scopeRef={scopeRef}
/>
)}
</div>
);
},
args: {
items: items,
},
};
export const CustomRenderer: Story = {
render: (args) => {
const anchorRef = useRef<HTMLButtonElement>(null);
const scopeRef = useRef<HTMLDivElement>(null);
const [isMenuVisible, setIsMenuVisible] = useState(false);
const handleAnchorClick = () => {
setIsMenuVisible((prev) => !prev);
};
const mapItemsWithClick = (items: any[]) => {
return items.map((item) => ({
...item,
onClick: () => {
if (item.onClick) {
item.onClick();
}
setIsMenuVisible(false);
},
subItems: item.subItems ? mapItemsWithClick(item.subItems) : undefined,
}));
};
const renderMenuItem = (item: any, props: any) => (
<div {...props}>
<strong>{item.label}</strong>
{item.subItems && <span style={{ marginLeft: "10px", color: "#888" }}>▶</span>}
</div>
);
const renderMenu = (subMenu: JSX.Element) => <div>{subMenu}</div>;
const modifiedArgs = {
...args,
items: mapItemsWithClick(args.items),
};
return (
<div
ref={scopeRef}
className="boundary"
style={{ padding: "20px", height: "300px", border: "2px solid black" }}
>
<div style={{ height: "400px" }}>
<Button
ref={anchorRef}
className="grey border-radius-3 vertical-padding-6 horizontal-padding-8"
style={{ borderColor: isMenuVisible ? "var(--accent-color)" : "transparent" }}
onClick={handleAnchorClick}
>
Anchor Element
<i className="fa-sharp fa-solid fa-angle-down" style={{ marginLeft: 4 }}></i>
</Button>
</div>
{isMenuVisible && (
<Menu
{...modifiedArgs}
setVisibility={(visible) => setIsMenuVisible(visible)}
anchorRef={anchorRef}
scopeRef={scopeRef}
renderMenu={renderMenu}
renderMenuItem={renderMenuItem}
/>
)}
</div>
);
},
args: {
items: items,
},
};
export const ContextMenu: Story = {
render: (args) => {
const scopeRef = useRef<HTMLDivElement>(null);
const [isMenuVisible, setIsMenuVisible] = useState(false);
const [menuPosition, setMenuPosition] = useState<{ top: number; left: number }>({ top: 0, left: 0 });
const handleBlockRightClick = (e: MouseEvent) => {
e.preventDefault(); // Prevent the default context menu
setMenuPosition({ top: e.clientY, left: e.clientX });
setIsMenuVisible(true);
};
useEffect(() => {
const blockElement = scopeRef.current;
if (blockElement) {
blockElement.addEventListener("contextmenu", handleBlockRightClick);
}
return () => {
if (blockElement) {
blockElement.removeEventListener("contextmenu", handleBlockRightClick);
}
};
}, []);
const mapItemsWithClick = (items: any[]) => {
return items.map((item) => ({
...item,
onClick: () => {
if (item.onClick) {
item.onClick();
setIsMenuVisible(false);
}
},
subItems: item.subItems ? mapItemsWithClick(item.subItems) : undefined,
}));
};
const modifiedArgs = {
...args,
items: mapItemsWithClick(args.items),
};
return (
<div
ref={scopeRef}
className="boundary"
style={{ padding: "20px", height: "300px", border: "2px solid black" }}
>
{isMenuVisible && (
<Menu
{...modifiedArgs}
setVisibility={(visible) => setIsMenuVisible(visible)}
initialPosition={menuPosition}
scopeRef={scopeRef}
/>
)}
</div>
);
},
args: {
items: items,
},
};

23
frontend/app/view/chatview/chatitem.less Normal file
View File

@ -0,0 +1,23 @@
// Copyright 2024, Command Line Inc.
// SPDX-License-Identifier: Apache-2.0
.chat-item {
display: flex;
flex-direction: column;
padding: 10px;
margin-bottom: 10px;
border-radius: 6px;
.chat-time {
font-size: 12px;
color: var(--main-text-color);
margin-bottom: 4px;
text-align: right;
}
.chat-text {
font-size: 14px;
color: var(--main-text-color);
line-height: 1.5;
}
}

21
frontend/app/view/chatview/chatitem.tsx Normal file
View File

@ -0,0 +1,21 @@
// Copyright 2024, Command Line Inc.
// SPDX-License-Identifier: Apache-2.0
import type { Message } from "./data";
import "chatitem.less";
interface ChatItemProps {
message: Message;
}
const ChatItem = ({ message }: ChatItemProps) => {
const { text, timestamp } = message;
return (
<div className="chat-item">
<div className="chat-time">{timestamp}</div>
<div className="chat-text">{text}</div>
</div>
);
};
export { ChatItem };

321
frontend/app/view/chatview/data.tsx Normal file
View File

@ -0,0 +1,321 @@
// Copyright 2024, Command Line Inc.
// SPDX-License-Identifier: Apache-2.0
import { Avatar } from "@/app/element/avatar";
export type Channel = {
text: string;
icon: JSX.Element;
onClick: () => void;
children?: Channel[];
};
export const channels: Channel[] = [
{
text: "Channel 1",
icon: <i className="fa-sharp fa-solid fa-wave"></i>,
onClick: () => console.log("Channel 1 clicked"),
},
{
text: "Channel 2",
icon: <i className="fa-sharp fa-solid fa-wave"></i>,
onClick: () => console.log("Channel 2 clicked"),
children: [
{
text: "Channel 2.1",
icon: <i className="fa-sharp fa-solid fa-wave"></i>,
onClick: () => console.log("Channel 2.1 clicked"),
children: [
{
text: "Channel 2.1.1",
icon: <i className="fa-sharp fa-solid fa-wave"></i>,
onClick: () => console.log("Channel 2.1.1 clicked"),
},
{
text: "Channel 2.1.2",
icon: <i className="fa-sharp fa-solid fa-wave"></i>,
onClick: () => console.log("Channel 2.1.2 clicked"),
},
],
},
{
text: "Channel 2.2",
icon: <i className="fa-sharp fa-solid fa-wave"></i>,
onClick: () => console.log("Channel 2.2 clicked"),
},
],
},
{
text: "Channel 3",
icon: <i className="fa-sharp fa-solid fa-wave"></i>,
onClick: () => console.log("Channel 3 clicked"),
children: [
{
text: "Channel 3.1",
icon: <i className="fa-sharp fa-solid fa-wave"></i>,
onClick: () => console.log("Channel 3.1 clicked"),
},
],
},
{
text: "Channel 4",
icon: <i className="fa-sharp fa-solid fa-wave"></i>,
onClick: () => console.log("Channel 4 clicked"),
},
{
text: "Channel 5",
icon: <i className="fa-sharp fa-solid fa-wave"></i>,
onClick: () => console.log("Channel 5 clicked"),
children: [
{
text: "Channel 5.1",
icon: <i className="fa-sharp fa-solid fa-wave"></i>,
onClick: () => console.log("Channel 5.1 clicked"),
children: [
{
text: "Channel 5.1.1",
icon: <i className="fa-sharp fa-solid fa-wave"></i>,
onClick: () => console.log("Channel 5.1.1 clicked"),
},
{
text: "Channel 5.1.2",
icon: <i className="fa-sharp fa-solid fa-wave"></i>,
onClick: () => console.log("Channel 5.1.2 clicked"),
children: [
{
text: "Channel 5.1.2.1",
icon: <i className="fa-sharp fa-solid fa-wave"></i>,
onClick: () => console.log("Channel 5.1.2.1 clicked"),
},
],
},
],
},
],
},
{
text: "Channel 6",
icon: <i className="fa-sharp fa-solid fa-wave"></i>,
onClick: () => console.log("Channel 6 clicked"),
},
{
text: "Channel 7",
icon: <i className="fa-sharp fa-solid fa-wave"></i>,
onClick: () => console.log("Channel 7 clicked"),
children: [
{
text: "Channel 7.1",
icon: <i className="fa-sharp fa-solid fa-wave"></i>,
onClick: () => console.log("Channel 7.1 clicked"),
},
],
},
{
text: "Channel 8",
icon: <i className="fa-sharp fa-solid fa-wave"></i>,
onClick: () => console.log("Channel 8 clicked"),
},
{
text: "Channel 9",
icon: <i className="fa-sharp fa-solid fa-wave"></i>,
onClick: () => console.log("Channel 9 clicked"),
children: [
{
text: "Channel 9.1",
icon: <i className="fa-sharp fa-solid fa-wave"></i>,
onClick: () => console.log("Channel 9.1 clicked"),
children: [
{
text: "Channel 9.1.1",
icon: <i className="fa-sharp fa-solid fa-wave"></i>,
onClick: () => console.log("Channel 9.1.1 clicked"),
},
{
text: "Channel 9.1.2",
icon: <i className="fa-sharp fa-solid fa-wave"></i>,
onClick: () => console.log("Channel 9.1.2 clicked"),
},
],
},
],
},
{
text: "Channel 10",
icon: <i className="fa-sharp fa-solid fa-wave"></i>,
onClick: () => console.log("Channel 10 clicked"),
},
{
text: "Channel 11",
icon: <i className="fa-sharp fa-solid fa-wave"></i>,
onClick: () => console.log("Channel 11 clicked"),
},
{
text: "Channel 12",
icon: <i className="fa-sharp fa-solid fa-wave"></i>,
onClick: () => console.log("Channel 12 clicked"),
},
{
text: "Channel 13",
icon: <i className="fa-sharp fa-solid fa-wave"></i>,
onClick: () => console.log("Channel 13 clicked"),
},
{
text: "Channel 14",
icon: <i className="fa-sharp fa-solid fa-wave"></i>,
onClick: () => console.log("Channel 14 clicked"),
children: [
{
text: "Channel 14.1",
icon: <i className="fa-sharp fa-solid fa-wave"></i>,
onClick: () => console.log("Channel 14.1 clicked"),
},
],
},
{
text: "Channel 15",
icon: <i className="fa-sharp fa-solid fa-wave"></i>,
onClick: () => console.log("Channel 15 clicked"),
},
{
text: "Channel 16",
icon: <i className="fa-sharp fa-solid fa-wave"></i>,
onClick: () => console.log("Channel 16 clicked"),
},
{
text: "Channel 17",
icon: <i className="fa-sharp fa-solid fa-wave"></i>,
onClick: () => console.log("Channel 17 clicked"),
children: [
{
text: "Channel 17.1",
icon: <i className="fa-sharp fa-solid fa-wave"></i>,
onClick: () => console.log("Channel 17.1 clicked"),
children: [
{
text: "Channel 17.1.1",
icon: <i className="fa-sharp fa-solid fa-wave"></i>,
onClick: () => console.log("Channel 17.1.1 clicked"),
},
{
text: "Channel 17.1.2",
icon: <i className="fa-sharp fa-solid fa-wave"></i>,
onClick: () => console.log("Channel 17.1.2 clicked"),
},
],
},
],
},
{
text: "Channel 18",
icon: <i className="fa-sharp fa-solid fa-wave"></i>,
onClick: () => console.log("Channel 18 clicked"),
},
{
text: "Channel 19",
icon: <i className="fa-sharp fa-solid fa-wave"></i>,
onClick: () => console.log("Channel 19 clicked"),
},
{
text: "Channel 20",
icon: <i className="fa-sharp fa-solid fa-wave"></i>,
onClick: () => console.log("Channel 20 clicked"),
},
{
text: "Channel 21",
icon: <i className="fa-sharp fa-solid fa-wave"></i>,
onClick: () => console.log("Channel 21 clicked"),
},
{
text: "Channel 22",
icon: <i className="fa-sharp fa-solid fa-wave"></i>,
onClick: () => console.log("Channel 22 clicked"),
},
{
text: "Channel 23",
icon: <i className="fa-sharp fa-solid fa-wave"></i>,
onClick: () => console.log("Channel 23 clicked"),
},
{
text: "Channel 24",
icon: <i className="fa-sharp fa-solid fa-wave"></i>,
onClick: () => console.log("Channel 24 clicked"),
},
{
text: "Channel 25",
icon: <i className="fa-sharp fa-solid fa-wave"></i>,
onClick: () => console.log("Channel 25 clicked"),
},
];
export type User = {
name: string;
status: "online" | "busy" | "away" | "offline";
onClick: () => void;
};
export const users = [
{
text: "John Doe",
status: "online",
icon: <Avatar name="John Doe" status="online" className="size-lg" />,
onClick: () => console.log("John Doe clicked"),
},
{
text: "Jane Smith",
status: "busy",
icon: <Avatar name="Jane Smith" status="busy" className="size-lg" />,
onClick: () => console.log("Jane Smith clicked"),
},
{
text: "Robert Brown",
status: "away",
icon: <Avatar name="Robert Brown" status="away" className="size-lg" />,
onClick: () => console.log("Robert Brown clicked"),
},
{
text: "Alice Lambert",
status: "offline",
icon: <Avatar name="Alice Lambert" status="offline" className="size-lg" />,
onClick: () => console.log("Alice Lambert clicked"),
},
];
export type Message = {
text: string;
timestamp: string;
};
export const messages: Message[] = [
{ text: "Message 1 content", timestamp: "2024-09-24 17:02:12" },
{ text: "Message 2 content", timestamp: "2024-07-11 04:17:12" },
{ text: "Message 3 content", timestamp: "2024-07-30 15:32:12" },
{ text: "Message 4 content", timestamp: "2024-07-22 00:05:12" },
{ text: "Message 5 content", timestamp: "2024-06-29 17:42:12" },
{ text: "Message 6 content", timestamp: "2024-08-05 00:48:12" },
{ text: "Message 7 content", timestamp: "2024-08-11 01:19:12" },
{ text: "Message 8 content", timestamp: "2024-07-08 09:43:12" },
{ text: "Message 9 content", timestamp: "2024-09-08 21:47:12" },
{ text: "Message 10 content", timestamp: "2024-08-26 13:30:12" },
{ text: "Message 11 content", timestamp: "2024-07-02 14:35:12" },
{ text: "Message 12 content", timestamp: "2024-08-04 01:43:12" },
{ text: "Message 13 content", timestamp: "2024-06-26 17:40:12" },
{ text: "Message 14 content", timestamp: "2024-07-15 12:19:12" },
{ text: "Message 15 content", timestamp: "2024-09-18 21:13:12" },
{ text: "Message 16 content", timestamp: "2024-07-20 07:41:12" },
{ text: "Message 17 content", timestamp: "2024-09-21 05:35:12" },
{ text: "Message 18 content", timestamp: "2024-09-09 01:02:12" },
{ text: "Message 19 content", timestamp: "2024-08-18 12:29:12" },
{ text: "Message 20 content", timestamp: "2024-09-22 10:10:12" },
{ text: "Message 21 content", timestamp: "2024-09-05 08:35:12" },
{ text: "Message 22 content", timestamp: "2024-07-12 01:07:12" },
{ text: "Message 23 content", timestamp: "2024-06-27 11:35:12" },
{ text: "Message 24 content", timestamp: "2024-08-19 03:15:12" },
{ text: "Message 25 content", timestamp: "2024-09-14 20:29:12" },
{ text: "Message 26 content", timestamp: "2024-06-29 07:10:12" },
{ text: "Message 27 content", timestamp: "2024-07-28 14:05:12" },
{ text: "Message 28 content", timestamp: "2024-08-22 02:15:12" },
{ text: "Message 29 content", timestamp: "2024-09-07 15:47:12" },
{ text: "Message 30 content", timestamp: "2024-09-01 13:21:12" },
{ text: "Message 31 content", timestamp: "2024-07-03 16:42:12" },
{ text: "Message 32 content", timestamp: "2024-09-04 04:11:12" },
{ text: "Message 33 content", timestamp: "2024-08-07 03:14:12" },
];