CoolFace
Apppublic

admin08077/Githubgemini

sourceHugging Faceotherupdated 10mo agoView on Hugging Face
0likes
GmailAddonSimulator-Bt9t_SwG.js.map1 linesDownload Raw Back to assets
1{"version":3,"file":"GmailAddonSimulator-Bt9t_SwG.js","sources":["../../components/features/GmailAddonSimulator.tsx"],"sourcesContent":["import React, { useState, useCallback } from 'react';\nimport { streamContent } from '../../services/aiService.ts';\nimport { MailIcon, SparklesIcon, XMarkIcon } from '../icons.tsx';\nimport { LoadingSpinner, MarkdownRenderer } from '../shared/index.tsx';\n\nconst mockEmail = {\n    from: 'Alice <alice@example.com>',\n    to: 'Me <me@example.com>',\n    subject: 'Project Update & Question',\n    body: `Hey,\n\nJust wanted to give you a quick update. The new user authentication flow is complete and pushed to the staging server.\n\nI had a question about the next task regarding the database migration. The ticket says we need to migrate the 'users' table, but it's not clear on the required schema changes. Should I just add the new 'last_login' column or are there other modifications needed?\n\nLet me know when you have a chance.\n\nThanks,\nAlice`\n};\n\nexport const GmailAddonSimulator: React.FC = () => {\n    const [isComposeOpen, setComposeOpen] = useState(false);\n    const [generatedReply, setGeneratedReply] = useState('');\n    const [isGenerating, setIsGenerating] = useState(false);\n\n    const handleGenerateReply = useCallback(async () => {\n        setIsGenerating(true);\n        setGeneratedReply('');\n        setComposeOpen(true);\n        try {\n            const prompt = `Generate a professional and friendly reply to the following email. Acknowledge the update and answer the question by stating that only the 'last_login' column (as a DATETIME) is needed for now.\\n\\nEMAIL:\\n${mockEmail.body}`;\n            const stream = streamContent(prompt, \"You are a helpful assistant writing a professional email reply.\", 0.7);\n            let fullResponse = '';\n            for await (const chunk of stream) {\n                fullResponse += chunk;\n                setGeneratedReply(fullResponse);\n            }\n        } catch(e) {\n            setGeneratedReply(`Error: ${e instanceof Error ? e.message : 'Could not generate reply.'}`);\n        }\n        finally {\n            setIsGenerating(false);\n        }\n    }, []);\n\n    const ComposeModal = () => (\n        <div className=\"absolute inset-0 bg-black/30 backdrop-blur-sm flex justify-center items-center p-4 z-20\">\n            <div className=\"w-full max-w-2xl h-[70vh] bg-surface rounded-lg shadow-2xl flex flex-col animate-pop-in\">\n                <header className=\"flex justify-between items-center p-3 bg-gray-100 dark:bg-slate-700 rounded-t-lg\">\n                    <h3 className=\"font-semibold text-sm\">New Message</h3>\n                    <button onClick={() => setComposeOpen(false)}><XMarkIcon /></button>\n                </header>\n                <div className=\"p-3 text-sm border-b border-border\">\n                    <p><span className=\"text-text-secondary\">To:</span> {mockEmail.from}</p>\n                </div>\n                <div className=\"p-3 text-sm border-b border-border\">\n                     <p><span className=\"text-text-secondary\">Subject:</span> Re: {mockEmail.subject}</p>\n                </div>\n                <div className=\"flex-grow p-3 overflow-y-auto\">\n                    {isGenerating ? <div className=\"flex justify-center items-center h-full\"><LoadingSpinner /></div> : <MarkdownRenderer content={generatedReply} />}\n                </div>\n                 <footer className=\"p-3 border-t border-border\">\n                    <button className=\"btn-primary px-6 py-2\">Send</button>\n                 </footer>\n            </div>\n        </div>\n    );\n\n    return (\n        <div className=\"h-full flex flex-col p-4 sm:p-6 lg:p-8 text-text-primary\">\n            <header className=\"mb-6\">\n                <h1 className=\"text-3xl font-bold flex items-center\"><MailIcon /><span className=\"ml-3\">Gmail Add-on Simulator</span></h1>\n                <p className=\"text-text-secondary mt-1\">A simulation of how contextual add-on scopes would work inside Gmail.</p>\n            </header>\n            <div className=\"relative flex-grow bg-surface border-2 border-dashed border-border rounded-lg p-6 flex items-center justify-center\">\n                {isComposeOpen && <ComposeModal />}\n                <div className=\"w-full max-w-4xl h-full bg-white dark:bg-slate-800 rounded-xl shadow-2xl flex flex-col overflow-hidden\">\n                    {/* Header */}\n                    <div className=\"flex-shrink-0 p-4 border-b border-border\">\n                        <h2 className=\"text-xl font-bold\">{mockEmail.subject}</h2>\n                        <div className=\"flex items-center gap-2 text-sm mt-2\">\n                             <img src=\"https://avatar.vercel.sh/alice\" alt=\"Alice\" className=\"w-8 h-8 rounded-full\" />\n                             <div>\n                                <p className=\"font-semibold\">{mockEmail.from.split('<')[0].trim()}</p>\n                                <p className=\"text-text-secondary text-xs\">to {mockEmail.to.split('<')[0].trim()}</p>\n                             </div>\n                        </div>\n                    </div>\n                    {/* Body */}\n                    <div className=\"flex-grow p-4 overflow-y-auto\">\n                        <pre className=\"whitespace-pre-wrap font-sans text-sm\">{mockEmail.body}</pre>\n                    </div>\n                    {/* Actions */}\n                    <div className=\"flex-shrink-0 p-4 border-t border-border bg-gray-50 dark:bg-slate-900/50 flex justify-between items-center\">\n                        <div className=\"text-xs text-text-secondary\">\n                            <strong>Disclaimer:</strong> This is a simulation. The requested scopes allow this app to read the current email and compose replies <strong>if it were running inside Gmail.</strong>\n                        </div>\n                        <button onClick={handleGenerateReply} disabled={isGenerating} className=\"btn-primary flex items-center justify-center gap-2 px-4 py-2\">\n                           <SparklesIcon /> AI Reply\n                        </button>\n                    </div>\n                </div>\n            </div>\n        </div>\n    );\n};\n"],"names":["mockEmail","GmailAddonSimulator","isComposeOpen","setComposeOpen","useState","generatedReply","setGeneratedReply","isGenerating","setIsGenerating","handleGenerateReply","useCallback","prompt","stream","streamContent","fullResponse","chunk","e","ComposeModal","jsx","jsxs","XMarkIcon","LoadingSpinner","MarkdownRenderer","MailIcon","SparklesIcon"],"mappings":"kpFAKA,MAAMA,EAAY,CACd,KAAM,4BACN,GAAI,sBACJ,QAAS,4BACT,KAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAUV,EAEaC,GAAgC,IAAM,CAC/C,KAAM,CAACC,EAAeC,CAAc,EAAIC,EAAAA,SAAS,EAAK,EAChD,CAACC,EAAgBC,CAAiB,EAAIF,EAAAA,SAAS,EAAE,EACjD,CAACG,EAAcC,CAAe,EAAIJ,EAAAA,SAAS,EAAK,EAEhDK,EAAsBC,EAAAA,YAAY,SAAY,CAChDF,EAAgB,EAAI,EACpBF,EAAkB,EAAE,EACpBH,EAAe,EAAI,EACnB,GAAI,CACA,MAAMQ,EAAS;AAAA;AAAA;AAAA,EAAgNX,EAAU,IAAI,GACvOY,EAASC,EAAcF,EAAQ,kEAAmE,EAAG,EAC3G,IAAIG,EAAe,GACnB,gBAAiBC,KAASH,EACtBE,GAAgBC,EAChBT,EAAkBQ,CAAY,CAEtC,OAAQE,EAAG,CACPV,EAAkB,UAAUU,aAAa,MAAQA,EAAE,QAAU,2BAA2B,EAAE,CAC9F,QAAA,CAEIR,EAAgB,EAAK,CACzB,CACJ,EAAG,CAAA,CAAE,EAECS,EAAe,IACjBC,EAAAA,IAAC,MAAA,CAAI,UAAU,0FACX,SAAAC,EAAAA,KAAC,MAAA,CAAI,UAAU,0FACX,SAAA,CAAAA,EAAAA,KAAC,SAAA,CAAO,UAAU,mFACd,SAAA,CAAAD,EAAAA,IAAC,KAAA,CAAG,UAAU,wBAAwB,SAAA,cAAW,EACjDA,EAAAA,IAAC,UAAO,QAAS,IAAMf,EAAe,EAAK,EAAG,SAAAe,EAAAA,IAACE,EAAA,CAAA,CAAU,CAAA,CAAE,CAAA,EAC/D,EACAF,MAAC,MAAA,CAAI,UAAU,qCACX,gBAAC,IAAA,CAAE,SAAA,CAAAA,EAAAA,IAAC,OAAA,CAAK,UAAU,sBAAsB,SAAA,MAAG,EAAO,IAAElB,EAAU,IAAA,CAAA,CAAK,CAAA,CACxE,EACAkB,MAAC,MAAA,CAAI,UAAU,qCACV,gBAAC,IAAA,CAAE,SAAA,CAAAA,EAAAA,IAAC,OAAA,CAAK,UAAU,sBAAsB,SAAA,WAAQ,EAAO,QAAMlB,EAAU,OAAA,CAAA,CAAQ,CAAA,CACrF,QACC,MAAA,CAAI,UAAU,gCACV,SAAAO,QAAgB,MAAA,CAAI,UAAU,0CAA0C,SAAAW,EAAAA,IAACG,IAAe,CAAA,CAAE,QAAUC,EAAA,CAAiB,QAASjB,EAAgB,EACnJ,EACCa,EAAAA,IAAC,UAAO,UAAU,6BACf,eAAC,SAAA,CAAO,UAAU,wBAAwB,SAAA,MAAA,CAAI,CAAA,CACjD,CAAA,CAAA,CACL,CAAA,CACJ,EAGJ,OACIC,EAAAA,KAAC,MAAA,CAAI,UAAU,2DACX,SAAA,CAAAA,EAAAA,KAAC,SAAA,CAAO,UAAU,OACd,SAAA,CAAAA,EAAAA,KAAC,KAAA,CAAG,UAAU,uCAAuC,SAAA,CAAAD,EAAAA,IAACK,EAAA,EAAS,EAAEL,EAAAA,IAAC,OAAA,CAAK,UAAU,OAAO,SAAA,wBAAA,CAAsB,CAAA,EAAO,EACrHA,EAAAA,IAAC,IAAA,CAAE,UAAU,2BAA2B,SAAA,uEAAA,CAAqE,CAAA,EACjH,EACAC,EAAAA,KAAC,MAAA,CAAI,UAAU,qHACV,SAAA,CAAAjB,SAAkBe,EAAA,EAAa,EAChCE,EAAAA,KAAC,MAAA,CAAI,UAAU,yGAEX,SAAA,CAAAA,EAAAA,KAAC,MAAA,CAAI,UAAU,2CACX,SAAA,CAAAD,EAAAA,IAAC,KAAA,CAAG,UAAU,oBAAqB,SAAAlB,EAAU,QAAQ,EACrDmB,EAAAA,KAAC,MAAA,CAAI,UAAU,uCACV,SAAA,CAAAD,MAAC,OAAI,IAAI,iCAAiC,IAAI,QAAQ,UAAU,uBAAuB,SACtF,MAAA,CACE,SAAA,CAAAA,EAAAA,IAAC,IAAA,CAAE,UAAU,gBAAiB,SAAAlB,EAAU,KAAK,MAAM,GAAG,EAAE,CAAC,EAAE,KAAA,CAAK,CAAE,EAClEmB,EAAAA,KAAC,IAAA,CAAE,UAAU,8BAA8B,SAAA,CAAA,MAAInB,EAAU,GAAG,MAAM,GAAG,EAAE,CAAC,EAAE,KAAA,CAAK,CAAA,CAAE,CAAA,CAAA,CACpF,CAAA,CAAA,CACL,CAAA,EACJ,EAEAkB,EAAAA,IAAC,MAAA,CAAI,UAAU,gCACX,SAAAA,EAAAA,IAAC,OAAI,UAAU,wCAAyC,SAAAlB,EAAU,IAAA,CAAK,CAAA,CAC3E,EAEAmB,EAAAA,KAAC,MAAA,CAAI,UAAU,6GACX,SAAA,CAAAA,EAAAA,KAAC,MAAA,CAAI,UAAU,8BACX,SAAA,CAAAD,EAAAA,IAAC,UAAO,SAAA,aAAA,CAAW,EAAS,4GAAyGA,EAAAA,IAAC,UAAO,SAAA,kCAAA,CAAgC,CAAA,EACjL,SACC,SAAA,CAAO,QAAST,EAAqB,SAAUF,EAAc,UAAU,+DACrE,SAAA,CAAAW,EAAAA,IAACM,EAAA,EAAa,EAAE,WAAA,CAAA,CACnB,CAAA,CAAA,CACJ,CAAA,CAAA,CACJ,CAAA,CAAA,CACJ,CAAA,EACJ,CAER"}