asasvirtuais 0.1.0

package/packages/chat/components/input/story.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+import { ChatInput } from './index'
+import InputTextarea from './textarea'
+import InputMenu from './menu'
+import { Box, MenuItem } from '@chakra-ui/react'
+import { InputSend } from './send'
+
+const meta: Meta<typeof ChatInput> = {
+  title: 'Components/Input',
+  component: ({children}) => (
+    <Box h='100dvh' display='flex' alignItems='flex-end' justifyContent='flex-end'>
+      <ChatInput>{children}</ChatInput>
+    </Box>
+  ),
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Input: Story = {
+  args: {
+    children: (
+      <>
+        <InputMenu>
+          <MenuItem>Menu item 1</MenuItem>
+          <MenuItem>Menu item 2</MenuItem>
+          <MenuItem>Menu item 3</MenuItem>
+        </InputMenu>
+        <InputTextarea/>
+        <InputSend/>
+      </>
+    )
+  }
+}

package/packages/chat/components/input/textarea/index.tsx

@@ -0,0 +1,20 @@
+'use client'
+import React from 'react'
+import { Textarea, TextareaProps } from '@chakra-ui/react'
+
+export function InputTextarea(props: TextareaProps) {
+
+  return (
+    <Textarea
+      rows={1}
+      autoFocus
+      variant='flushed'
+      size='lg'
+      placeholder='Type a message...'
+      autoresize
+      {...props}
+    />
+  )
+}
+
+export default InputTextarea

package/packages/chat/components/message/file.tsx

@@ -0,0 +1,103 @@
+'use client'
+import { Box, Collapsible, Image, Clipboard, IconButton, Portal, Link } from '@chakra-ui/react'
+import React from 'react'
+import Markdown from 'react-markdown'
+import { FiImage, FiVideo, FiMusic, FiFileText, FiFile, FiPaperclip } from 'react-icons/fi'
+
+interface MessageFileProps {
+  file: {
+    name: string
+    type: string
+    url?: string
+    content?: string
+  }
+  container: React.RefObject<HTMLDivElement|null>
+}
+
+export const MessageFile = ({ container, file }: MessageFileProps) => {
+
+  return (
+    <Collapsible.Root>
+      <Collapsible.Trigger asChild>
+        <Box 
+          display="flex" 
+          alignItems="center" 
+          gap={2} 
+          cursor="pointer"
+          p={2}
+          borderRadius="md"
+          _hover={{ backgroundColor: 'gray.100' }}
+        >
+          <Box fontSize="lg" color="gray.600">
+            {file.type.startsWith('image/') && <FiImage />}
+            {file.type.startsWith('video/') && <FiVideo />}
+            {file.type.startsWith('audio/') && <FiMusic />}
+            {file.type.startsWith('text/') &&  <FiFile />}
+            {
+              ! file.type.startsWith('image/') &&
+              ! file.type.startsWith('video/') &&
+              ! file.type.startsWith('audio/') &&
+              ! file.type.startsWith('text/') &&
+              ! file.name.endsWith('.md') &&
+              <FiPaperclip />
+            }
+          </Box>
+          <Box fontSize="sm" fontWeight="medium">{file.name}</Box>
+        </Box>
+      </Collapsible.Trigger>
+      
+      <Portal container={container}>
+        <Collapsible.Content>
+          <Box p={3} borderLeft="2px solid" borderColor="gray.200">
+            {file.type.startsWith('video/') && <video style={{width: '100%'}} src={file.url} controls />}
+            {file.type.startsWith('audio/') && <audio style={{width: '100%'}} src={file.url} controls />}
+            {file.type.startsWith('image/') && (<Image src={file.url} alt={file.name} style={{ maxWidth: '100%' }} />)}
+            {file.type === 'text/markdown' || file.name.endsWith('.md') && (
+              <Box position="relative">
+                <Box position="absolute" top={2} right={2}>
+                  <Clipboard.Root value={file.content || ''}>
+                    <Clipboard.Trigger asChild>
+                      <IconButton variant="surface" size="xs">
+                        <Clipboard.Indicator />
+                      </IconButton>
+                    </Clipboard.Trigger>
+                  </Clipboard.Root>
+                </Box>
+                <Markdown>{file.content || ''}</Markdown>
+              </Box>
+            )}
+            {file.type.startsWith('text/') && ! file.name.endsWith('.md') && (
+              <Box position="relative">
+                <Box position="absolute" top={2} right={2}>
+                  <Clipboard.Root value={file.content || ''}>
+                    <Clipboard.Trigger asChild>
+                      <IconButton variant="surface" size="xs">
+                        <Clipboard.Indicator />
+                      </IconButton>
+                    </Clipboard.Trigger>
+                  </Clipboard.Root>
+                </Box>
+                <pre style={{ whiteSpace: 'pre-wrap' }}>{file.content}</pre>
+              </Box>
+            )}
+            <Link
+              href={file.url} 
+              download={file.name}
+              display='inline-block'
+              padding='8px 16px'
+              backgroundColor='#007bff'
+              color='white'
+              textDecoration='none'
+              borderRadius='4px'
+              mt={4}
+            >
+              Download {file.name}
+            </Link>
+          </Box>
+        </Collapsible.Content>
+      </Portal>
+    </Collapsible.Root>
+  )
+}
+
+export default MessageFile

package/packages/chat/components/message/menu/index.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import { Button, Input, Popover, Portal, Text } from "@chakra-ui/react"
+
+export function MessageMenu({ children, items }: React.PropsWithChildren<{items: React.ReactNode}>) {
+  return (
+    <Popover.Root>
+      {/* @ts-expect-error dunno */}
+      <Popover.Trigger asChild>
+        {children}
+      </Popover.Trigger>
+      <Portal>
+        <Popover.Positioner>
+          <Popover.Content>
+            <Popover.Arrow />
+            <Popover.Body overflow='auto'>
+              {items}
+            </Popover.Body>
+          </Popover.Content>
+        </Popover.Positioner>
+      </Portal>
+    </Popover.Root>
+  )
+}
+
+export default MessageMenu
+

package/packages/chat/components/message/story.tsx

@@ -0,0 +1,49 @@
+import React from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+import { ChatMessage } from './index'
+import ChatMessages from '../messages'
+const meta: Meta<typeof ChatMessage> = {
+  title: 'Components/Message',
+  component: ChatMessage,
+  decorators: [
+    Story => (
+      <ChatMessages>
+        <Story/>
+      </ChatMessages>
+    )
+  ]
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Message: Story = {
+  args: {
+    username: 'Claude',
+    children: 'Hello! Here are some files I can help you with:',
+    date: '2:30 PM',
+    avatar: 'https://via.placeholder.com/40',
+    files: [
+      Object.assign(new File(['# Hello World\n\nThis is a **markdown** file with some content.'], 'example.md', { type: 'text/markdown' }), {
+        url: 'https://example.com/files/example.md',
+        content: '# Hello World\n\nThis is a **markdown** file with some content.'
+      }),
+      Object.assign(new File(['console.log("Hello World");'], 'script.js', { type: 'text/javascript' }), {
+        url: 'https://example.com/files/script.js',
+        content: 'console.log("Hello World");'
+      }),
+      Object.assign(new File([''], 'image.jpg', { type: 'image/jpeg' }), {
+        url: 'https://placehold.co/600x400/EEE/31343C'
+      }),
+      Object.assign(new File([''], 'video.mp4', { type: 'video/mp4' }), {
+        url: 'https://www.w3schools.com/html/mov_bbb.mp4'
+      }),
+      Object.assign(new File([''], 'audio.mp3', { type: 'audio/mpeg' }), {
+        url: 'https://www.soundjay.com/misc/sounds/bell-ringing-05.wav'
+      }),
+      Object.assign(new File([''], 'document.pdf', { type: 'application/pdf' }), {
+        url: 'https://example.com/files/document.pdf'
+      })
+    ]
+  }
+}

package/packages/chat/components/messages/index.tsx

@@ -0,0 +1,23 @@
+'use client'
+import React from "react"
+import { Flex, GridItem } from "@chakra-ui/react"
+
+export function ChatMessages({ children }: React.PropsWithChildren) {
+  return (
+    <GridItem as="main" display="block" overflowY="auto">
+      <Flex
+        h="full"
+        flexDirection="column-reverse"
+        overflowY="auto"
+        w="full"
+        style={{ direction: "ltr" }}
+        px={2}
+        gap={4}
+      >
+        {children}
+      </Flex>
+    </GridItem>
+  )
+}
+
+export default ChatMessages

package/packages/chat/components/messages/story.tsx

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { ChatMessages } from './index'
+
+const meta: Meta<typeof ChatMessages> = {
+  title: 'Components/Messages',
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Messages: Story = {}

package/packages/chat/components/ui/prose.tsx

@@ -0,0 +1,263 @@
+'use client'
+import { chakra } from "@chakra-ui/react"
+
+export const Prose = chakra("div", {
+  base: {
+    color: "fg.muted",
+    maxWidth: "65ch",
+    fontSize: "sm",
+    lineHeight: "1.7em",
+    "& p": {
+      marginTop: "1em",
+      marginBottom: "1em",
+    },
+    "& blockquote": {
+      marginTop: "1.285em",
+      marginBottom: "1.285em",
+      paddingInline: "1.285em",
+      borderInlineStartWidth: "0.25em",
+    },
+    "& a": {
+      color: "fg",
+      textDecoration: "underline",
+      textUnderlineOffset: "3px",
+      textDecorationThickness: "2px",
+      textDecorationColor: "border.muted",
+      fontWeight: "500",
+    },
+    "& strong": {
+      fontWeight: "600",
+    },
+    "& a strong": {
+      color: "inherit",
+    },
+    "& h1": {
+      fontSize: "2.15em",
+      letterSpacing: "-0.02em",
+      marginTop: "0",
+      marginBottom: "0.8em",
+      lineHeight: "1.2em",
+    },
+    "& h2": {
+      fontSize: "1.4em",
+      letterSpacing: "-0.02em",
+      marginTop: "1.6em",
+      marginBottom: "0.8em",
+      lineHeight: "1.4em",
+    },
+    "& h3": {
+      fontSize: "1.285em",
+      letterSpacing: "-0.01em",
+      marginTop: "1.5em",
+      marginBottom: "0.4em",
+      lineHeight: "1.5em",
+    },
+    "& h4": {
+      marginTop: "1.4em",
+      marginBottom: "0.5em",
+      letterSpacing: "-0.01em",
+      lineHeight: "1.5em",
+    },
+    "& img": {
+      marginTop: "1.7em",
+      marginBottom: "1.7em",
+      borderRadius: "lg",
+      boxShadow: "inset",
+    },
+    "& picture": {
+      marginTop: "1.7em",
+      marginBottom: "1.7em",
+    },
+    "& picture > img": {
+      marginTop: "0",
+      marginBottom: "0",
+    },
+    "& video": {
+      marginTop: "1.7em",
+      marginBottom: "1.7em",
+    },
+    "& kbd": {
+      fontSize: "0.85em",
+      borderRadius: "xs",
+      paddingTop: "0.15em",
+      paddingBottom: "0.15em",
+      paddingInlineEnd: "0.35em",
+      paddingInlineStart: "0.35em",
+      fontFamily: "inherit",
+      color: "fg.muted",
+      "--shadow": "colors.border",
+      boxShadow: "0 0 0 1px var(--shadow),0 1px 0 1px var(--shadow)",
+    },
+    "& code": {
+      fontSize: "0.925em",
+      letterSpacing: "-0.01em",
+      borderRadius: "md",
+      borderWidth: "1px",
+      padding: "0.25em",
+    },
+    "& pre code": {
+      fontSize: "inherit",
+      letterSpacing: "inherit",
+      borderWidth: "inherit",
+      padding: "0",
+    },
+    "& h2 code": {
+      fontSize: "0.9em",
+    },
+    "& h3 code": {
+      fontSize: "0.8em",
+    },
+    "& pre": {
+      backgroundColor: "bg.subtle",
+      marginTop: "1.6em",
+      marginBottom: "1.6em",
+      borderRadius: "md",
+      fontSize: "0.9em",
+      paddingTop: "0.65em",
+      paddingBottom: "0.65em",
+      paddingInlineEnd: "1em",
+      paddingInlineStart: "1em",
+      overflowX: "auto",
+      fontWeight: "400",
+    },
+    "& ol": {
+      marginTop: "1em",
+      marginBottom: "1em",
+      paddingInlineStart: "1.5em",
+    },
+    "& ul": {
+      marginTop: "1em",
+      marginBottom: "1em",
+      paddingInlineStart: "1.5em",
+    },
+    "& li": {
+      marginTop: "0.285em",
+      marginBottom: "0.285em",
+    },
+    "& ol > li": {
+      paddingInlineStart: "0.4em",
+      listStyleType: "decimal",
+      "&::marker": {
+        color: "fg.muted",
+      },
+    },
+    "& ul > li": {
+      paddingInlineStart: "0.4em",
+      listStyleType: "disc",
+      "&::marker": {
+        color: "fg.muted",
+      },
+    },
+    "& > ul > li p": {
+      marginTop: "0.5em",
+      marginBottom: "0.5em",
+    },
+    "& > ul > li > p:first-of-type": {
+      marginTop: "1em",
+    },
+    "& > ul > li > p:last-of-type": {
+      marginBottom: "1em",
+    },
+    "& > ol > li > p:first-of-type": {
+      marginTop: "1em",
+    },
+    "& > ol > li > p:last-of-type": {
+      marginBottom: "1em",
+    },
+    "& ul ul, ul ol, ol ul, ol ol": {
+      marginTop: "0.5em",
+      marginBottom: "0.5em",
+    },
+    "& dl": {
+      marginTop: "1em",
+      marginBottom: "1em",
+    },
+    "& dt": {
+      fontWeight: "600",
+      marginTop: "1em",
+    },
+    "& dd": {
+      marginTop: "0.285em",
+      paddingInlineStart: "1.5em",
+    },
+    "& hr": {
+      marginTop: "2.25em",
+      marginBottom: "2.25em",
+    },
+    "& :is(h1,h2,h3,h4,h5,hr) + *": {
+      marginTop: "0",
+    },
+    "& table": {
+      width: "100%",
+      tableLayout: "auto",
+      textAlign: "start",
+      lineHeight: "1.5em",
+      marginTop: "2em",
+      marginBottom: "2em",
+    },
+    "& thead": {
+      borderBottomWidth: "1px",
+      color: "fg",
+    },
+    "& tbody tr": {
+      borderBottomWidth: "1px",
+      borderBottomColor: "border",
+    },
+    "& thead th": {
+      paddingInlineEnd: "1em",
+      paddingBottom: "0.65em",
+      paddingInlineStart: "1em",
+      fontWeight: "medium",
+      textAlign: "start",
+    },
+    "& thead th:first-of-type": {
+      paddingInlineStart: "0",
+    },
+    "& thead th:last-of-type": {
+      paddingInlineEnd: "0",
+    },
+    "& tbody td, tfoot td": {
+      paddingTop: "0.65em",
+      paddingInlineEnd: "1em",
+      paddingBottom: "0.65em",
+      paddingInlineStart: "1em",
+    },
+    "& tbody td:first-of-type, tfoot td:first-of-type": {
+      paddingInlineStart: "0",
+    },
+    "& tbody td:last-of-type, tfoot td:last-of-type": {
+      paddingInlineEnd: "0",
+    },
+    "& figure": {
+      marginTop: "1.625em",
+      marginBottom: "1.625em",
+    },
+    "& figure > *": {
+      marginTop: "0",
+      marginBottom: "0",
+    },
+    "& figcaption": {
+      fontSize: "0.85em",
+      lineHeight: "1.25em",
+      marginTop: "0.85em",
+      color: "fg.muted",
+    },
+    "& h1, h2, h3, h4": {
+      color: "fg",
+      fontWeight: "600",
+    },
+  },
+  variants: {
+    size: {
+      md: {
+        fontSize: "sm",
+      },
+      lg: {
+        fontSize: "md",
+      },
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
+})

package/packages/chat/edit-message.tsx

@@ -0,0 +1,49 @@
+'use client'
+import { UpdateForm } from '@/app/module'
+import { Stack, Textarea, HStack, Button } from '@chakra-ui/react'
+import React from 'react'
+
+export function EditMessage({
+  message, onClose
+}: {
+  message: Message
+  onClose: () => void
+}) {
+  return (
+    <UpdateForm table='messages' id={message.id} defaults={{ content: message.content }}>
+      {props => (
+        <Stack as='form' onSubmit={async (e) => {
+          await props.submit(e)
+          onClose()
+        }}>
+          <Textarea
+            value={props.fields.content}
+            onChange={(e) => props.setField('content', e.target.value)}
+            minH="100px" />
+          <HStack mt={2}>
+            <Button
+              type="submit"
+              size="sm"
+              colorScheme="blue"
+              loading={props.loading}
+              disabled={props.loading}
+            >
+              Save
+            </Button>
+            <Button
+              size="sm"
+              variant="outline"
+              onClick={() => {
+                onClose()
+                props.setField('content', message.content)
+              }}
+              disabled={props.loading}
+            >
+              Cancel
+            </Button>
+          </HStack>
+        </Stack>
+      )}
+    </UpdateForm>
+  )
+}