From ed41887876c7839552da6c150c76ec55adc641f7 Mon Sep 17 00:00:00 2001 From: paulclindo Date: Fri, 25 Oct 2024 21:31:12 -0500 Subject: [PATCH 01/10] wip --- .../shinkai-desktop/src-tauri/tauri.conf.json | 2 +- .../shinkai-desktop/src/pages/chat/layout.tsx | 104 ++- .../src/pages/chat/react-script.ts | 303 +++++++++ package-lock.json | 622 +++++++++++++++++- package.json | 3 + 5 files changed, 1010 insertions(+), 24 deletions(-) create mode 100644 apps/shinkai-desktop/src/pages/chat/react-script.ts diff --git a/apps/shinkai-desktop/src-tauri/tauri.conf.json b/apps/shinkai-desktop/src-tauri/tauri.conf.json index aeb4951c..6584569e 100644 --- a/apps/shinkai-desktop/src-tauri/tauri.conf.json +++ b/apps/shinkai-desktop/src-tauri/tauri.conf.json @@ -42,7 +42,7 @@ "app": { "withGlobalTauri": false, "security": { - "csp": null + "csp": "default-src 'self' https://2-19-8-sandpack.codesandbox.io" }, "windows": [ { diff --git a/apps/shinkai-desktop/src/pages/chat/layout.tsx b/apps/shinkai-desktop/src/pages/chat/layout.tsx index 967e273f..a57ae765 100644 --- a/apps/shinkai-desktop/src/pages/chat/layout.tsx +++ b/apps/shinkai-desktop/src/pages/chat/layout.tsx @@ -1,3 +1,9 @@ +import { + SandpackCodeEditor, + SandpackLayout, + SandpackPreview, + SandpackProvider, +} from '@codesandbox/sandpack-react'; import { zodResolver } from '@hookform/resolvers/zod'; import { DialogClose } from '@radix-ui/react-dialog'; import { useTranslation } from '@shinkai_network/shinkai-i18n'; @@ -40,10 +46,19 @@ import { } from '@shinkai_network/shinkai-ui/assets'; import { cn } from '@shinkai_network/shinkai-ui/utils'; import { AnimatePresence, motion } from 'framer-motion'; -import { Edit3, Trash2Icon } from 'lucide-react'; -import { memo, useEffect, useRef, useState } from 'react'; +import { Edit3 ,Trash2Icon } from 'lucide-react'; +import React, { + IframeHTMLAttributes, + useEffect, + useMemo, + useRef, + useState, + memo +} from 'react'; import { useForm } from 'react-hook-form'; import { Link, Outlet, useMatch, useNavigate } from 'react-router-dom'; +import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'; +import { solarizedlight } from 'react-syntax-highlighter/dist/esm/styles/prism'; import { toast } from 'sonner'; import { useSetJobScope } from '../../components/chat/context/set-job-scope-context'; @@ -52,6 +67,7 @@ import { useWorkflowSelectionStore } from '../../components/workflow/context/wor import { handleSendNotification } from '../../lib/notifications'; import { useAuth } from '../../store/auth'; import { useSettings } from '../../store/settings'; +import { reactDomScript, reactScript } from './react-script'; const InboxNameInput = ({ closeEditable, @@ -506,3 +522,87 @@ const ChatLayout = () => { }; export default ChatLayout; + +export const ArtifactsPreview = () => { + const [code, setCode] = useState(` +

Hello from JSX in Iframe!

+ `); + + // const iframeRef = useRef(null); + // + // useEffect(() => { + // console.dir(iframeRef, 'iframeRef'); + // const doc = iframeRef?.current?.contentWindow?.document; + // + // if (!doc) return; + // doc.open(); + // doc.write(` + // + // + // + // JSX Code Preview + // + // + //
+ // + // + // + // `); + // doc.close(); + // }, [code]); + + // if (!artifact) return null; + // return; + return ( +
+
+ + + Source Code + Preview + + + {/**/} + {/* {code}*/} + {/**/} + {/**/} + {/*// csp issues and cors */} + + + + + + + + + {/*{artifact &&