{children} diff --git a/client/src/components/Messages/Content/CodeBlock.tsx b/client/src/components/Messages/Content/CodeBlock.tsx index 7f1b4e1b39..7e14443d95 100644 --- a/client/src/components/Messages/Content/CodeBlock.tsx +++ b/client/src/components/Messages/Content/CodeBlock.tsx @@ -75,7 +75,7 @@ const CodeBlock: React.FC = ({ return (
- +
{ const localize = useLocalize(); @@ -133,6 +135,8 @@ const SidePanel = ({ } }, [isCollapsed, newUser, setNewUser, navCollapsedSize]); + const minSizeMain = useMemo(() => (artifacts != null ? 15 : 30), [artifacts]); + return ( <> @@ -141,9 +145,17 @@ const SidePanel = ({ onLayout={(sizes: number[]) => throttledSaveLayout(sizes)} className="transition-width relative h-full w-full flex-1 overflow-auto bg-white dark:bg-gray-800" > - + {children} + {artifacts != null && ( + <> + + + {artifacts} + + + )}
>({ + key: 'codeBlocksState', + default: {}, + effects: [ + ({ onSet, node }) => { + onSet(async (newValue) => { + console.log('Recoil Effect: Setting codeBlocksState', { key: node.key, newValue }); + }); + }, + ] as const, +}); + +export const codeBlockIdsState = atom({ + key: 'codeBlockIdsState', + default: [], + effects: [ + ({ onSet, node }) => { + onSet(async (newValue) => { + console.log('Recoil Effect: Setting codeBlockIdsState', { key: node.key, newValue }); + }); + }, + ] as const, +}); \ No newline at end of file diff --git a/client/src/store/index.ts b/client/src/store/index.ts index 445690ab2a..291dc2083e 100644 --- a/client/src/store/index.ts +++ b/client/src/store/index.ts @@ -1,3 +1,4 @@ +import * as artifacts from './artifacts'; import conversation from './conversation'; import conversations from './conversations'; import families from './families'; @@ -13,6 +14,7 @@ import lang from './language'; import settings from './settings'; export default { + ...artifacts, ...families, ...conversation, ...conversations, diff --git a/client/src/utils/artifacts.ts b/client/src/utils/artifacts.ts new file mode 100644 index 0000000000..4c5f943f94 --- /dev/null +++ b/client/src/utils/artifacts.ts @@ -0,0 +1,112 @@ +import dedent from 'dedent'; +import type { CodeBlock } from '~/common'; + +export function getFileExtension(language: string): string { + switch (language) { + case 'javascript': + return 'jsx'; + case 'typescript': + return 'tsx'; + case 'jsx': + return 'jsx'; + case 'tsx': + return 'tsx'; + case 'html': + return 'html'; + case 'css': + return 'css'; + default: + return 'txt'; + } +} + +export const sharedProps = { + template: 'react-ts', + customSetup: { + dependencies: { + 'lucide-react': '^0.394.0', + 'react-router-dom': '^6.11.2', + 'class-variance-authority': '^0.6.0', + clsx: '^1.2.1', + 'date-fns': '^3.3.1', + 'tailwind-merge': '^1.9.1', + 'tailwindcss-animate': '^1.0.5', + // recharts: '2.9.0', + // '@radix-ui/react-accordion': '^1.2.0', + // '@radix-ui/react-alert-dialog': '^1.1.1', + // '@radix-ui/react-aspect-ratio': '^1.1.0', + // '@radix-ui/react-avatar': '^1.1.0', + // '@radix-ui/react-checkbox': '^1.1.1', + // '@radix-ui/react-collapsible': '^1.1.0', + // '@radix-ui/react-dialog': '^1.1.1', + // '@radix-ui/react-dropdown-menu': '^2.1.1', + // '@radix-ui/react-hover-card': '^1.1.1', + // '@radix-ui/react-label': '^2.1.0', + // '@radix-ui/react-menubar': '^1.1.1', + // '@radix-ui/react-navigation-menu': '^1.2.0', + // '@radix-ui/react-popover': '^1.1.1', + // '@radix-ui/react-progress': '^1.1.0', + // '@radix-ui/react-radio-group': '^1.2.0', + // '@radix-ui/react-select': '^2.1.1', + // '@radix-ui/react-separator': '^1.1.0', + // '@radix-ui/react-slider': '^1.2.0', + // '@radix-ui/react-slot': '^1.1.0', + // '@radix-ui/react-switch': '^1.1.0', + // '@radix-ui/react-tabs': '^1.1.0', + // '@radix-ui/react-toast': '^1.2.1', + // '@radix-ui/react-toggle': '^1.1.0', + // '@radix-ui/react-toggle-group': '^1.1.0', + // '@radix-ui/react-tooltip': '^1.1.2', + + // 'embla-carousel-react': '^8.1.8', + // 'react-day-picker': '^8.10.1', + // vaul: '^0.9.1', + }, + }, +} as const; + +export const sharedOptions = { + externalResources: [ + 'https://unpkg.com/@tailwindcss/ui/dist/tailwind-ui.min.css', + ], +}; + +export const sharedFiles = { + '/public/index.html': dedent` + + + + + + Document + + + +
+ + + `, +}; + +export const filenameMap = { + 'tsx': 'App', + 'css': 'styles', + 'html': 'index', + 'jsx': 'App', + 'js': 'App', + 'ts': 'App', + 'typescript': 'App', + 'javascript': 'App', +}; + +export const mapCodeFiles = (codeBlockIds:string[], codeBlocks: Record) => { + + return codeBlockIds.reduce((acc, id) => { + const block = codeBlocks[id]; + if (block) { + const fileName = `${filenameMap[block.language]}.${getFileExtension(block.language)}`; + acc[fileName] = typeof block.content === 'string' ? block.content : ''; + } + return acc; + }, {} as Record); +}; \ No newline at end of file