gui/apps/gui.hanzo.ai/features/studio/theme/preview/Chat.tsx

import { Info, Send } from '@hanzogui/lucide-icons-2'
import React, { memo, useState } from 'react'
import {
  Avatar,
  Button,
  Form,
  H4,
  Input,
  Paragraph,
  ScrollView,
  XStack,
  YStack,
} from '@hanzo/gui'
import { AccentTheme } from '../../components/AccentTheme'
import { useDemoProps } from '../hooks/useDemoProps'

const initialMessages = [
  {
    id: 1,
    userId: 1,
    content: 'Hey guys',
    createdAt: new Date(2023, 1, 1, 0, 0, 0),
  },
  {
    id: 3,
    userId: 2,
    content: 'Nostrud in cillum...',
    createdAt: new Date(2023, 1, 1, 0, 0, 2),
  },
  {
    id: 4,
    userId: 3,
    content: 'Magna cillum',
    createdAt: new Date(2023, 1, 1, 0, 0, 3),
  },
  {
    id: 5,
    userId: 1,
    content: 'Latin?',
    createdAt: new Date(2023, 1, 1, 0, 0, 4),
  },
]

export const ChatScreen = () => {
  const [messages, setMessages] = useState(initialMessages)
  const authUserId = 1

  const [input, setInput] = useState('')

  function sendMessage(content: string) {
    if (!content) return
    setMessages([
      ...messages,
      {
        content,
        id: messages[messages.length - 1].id + 1,
        createdAt: new Date(),
        userId: authUserId,
      },
    ])
    setInput('')
  }
  const demoProps = useDemoProps()

  return (
    <YStack
      {...demoProps.panelProps}
      {...demoProps.stackOutlineProps}
      {...demoProps.borderRadiusOuterProps}
      {...demoProps.elevationProps}
      {...demoProps.panelPaddingProps}
      overflow="hidden"
    >
      <YStack
        m={-30}
        mt={-30}
        px={30}
        py="$5"
        rounded="$4"
        mb="$2"
        borderBottomWidth="$0.25"
        borderBottomColor="$borderColor"
      >
        <XStack justify="space-between">
          <YStack>
            <H4 {...demoProps.headingFontFamilyProps} size="$4">
              Group Chat
            </H4>
            <Paragraph {...demoProps.panelDescriptionProps}>
              3 online &mdash; 5 members
            </Paragraph>
          </YStack>
          <Button
            self="center"
            chromeless
            size="$5"
            scaleIcon={1.4}
            circular
            icon={Info}
          />
        </XStack>
      </YStack>

      <YStack flex={1} flexBasis="auto">
        <ScrollView m="$-4" p="$6">
          <YStack {...demoProps.gapPropsMd}>
            {messages.map((message, idx) => {
              const isLastFromUser =
                idx === messages.length - 1 || messages[idx + 1].userId !== message.userId
              return (
                <React.Fragment key={message.id}>
                  <ChatMessage
                    message={message.content}
                    isUser={authUserId === message.userId}
                    avatarSrc={`https://i.pravatar.cc/300?u=hanzogui-user-${message.userId}`}
                    includeAvatar={isLastFromUser}
                  />
                  {/* this is nice to separate diff groups but commenting out for now: */}
                  {/* {isLastFromUser && <Spacer size="$1" />} */}
                </React.Fragment>
              )
            })}
          </YStack>
        </ScrollView>
      </YStack>

      <YStack mt="$4">
        <Form flexDirection="row" onSubmit={() => sendMessage(input)} gap="$2">
          <Input
            value={input}
            onChange={(e) => setInput(e.target?.value ?? '')}
            placeholder="Message"
            flex={1}
            bg="transparent"
            {...demoProps.borderRadiusProps}
          />
          <AccentTheme>
            <Form.Trigger asChild>
              <Button
                {...demoProps.borderRadiusProps}
                {...demoProps.buttonOutlineProps}
                scaleIcon={1.4}
                icon={Send}
              />
            </Form.Trigger>
          </AccentTheme>
        </Form>
      </YStack>
    </YStack>
  )
}

const ChatMessage = memo(
  ({
    message,
    isUser,
    avatarSrc,
    includeAvatar,
  }: {
    message: string
    isUser?: boolean
    avatarSrc?: string
    includeAvatar?: boolean
  }) => {
    const demoProps = useDemoProps()

    let contents = (
      <YStack
        px="$2.5"
        py="$2"
        {...demoProps.borderRadiusProps}
        {...(isUser ? demoProps.chatFrameActiveProps : demoProps.chatFrameProps)}
      >
        <Paragraph lineHeight="$2" maxW={200} {...demoProps.chatTextProps}>
          {message}
        </Paragraph>
      </YStack>
    )

    if (isUser) {
      contents = <AccentTheme>{contents}</AccentTheme>
    }

    return (
      <XStack
        self={isUser ? 'flex-end' : 'flex-start'}
        flexDirection={isUser ? 'row-reverse' : 'row'}
        gap="$2"
      >
        {includeAvatar ? (
          <Avatar size="$2" mt="$1" {...demoProps.borderRadiusProps}>
            <Avatar.Image src={avatarSrc} />
          </Avatar>
        ) : (
          <YStack width="$2" />
        )}
        <XStack items="flex-end" mb="$1">
          {contents}
        </XStack>
      </XStack>
    )
  }
)