this.gui 0.0.0

package/src/components/MessagesPane.tsx

@@ -0,0 +1,87 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Sheet from '@mui/joy/Sheet';
+import Stack from '@mui/joy/Stack';
+import AvatarWithStatus from './AvatarWithStatus';
+import ChatBubble from './ChatBubble';
+import MessageInput from './MessageInput';
+import MessagesPaneHeader from './MessagesPaneHeader';
+import { ChatProps, MessageProps } from '../types';
+
+type MessagesPaneProps = {
+  chat: ChatProps;
+};
+
+export default function MessagesPane({ chat }: MessagesPaneProps) {
+  const [chatMessages, setChatMessages] = React.useState(chat.messages);
+  const [textAreaValue, setTextAreaValue] = React.useState('');
+
+  React.useEffect(() => {
+    setChatMessages(chat.messages);
+  }, [chat.messages]);
+
+  return (
+    <Sheet
+      sx={{
+        height: { xs: 'calc(100dvh - var(--Header-height))', lg: '100dvh' },
+        display: 'flex',
+        flexDirection: 'column',
+        backgroundColor: 'background.level1',
+      }}
+    >
+      <MessagesPaneHeader sender={chat.sender} />
+
+      <Box
+        sx={{
+          display: 'flex',
+          flex: 1,
+          minHeight: 0,
+          px: 2,
+          py: 3,
+          overflowY: 'scroll',
+          flexDirection: 'column-reverse',
+        }}
+      >
+        <Stack spacing={2} justifyContent="flex-end">
+          {chatMessages.map((message: MessageProps, index: number) => {
+            const isYou = message.sender === 'You';
+            return (
+              <Stack
+                key={index}
+                direction="row"
+                spacing={2}
+                flexDirection={isYou ? 'row-reverse' : 'row'}
+              >
+                {message.sender !== 'You' && (
+                  <AvatarWithStatus
+                    online={message.sender.online}
+                    src={message.sender.avatar}
+                  />
+                )}
+                <ChatBubble variant={isYou ? 'sent' : 'received'} {...message} />
+              </Stack>
+            );
+          })}
+        </Stack>
+      </Box>
+
+      <MessageInput
+        textAreaValue={textAreaValue}
+        setTextAreaValue={setTextAreaValue}
+        onSubmit={() => {
+          const newId = chatMessages.length + 1;
+          const newIdString = newId.toString();
+          setChatMessages([
+            ...chatMessages,
+            {
+              id: newIdString,
+              sender: 'You',
+              content: textAreaValue,
+              timestamp: 'Just now',
+            },
+          ]);
+        }}
+      />
+    </Sheet>
+  );
+}

package/src/components/MessagesPaneHeader.tsx

@@ -0,0 +1,105 @@
+import * as React from 'react';
+import Avatar from '@mui/joy/Avatar';
+import Button from '@mui/joy/Button';
+import Chip from '@mui/joy/Chip';
+import IconButton from '@mui/joy/IconButton';
+import Stack from '@mui/joy/Stack';
+import Typography from '@mui/joy/Typography';
+import CircleIcon from '@mui/icons-material/Circle';
+import ArrowBackIosNewRoundedIcon from '@mui/icons-material/ArrowBackIosNewRounded';
+import PhoneInTalkRoundedIcon from '@mui/icons-material/PhoneInTalkRounded';
+import MoreVertRoundedIcon from '@mui/icons-material/MoreVertRounded';
+import { UserProps } from '../types';
+import { toggleMessagesPane } from '../utils';
+
+type MessagesPaneHeaderProps = {
+  sender: UserProps;
+};
+
+export default function MessagesPaneHeader({ sender }: MessagesPaneHeaderProps) {
+  return (
+    <Stack
+      direction="row"
+      justifyContent="space-between"
+      sx={{
+        borderBottom: '1px solid',
+        borderColor: 'divider',
+        backgroundColor: 'background.body',
+      }}
+      py={{ xs: 2, md: 2 }}
+      px={{ xs: 1, md: 2 }}
+    >
+      <Stack direction="row" spacing={{ xs: 1, md: 2 }} alignItems="center">
+        <IconButton
+          variant="plain"
+          color="neutral"
+          size="sm"
+          sx={{
+            display: { xs: 'inline-flex', sm: 'none' },
+          }}
+          onClick={() => toggleMessagesPane()}
+        >
+          <ArrowBackIosNewRoundedIcon />
+        </IconButton>
+        <Avatar size="lg" src={sender.avatar} />
+        <div>
+          <Typography
+            fontWeight="lg"
+            fontSize="lg"
+            component="h2"
+            noWrap
+            endDecorator={
+              sender.online ? (
+                <Chip
+                  variant="outlined"
+                  size="sm"
+                  color="neutral"
+                  sx={{
+                    borderRadius: 'sm',
+                  }}
+                  startDecorator={
+                    <CircleIcon sx={{ fontSize: 8 }} color="success" />
+                  }
+                  slotProps={{ root: { component: 'span' } }}
+                >
+                  Online
+                </Chip>
+              ) : undefined
+            }
+          >
+            {sender.name}
+          </Typography>
+
+          <Typography level="body-sm">{sender.username}</Typography>
+        </div>
+      </Stack>
+      <Stack spacing={1} direction="row" alignItems="center">
+        <Button
+          startDecorator={<PhoneInTalkRoundedIcon />}
+          color="neutral"
+          variant="outlined"
+          size="sm"
+          sx={{
+            display: { xs: 'none', md: 'inline-flex' },
+          }}
+        >
+          Call
+        </Button>
+        <Button
+          color="neutral"
+          variant="outlined"
+          size="sm"
+          sx={{
+            display: { xs: 'none', md: 'inline-flex' },
+          }}
+        >
+          View profile
+        </Button>
+
+        <IconButton size="sm" variant="plain" color="neutral">
+          <MoreVertRoundedIcon />
+        </IconButton>
+      </Stack>
+    </Stack>
+  );
+}

package/src/components/MuiLogo.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import AspectRatio, { AspectRatioProps } from '@mui/joy/AspectRatio';
+
+export default function MuiLogo({ sx, ...props }: AspectRatioProps) {
+  return (
+    <AspectRatio
+      ratio="1"
+      variant="plain"
+      {...props}
+      sx={[
+        {
+          width: 36,
+          borderRadius: 'sm',
+        },
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
+    >
+      <div>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="20"
+          viewBox="0 0 36 32"
+          fill="none"
+        >
+          <path
+            d="M30.343 21.976a1 1 0 00.502-.864l.018-5.787a1 1 0 01.502-.864l3.137-1.802a1 1 0 011.498.867v10.521a1 1 0 01-.502.867l-11.839 6.8a1 1 0 01-.994.001l-9.291-5.314a1 1 0 01-.504-.868v-5.305c0-.006.007-.01.013-.007.005.003.012 0 .012-.007v-.006c0-.004.002-.008.006-.01l7.652-4.396c.007-.004.004-.015-.004-.015a.008.008 0 01-.008-.008l.015-5.201a1 1 0 00-1.5-.87l-5.687 3.277a1 1 0 01-.998 0L6.666 9.7a1 1 0 00-1.499.866v9.4a1 1 0 01-1.496.869l-3.166-1.81a1 1 0 01-.504-.87l.028-16.43A1 1 0 011.527.86l10.845 6.229a1 1 0 00.996 0L24.21.86a1 1 0 011.498.868v16.434a1 1 0 01-.501.867l-5.678 3.27a1 1 0 00.004 1.735l3.132 1.783a1 1 0 00.993-.002l6.685-3.839zM31 7.234a1 1 0 001.514.857l3-1.8A1 1 0 0036 5.434V1.766A1 1 0 0034.486.91l-3 1.8a1 1 0 00-.486.857v3.668z"
+            fill="#007FFF"
+          />
+        </svg>
+      </div>
+    </AspectRatio>
+  );
+}

package/src/components/MyMessages.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import Sheet from '@mui/joy/Sheet';
+import MessagesPane from './MessagesPane';
+import ChatsPane from './ChatsPane';
+import { ChatProps } from '../types';
+import { chats } from '../data';
+
+export default function MyProfile() {
+  const [selectedChat, setSelectedChat] = React.useState<ChatProps>(chats[0]);
+  return (
+    <Sheet
+      sx={{
+        flex: 1,
+        width: '100%',
+        mx: 'auto',
+        pt: { xs: 'var(--Header-height)', sm: 0 },
+        display: 'grid',
+        gridTemplateColumns: {
+          xs: '1fr',
+          sm: 'minmax(min-content, min(30%, 400px)) 1fr',
+        },
+      }}
+    >
+      <Sheet
+        sx={{
+          position: {
+            xs: 'fixed',
+            sm: 'sticky',
+          },
+          transform: {
+            xs: 'translateX(calc(100% * (var(--MessagesPane-slideIn, 0) - 1)))',
+            sm: 'none',
+          },
+          transition: 'transform 0.4s, width 0.4s',
+          zIndex: 100,
+          width: '100%',
+          top: 52,
+        }}
+      >
+        <ChatsPane
+          chats={chats}
+          selectedChatId={selectedChat.id}
+          setSelectedChat={setSelectedChat}
+        />
+      </Sheet>
+      <MessagesPane chat={selectedChat} />
+    </Sheet>
+  );
+}

package/src/components/Sidebar.tsx

@@ -0,0 +1,320 @@
+import * as React from 'react';
+import GlobalStyles from '@mui/joy/GlobalStyles';
+import Avatar from '@mui/joy/Avatar';
+import Box from '@mui/joy/Box';
+import Button from '@mui/joy/Button';
+import Card from '@mui/joy/Card';
+import Chip from '@mui/joy/Chip';
+import Divider from '@mui/joy/Divider';
+import IconButton from '@mui/joy/IconButton';
+import Input from '@mui/joy/Input';
+import LinearProgress from '@mui/joy/LinearProgress';
+import List from '@mui/joy/List';
+import ListItem from '@mui/joy/ListItem';
+import ListItemButton, { listItemButtonClasses } from '@mui/joy/ListItemButton';
+import ListItemContent from '@mui/joy/ListItemContent';
+import Typography from '@mui/joy/Typography';
+import Sheet from '@mui/joy/Sheet';
+import Stack from '@mui/joy/Stack';
+import SearchRoundedIcon from '@mui/icons-material/SearchRounded';
+import HomeRoundedIcon from '@mui/icons-material/HomeRounded';
+import DashboardRoundedIcon from '@mui/icons-material/DashboardRounded';
+import CollectionsBookmarkRoundedIcon from '@mui/icons-material/CollectionsBookmarkRounded';
+import AssignmentRoundedIcon from '@mui/icons-material/AssignmentRounded';
+import QuestionAnswerRoundedIcon from '@mui/icons-material/QuestionAnswerRounded';
+import GroupRoundedIcon from '@mui/icons-material/GroupRounded';
+import SupportRoundedIcon from '@mui/icons-material/SupportRounded';
+import SettingsRoundedIcon from '@mui/icons-material/SettingsRounded';
+import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
+import LogoutRoundedIcon from '@mui/icons-material/LogoutRounded';
+import BadgeRoundedIcon from '@mui/icons-material/BadgeRounded';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+
+import ColorSchemeToggle from './ColorSchemeToggle';
+import { closeSidebar } from '../utils';
+
+function Toggler({
+  defaultExpanded = false,
+  renderToggle,
+  children,
+}: {
+  defaultExpanded?: boolean;
+  children: React.ReactNode;
+  renderToggle: (params: {
+    open: boolean;
+    setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  }) => React.ReactNode;
+}) {
+  const [open, setOpen] = React.useState(defaultExpanded);
+  return (
+    <React.Fragment>
+      {renderToggle({ open, setOpen })}
+      <Box
+        sx={{
+          display: 'grid',
+          gridTemplateRows: open ? '1fr' : '0fr',
+          transition: '0.2s ease',
+          '& > *': {
+            overflow: 'hidden',
+          },
+        }}
+      >
+        {children}
+      </Box>
+    </React.Fragment>
+  );
+}
+
+export default function Sidebar() {
+  return (
+    <Sheet
+      className="Sidebar"
+      sx={{
+        position: {
+          xs: 'fixed',
+          md: 'sticky',
+        },
+        transform: {
+          xs: 'translateX(calc(100% * (var(--SideNavigation-slideIn, 0) - 1)))',
+          md: 'none',
+        },
+        transition: 'transform 0.4s, width 0.4s',
+        zIndex: 10000,
+        height: '100dvh',
+        width: 'var(--Sidebar-width)',
+        top: 0,
+        p: 1.5,
+        py: 2,
+        flexShrink: 0,
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 2,
+        borderRight: '1px solid',
+        borderColor: 'divider',
+      }}
+    >
+      <GlobalStyles
+        styles={(theme) => ({
+          ':root': {
+            '--Sidebar-width': '220px',
+            [theme.breakpoints.up('lg')]: {
+              '--Sidebar-width': '240px',
+            },
+          },
+        })}
+      />
+      <Box
+        className="Sidebar-overlay"
+        sx={{
+          position: 'fixed',
+          zIndex: 9998,
+          top: 0,
+          left: 0,
+          width: '100vw',
+          height: '100vh',
+          opacity: 'var(--SideNavigation-slideIn)',
+          backgroundColor: 'var(--joy-palette-background-backdrop)',
+          transition: 'opacity 0.4s',
+          transform: {
+            xs: 'translateX(calc(100% * (var(--SideNavigation-slideIn, 0) - 1) + var(--SideNavigation-slideIn, 0) * var(--Sidebar-width, 0px)))',
+            lg: 'translateX(-100%)',
+          },
+        }}
+        onClick={() => closeSidebar()}
+      />
+      <Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
+        <IconButton variant="soft" color="primary" size="sm">
+          <BadgeRoundedIcon />
+        </IconButton>
+        <Typography level="title-lg">Profiles</Typography>
+        <ColorSchemeToggle sx={{ ml: 'auto' }} />
+      </Box>
+      <Input size="sm" startDecorator={<SearchRoundedIcon />} placeholder="Search" />
+      <Box
+        sx={{
+          minHeight: 0,
+          overflow: 'hidden auto',
+          flexGrow: 1,
+          display: 'flex',
+          flexDirection: 'column',
+          [`& .${listItemButtonClasses.root}`]: {
+            gap: 1.5,
+          },
+        }}
+      >
+        <List
+          size="sm"
+          sx={{
+            gap: 1,
+            '--List-nestedInsetStart': '30px',
+            '--ListItem-radius': (theme) => theme.vars.radius.sm,
+          }}
+        >
+          <ListItem>
+            <ListItemButton>
+              <HomeRoundedIcon />
+              <ListItemContent>
+                <Typography level="title-sm">Home</Typography>
+              </ListItemContent>
+            </ListItemButton>
+          </ListItem>
+
+          <ListItem>
+            <ListItemButton>
+              <DashboardRoundedIcon />
+              <ListItemContent>
+                <Typography level="title-sm">Dashboard</Typography>
+              </ListItemContent>
+            </ListItemButton>
+          </ListItem>
+
+          <ListItem>
+            <ListItemButton>
+              <CollectionsBookmarkRoundedIcon />
+              <ListItemContent>
+                <Typography level="title-sm">Projects</Typography>
+              </ListItemContent>
+            </ListItemButton>
+          </ListItem>
+
+          <ListItem nested>
+            <Toggler
+              renderToggle={({ open, setOpen }) => (
+                <ListItemButton onClick={() => setOpen(!open)}>
+                  <AssignmentRoundedIcon />
+                  <ListItemContent>
+                    <Typography level="title-sm">Tasks</Typography>
+                  </ListItemContent>
+                  <KeyboardArrowDownIcon
+                    sx={{ transform: open ? 'rotate(180deg)' : 'none' }}
+                  />
+                </ListItemButton>
+              )}
+            >
+              <List sx={{ gap: 0.5 }}>
+                <ListItem sx={{ mt: 0.5 }}>
+                  <ListItemButton>All tasks</ListItemButton>
+                </ListItem>
+                <ListItem>
+                  <ListItemButton>Backlog</ListItemButton>
+                </ListItem>
+                <ListItem>
+                  <ListItemButton>In progress</ListItemButton>
+                </ListItem>
+                <ListItem>
+                  <ListItemButton>Done</ListItemButton>
+                </ListItem>
+              </List>
+            </Toggler>
+          </ListItem>
+
+          <ListItem>
+            <ListItemButton selected>
+              <QuestionAnswerRoundedIcon />
+              <ListItemContent>
+                <Typography level="title-sm">Messages</Typography>
+              </ListItemContent>
+              <Chip size="sm" color="primary" variant="solid">
+                4
+              </Chip>
+            </ListItemButton>
+          </ListItem>
+
+          <ListItem nested>
+            <Toggler
+              renderToggle={({ open, setOpen }) => (
+                <ListItemButton onClick={() => setOpen(!open)}>
+                  <GroupRoundedIcon />
+                  <ListItemContent>
+                    <Typography level="title-sm">Users</Typography>
+                  </ListItemContent>
+                  <KeyboardArrowDownIcon
+                    sx={{ transform: open ? 'rotate(180deg)' : 'none' }}
+                  />
+                </ListItemButton>
+              )}
+            >
+              <List sx={{ gap: 0.5 }}>
+                <ListItem sx={{ mt: 0.5 }}>
+                  <ListItemButton
+                    role="menuitem"
+                    component="a"
+                    href="/joy-ui/getting-started/templates/profile-dashboard/"
+                  >
+                    My profile
+                  </ListItemButton>
+                </ListItem>
+                <ListItem>
+                  <ListItemButton>Create a new user</ListItemButton>
+                </ListItem>
+                <ListItem>
+                  <ListItemButton>Roles & permission</ListItemButton>
+                </ListItem>
+              </List>
+            </Toggler>
+          </ListItem>
+        </List>
+
+        <List
+          size="sm"
+          sx={{
+            mt: 'auto',
+            flexGrow: 0,
+            '--ListItem-radius': (theme) => theme.vars.radius.sm,
+            '--List-gap': '8px',
+            mb: 2,
+          }}
+        >
+          <ListItem>
+            <ListItemButton>
+              <SupportRoundedIcon />
+              Support
+            </ListItemButton>
+          </ListItem>
+          <ListItem>
+            <ListItemButton>
+              <SettingsRoundedIcon />
+              Settings
+            </ListItemButton>
+          </ListItem>
+        </List>
+        <Card
+          invertedColors
+          variant="soft"
+          color="warning"
+          size="sm"
+          sx={{ boxShadow: 'none' }}
+        >
+          <Stack direction="row" justifyContent="space-between" alignItems="center">
+            <Typography level="title-sm">Used space</Typography>
+            <IconButton size="sm">
+              <CloseRoundedIcon />
+            </IconButton>
+          </Stack>
+          <Typography level="body-xs">
+            Your team has used 80% of your available space. Need more?
+          </Typography>
+          <LinearProgress variant="outlined" value={80} determinate sx={{ my: 1 }} />
+          <Button size="sm" variant="solid">
+            Upgrade plan
+          </Button>
+        </Card>
+      </Box>
+      <Divider />
+      <Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
+        <Avatar
+          variant="outlined"
+          size="sm"
+          src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?auto=format&fit=crop&w=286"
+        />
+        <Box sx={{ minWidth: 0, flex: 1 }}>
+          <Typography level="title-sm">Siriwat K.</Typography>
+          <Typography level="body-xs">siriwatk@test.com</Typography>
+        </Box>
+        <IconButton size="sm" variant="plain" color="neutral">
+          <LogoutRoundedIcon />
+        </IconButton>
+      </Box>
+    </Sheet>
+  );
+}

package/src/createServiceWorker.js

@@ -0,0 +1,52 @@
+// In production, we register a service worker to serve assets from local cache.
+
+// This lets the app load faster on subsequent visits in production, and gives
+// it offline capabilities. However, it also means that developers (and users)
+// will only see deployed updates on the "N+1" visit to a page, since previously
+// cached resources are updated in the background.
+
+// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
+// This link also includes instructions on opting out of this behavior.
+
+export default function register() {
+  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
+    window.addEventListener('load', () => {
+      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
+      navigator.serviceWorker
+        .register(swUrl)
+        .then(registration => {
+          // eslint-disable-next-line no-param-reassign
+          registration.onupdatefound = () => {
+            const installingWorker = registration.installing;
+            installingWorker.onstatechange = () => {
+              if (installingWorker.state === 'installed') {
+                if (navigator.serviceWorker.controller) {
+                  // At this point, the old content will have been purged and
+                  // the fresh content will have been added to the cache.
+                  // It's the perfect time to display a "New content is
+                  // available; please refresh." message in your web app.
+                  console.log('New content is available; please refresh.'); // eslint-disable-line no-console
+                } else {
+                  // At this point, everything has been precached.
+                  // It's the perfect time to display a
+                  // "Content is cached for offline use." message.
+                  console.log('Content is cached for offline use.'); // eslint-disable-line no-console
+                }
+              }
+            };
+          };
+        })
+        .catch(error => {
+          console.error('Error during service worker registration:', error);
+        });
+    });
+  }
+}
+
+export function unregister() {
+  if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.ready.then(registration => {
+      registration.unregister();
+    });
+  }
+}