@rolder/kit 3.0.0-alpha.6 → 3.0.0-alpha.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rolder/kit",
-  "version": "3.0.0-alpha.6",
+  "version": "3.0.0-alpha.8",
   "type": "module",
   "exports": {
     ".": {
@@ -9,8 +9,8 @@
     },
     "./styles.css": "./styles.css"
   },
-  "files": [
-    "dist"
+  "sideEffects": [
+    "*.css"
   ],
   "scripts": {
     "build": "rslib build",

package/rslib.config.ts

@@ -0,0 +1,21 @@
+import { pluginReact } from '@rsbuild/plugin-react';
+import { defineConfig } from '@rslib/core';
+
+export default defineConfig({
+  source: {
+    entry: {
+      index: ['./src/**/*.{ts,tsx,js,jsx,css}'],
+    },
+  },
+  lib: [
+    {
+      bundle: false,
+      dts: true,
+      format: 'esm',
+    },
+  ],
+  output: {
+    target: 'web',
+  },
+  plugins: [pluginReact()],
+});

package/src/ai/ui/conversation/ConversationContext.ts

@@ -0,0 +1,21 @@
+import { createContext, useContext } from 'react';
+
+export interface ConversationContext {
+  loading: boolean;
+  streaming: boolean;
+  empty: boolean;
+}
+
+export const ConversationContext = createContext<ConversationContext | null>(
+  null,
+);
+
+export const useConversation = () => {
+  const context = useContext(ConversationContext);
+  if (!context) {
+    throw new Error(
+      'useConversation must be used within a ConversationProvider',
+    );
+  }
+  return context;
+};

package/src/ai/ui/conversation/ConversationProvider.tsx

@@ -0,0 +1,21 @@
+import { ConversationContext } from './ConversationContext';
+import type { ConversationProps } from './types';
+
+export const Provider = ({
+  children,
+  loading,
+  streaming,
+  empty,
+}: ConversationProps) => {
+  const value: ConversationContext = {
+    loading,
+    streaming,
+    empty,
+  };
+
+  return (
+    <ConversationContext.Provider value={value}>
+      {children}
+    </ConversationContext.Provider>
+  );
+};

package/src/ai/ui/conversation/Empty.tsx

@@ -0,0 +1,15 @@
+import { Stack, Text } from '@mantine/core';
+import { useConversation } from './ConversationContext';
+
+export const Empty = () => {
+  const { empty } = useConversation();
+
+  return !empty ? (
+    <Stack align="center" gap={0}>
+      <Text>Нет сообщений</Text>
+      <Text size="sm" c="dimmed">
+        Начните общение, чтобы увидеть сообщения здесь
+      </Text>
+    </Stack>
+  ) : null;
+};

package/src/ai/ui/conversation/File.tsx

@@ -0,0 +1,40 @@
+import { Image, Paper } from '@mantine/core';
+import type { UIMessage } from 'ai';
+import { FileIcon } from './FileIcon';
+
+export const File = <T extends UIMessage>({ message }: { message: T }) => {
+  const textFileType = message.id.split('-')[1];
+
+  const fileParts = message.parts?.filter((i) => i.type === 'file');
+  const lastFilePart = fileParts[fileParts.length - 1];
+
+  const FileComponent = () => {
+    switch (textFileType) {
+      case 'excel':
+        return <FileIcon mimeType="excel" />;
+      case 'word':
+        return <FileIcon mimeType="word" />;
+      case 'powerpoint':
+        return <FileIcon mimeType="powerpoint" />;
+    }
+
+    if (lastFilePart.mediaType.includes('image/'))
+      return (
+        <Image radius="md" h={128} src={lastFilePart.url} alt="Image Preview" />
+      );
+
+    return <FileIcon mimeType={lastFilePart.mediaType} />;
+  };
+
+  return textFileType || lastFilePart ? (
+    <Paper
+      radius="md"
+      px="md"
+      py="sm"
+      ml="auto"
+      bg="var(--mantine-color-default-hover)"
+    >
+      <FileComponent />
+    </Paper>
+  ) : null;
+};

package/src/ai/ui/conversation/FileIcon.tsx

@@ -0,0 +1,143 @@
+export const FileIcon = ({ mimeType }: { mimeType: string }) => {
+  switch (true) {
+    case mimeType.includes('image/'):
+      return (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="36"
+          height="36"
+          viewBox="0 0 36 36"
+          fill="none"
+          stroke="var(--mantine-color-text)"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          role="img"
+          aria-label="Image"
+        >
+          <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+          <path d="M15 8h.01" />
+          <path d="M3 6a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3v-12" />
+          <path d="M3 16l5 -5c.928 -.893 2.072 -.893 3 0l5 5" />
+          <path d="M14 14l1 -1c.928 -.893 2.072 -.893 3 0l3 3" />
+        </svg>
+      );
+    case mimeType.includes('application/pdf'):
+      return (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="36"
+          height="36"
+          viewBox="0 0 36 36"
+          fill="none"
+          stroke="var(--mantine-color-text)"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          role="img"
+          aria-label="FilePdf"
+        >
+          <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+          <path d="M14 3v4a1 1 0 0 0 1 1h4" />
+          <path d="M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4" />
+          <path d="M5 18h1.5a1.5 1.5 0 0 0 0 -3h-1.5v6" />
+          <path d="M17 18h2" />
+          <path d="M20 15h-3v6" />
+          <path d="M11 15v6h1a2 2 0 0 0 2 -2v-2a2 2 0 0 0 -2 -2h-1" />
+        </svg>
+      );
+    case mimeType === 'word':
+      return (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="36"
+          height="36"
+          viewBox="0 0 36 36"
+          fill="none"
+          stroke="var(--mantine-color-text)"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          role="img"
+          aria-label="FileDoc"
+        >
+          <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+          <path d="M14 3v4a1 1 0 0 0 1 1h4" />
+          <path d="M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4" />
+          <path d="M5 15v6h1a2 2 0 0 0 2 -2v-2a2 2 0 0 0 -2 -2h-1" />
+          <path d="M20 16.5a1.5 1.5 0 0 0 -3 0v3a1.5 1.5 0 0 0 3 0" />
+          <path d="M12.5 15a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1 -3 0v-3a1.5 1.5 0 0 1 1.5 -1.5" />
+        </svg>
+      );
+    case mimeType === 'excel':
+      return (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="36"
+          height="36"
+          viewBox="0 0 36 36"
+          fill="none"
+          stroke="var(--mantine-color-text)"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          role="img"
+          aria-label="FileXls"
+        >
+          <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+          <path d="M14 3v4a1 1 0 0 0 1 1h4" />
+          <path d="M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4" />
+          <path d="M4 15l4 6" />
+          <path d="M4 21l4 -6" />
+          <path d="M17 20.25c0 .414 .336 .75 .75 .75h1.25a1 1 0 0 0 1 -1v-1a1 1 0 0 0 -1 -1h-1a1 1 0 0 1 -1 -1v-1a1 1 0 0 1 1 -1h1.25a.75 .75 0 0 1 .75 .75" />
+          <path d="M11 15v6h3" />
+        </svg>
+      );
+    case mimeType === 'powerpoint':
+      return (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="36"
+          height="36"
+          viewBox="0 0 36 36"
+          fill="none"
+          stroke="var(--mantine-color-text)"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          role="img"
+          aria-label="FilePpt"
+        >
+          <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+          <path d="M14 3v4a1 1 0 0 0 1 1h4" />
+          <path d="M14 3v4a1 1 0 0 0 1 1h4" />
+          <path d="M5 18h1.5a1.5 1.5 0 0 0 0 -3h-1.5v6" />
+          <path d="M11 18h1.5a1.5 1.5 0 0 0 0 -3h-1.5v6" />
+          <path d="M16.5 15h3" />
+          <path d="M18 15v6" />
+          <path d="M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4" />
+        </svg>
+      );
+    default:
+      return (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="36"
+          height="36"
+          viewBox="0 0 36 36"
+          fill="none"
+          stroke="var(--mantine-color-text)"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          role="img"
+          aria-label="File"
+        >
+          <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+          <path d="M15 3v4a1 1 0 0 0 1 1h4" />
+          <path d="M18 17h-7a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h4l5 5v7a2 2 0 0 1 -2 2" />
+          <path d="M16 17v2a2 2 0 0 1 -2 2h-7a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2" />
+        </svg>
+      );
+  }
+};

package/src/ai/ui/conversation/Loader.tsx

@@ -0,0 +1,8 @@
+import { type LoaderProps, Loader as MantineLoader } from '@mantine/core';
+import { useConversation } from './ConversationContext';
+
+export const Loader = (props: LoaderProps) => {
+  const { loading } = useConversation();
+
+  return loading ? <MantineLoader size={28} type="dots" {...props} /> : null;
+};

package/src/ai/ui/conversation/Message.tsx

@@ -0,0 +1,34 @@
+import { Paper } from '@mantine/core';
+import type { UIMessage } from 'ai';
+import { Streamdown } from 'streamdown';
+import { useConversation } from './ConversationContext';
+import { useChatMessage } from './useChatMessage';
+
+export const Message = <T extends UIMessage>({ message }: { message: T }) => {
+  const textParts = message?.parts?.filter((i) => i.type === 'text');
+  const lastTextPart = textParts?.[textParts.length - 1];
+
+  const chatMessage = useChatMessage(lastTextPart);
+
+  const { streaming } = useConversation();
+
+  return chatMessage && message.role !== 'system' ? (
+    <Paper
+      radius="md"
+      px="md"
+      py="sm"
+      maw="80%"
+      ml={message.role === 'user' ? 'auto' : undefined}
+      bg={
+        message.role === 'user'
+          ? 'var(--mantine-color-default-hover)'
+          : 'var(--mantine-primary-color-light)'
+      }
+      fz="sm"
+    >
+      <Streamdown isAnimating={streaming && message.role === 'assistant'}>
+        {chatMessage}
+      </Streamdown>
+    </Paper>
+  ) : null;
+};

package/src/ai/ui/conversation/Root.tsx

@@ -0,0 +1,24 @@
+import { Paper, Stack } from '@mantine/core';
+import { ScrollArea } from '../../../ui/scrollArea';
+import { Provider } from './ConversationProvider';
+import type { ConversationProps } from './types';
+
+export const Root = ({
+  children,
+  loading,
+  streaming,
+  empty,
+  ...props
+}: ConversationProps) => {
+  return (
+    <Provider loading={loading} streaming={streaming} empty={empty}>
+      <Paper withBorder radius="md" {...props}>
+        <ScrollArea autoScroll scrollToBottomOnInit p="md">
+          <Stack>{children}</Stack>
+
+          <ScrollArea.ScrollButton />
+        </ScrollArea>
+      </Paper>
+    </Provider>
+  );
+};

package/src/ai/ui/conversation/index.ts

@@ -0,0 +1,16 @@
+import { Empty } from './Empty';
+import { File } from './File';
+import { Loader } from './Loader';
+import { Message } from './Message';
+import { Root } from './Root';
+
+export type { ConversationProps } from './types';
+export { useChatMessage } from './useChatMessage';
+
+export const Conversation = {
+  Root,
+  Message,
+  File,
+  Loader,
+  Empty,
+};

package/{dist/ai/ui/conversation/types.d.ts → src/ai/ui/conversation/types.ts}

@@ -1,7 +1,8 @@
 import type { PaperProps } from '@mantine/core';
+
 export interface ConversationProps extends PaperProps {
-    children?: React.ReactNode;
-    loading: boolean;
-    streaming: boolean;
-    empty: boolean;
+  children?: React.ReactNode;
+  loading: boolean;
+  streaming: boolean;
+  empty: boolean;
 }

package/src/ai/ui/conversation/useChatMessage.ts

@@ -0,0 +1,13 @@
+import type { TextUIPart } from 'ai';
+import { useEffect, useState } from 'react';
+import { parseAiMessagePart } from '../../utils/parseAiMessagePart';
+
+export const useChatMessage = (part: TextUIPart) => {
+  const [parsedText, setParsedText] = useState('');
+
+  useEffect(() => {
+    parseAiMessagePart(part).then((i) => setParsedText(i.text));
+  }, [part]);
+
+  return parsedText;
+};

package/src/ai/ui/promptInput/File.tsx

@@ -0,0 +1,98 @@
+import {
+  ActionIcon,
+  FileButton,
+  type FileButtonProps,
+  Tooltip,
+} from '@mantine/core';
+import { useRef } from 'react';
+import { FileIcon } from './FileIcon';
+import { usePromptInput } from './PromptInputContext';
+
+export const File = (props: Omit<FileButtonProps, 'onChange' | 'children'>) => {
+  const resetRef = useRef<() => void>(null);
+  const { file, setFile, accept, submiting, uploading } = usePromptInput();
+
+  return (
+    <FileButton
+      resetRef={resetRef}
+      onChange={async (file) => {
+        // Проверка для сценария отмены в системном диалоговом окне
+        if (file) setFile(file);
+      }}
+      accept={accept}
+      disabled={submiting || uploading}
+      {...props}
+    >
+      {(props) => (
+        <ActionIcon.Group>
+          <ActionIcon
+            size="lg"
+            variant="default"
+            disabled={submiting}
+            loading={uploading}
+            classNames={{ root: 'rolder-prompt-input-file-action-action' }}
+            {...props}
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="1.5"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              role="img"
+              aria-label="Paperclip"
+            >
+              <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+              <path d="M15 7l-6.5 6.5a1.5 1.5 0 0 0 3 3l6.5 -6.5a3 3 0 0 0 -6 -6l-6.5 6.5a4.5 4.5 0 0 0 9 9l6.5 -6.5" />
+            </svg>
+          </ActionIcon>
+
+          {file && (
+            <>
+              <Tooltip label={file.name} openDelay={500}>
+                <ActionIcon.GroupSection variant="default" size="lg">
+                  <FileIcon mimeType={file.type} />
+                </ActionIcon.GroupSection>
+              </Tooltip>
+
+              <ActionIcon
+                size="lg"
+                variant="default"
+                classNames={{ root: 'rolder-prompt-input-file-action-action' }}
+                onClick={() => {
+                  resetRef.current?.();
+                  setFile(undefined);
+                }}
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="24"
+                  height="24"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="1.5"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  role="img"
+                  aria-label="Trash"
+                >
+                  <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                  <path d="M4 7l16 0" />
+                  <path d="M10 11l0 6" />
+                  <path d="M14 11l0 6" />
+                  <path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12" />
+                  <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3" />
+                </svg>
+              </ActionIcon>
+            </>
+          )}
+        </ActionIcon.Group>
+      )}
+    </FileButton>
+  );
+};

package/src/ai/ui/promptInput/FileIcon.tsx

@@ -0,0 +1,149 @@
+export const FileIcon = ({ mimeType }: { mimeType: string }) => {
+  switch (true) {
+    case mimeType.includes('image/'):
+      return (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="var(--mantine-color-dimmed)"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          role="img"
+          aria-label="Image"
+        >
+          <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+          <path d="M15 8h.01" />
+          <path d="M3 6a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3v-12" />
+          <path d="M3 16l5 -5c.928 -.893 2.072 -.893 3 0l5 5" />
+          <path d="M14 14l1 -1c.928 -.893 2.072 -.893 3 0l3 3" />
+        </svg>
+      );
+    case mimeType.includes('application/pdf'):
+      return (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="var(--mantine-color-dimmed)"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          role="img"
+          aria-label="FilePdf"
+        >
+          <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+          <path d="M14 3v4a1 1 0 0 0 1 1h4" />
+          <path d="M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4" />
+          <path d="M5 18h1.5a1.5 1.5 0 0 0 0 -3h-1.5v6" />
+          <path d="M17 18h2" />
+          <path d="M20 15h-3v6" />
+          <path d="M11 15v6h1a2 2 0 0 0 2 -2v-2a2 2 0 0 0 -2 -2h-1" />
+        </svg>
+      );
+    case mimeType.includes(
+      'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+    ):
+      return (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="var(--mantine-color-dimmed)"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          role="img"
+          aria-label="FileDoc"
+        >
+          <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+          <path d="M14 3v4a1 1 0 0 0 1 1h4" />
+          <path d="M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4" />
+          <path d="M5 15v6h1a2 2 0 0 0 2 -2v-2a2 2 0 0 0 -2 -2h-1" />
+          <path d="M20 16.5a1.5 1.5 0 0 0 -3 0v3a1.5 1.5 0 0 0 3 0" />
+          <path d="M12.5 15a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1 -3 0v-3a1.5 1.5 0 0 1 1.5 -1.5" />
+        </svg>
+      );
+    case mimeType.includes(
+      'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+    ):
+      return (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="var(--mantine-color-dimmed)"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          role="img"
+          aria-label="FileXls"
+        >
+          <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+          <path d="M14 3v4a1 1 0 0 0 1 1h4" />
+          <path d="M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4" />
+          <path d="M4 15l4 6" />
+          <path d="M4 21l4 -6" />
+          <path d="M17 20.25c0 .414 .336 .75 .75 .75h1.25a1 1 0 0 0 1 -1v-1a1 1 0 0 0 -1 -1h-1a1 1 0 0 1 -1 -1v-1a1 1 0 0 1 1 -1h1.25a.75 .75 0 0 1 .75 .75" />
+          <path d="M11 15v6h3" />
+        </svg>
+      );
+    case mimeType.includes(
+      'application/vnd.openxmlformats-officedocument.presentationml.presentation',
+    ):
+      return (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="var(--mantine-color-dimmed)"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          role="img"
+          aria-label="FilePpt"
+        >
+          <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+          <path d="M14 3v4a1 1 0 0 0 1 1h4" />
+          <path d="M14 3v4a1 1 0 0 0 1 1h4" />
+          <path d="M5 18h1.5a1.5 1.5 0 0 0 0 -3h-1.5v6" />
+          <path d="M11 18h1.5a1.5 1.5 0 0 0 0 -3h-1.5v6" />
+          <path d="M16.5 15h3" />
+          <path d="M18 15v6" />
+          <path d="M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4" />
+        </svg>
+      );
+    default:
+      return (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="var(--mantine-color-dimmed)"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          role="img"
+          aria-label="File"
+        >
+          <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+          <path d="M15 3v4a1 1 0 0 0 1 1h4" />
+          <path d="M18 17h-7a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h4l5 5v7a2 2 0 0 1 -2 2" />
+          <path d="M16 17v2a2 2 0 0 1 -2 2h-7a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2" />
+        </svg>
+      );
+  }
+};

package/src/ai/ui/promptInput/Footer.tsx

@@ -0,0 +1,5 @@
+import { Group, type GroupProps } from '@mantine/core';
+
+export const Footer = (props: GroupProps) => (
+  <Group justify="space-between" p="xs" {...props} />
+);

package/src/ai/ui/promptInput/PromptInputContext.ts

@@ -0,0 +1,24 @@
+import { createContext, useContext } from 'react';
+
+export interface PromptInputContext {
+  text: string;
+  setText: (text: string) => void;
+  file?: File;
+  setFile: (file?: File) => void;
+  onSubmit: () => void;
+  submiting: boolean;
+  uploading: boolean;
+  accept?: string;
+}
+
+export const PromptInputContext = createContext<PromptInputContext | null>(
+  null,
+);
+
+export const usePromptInput = () => {
+  const context = useContext(PromptInputContext);
+  if (!context) {
+    throw new Error('usePromptInput must be used within a PromptInputProvider');
+  }
+  return context;
+};