Merge pull request #16 from docker/cm/prompts-method

Handle prompts method

Author: ColinMcNeil

src/extension/ui/src/App.tsx

@@ -6,6 +6,7 @@ import OpenAIKey from './components/OpenAIKey';
 import Projects from './components/Projects';
 import Prompts from './components/Prompts';
 import RunOutput from './components/RunOutput';
+import Runner from './components/Runner'; // Added this import
 
 const client = createDockerDesktopClient();
 
@@ -168,31 +169,22 @@ export function App() {
     track('end-prompt');
   }
 
+  const renderPrompt = async () => {
+    await client.docker.cli.exec("pull", ["vonwig/prompts"]);
+    const args = getRunArgs(selectedPrompt!, selectedProject!, "", client.host.platform, true)
+    const render = await client.docker.cli.exec("run", args);
+    console.log(render);
+  }
+
   return (
     <div style={{ overflow: 'auto', maxHeight: '100vh' }} ref={scrollRef}>
       <Stack direction="column" spacing={1}>
         <OpenAIKey openAIKey={openAIKey || ''} setOpenAIKey={setOpenAIKey} />
         <Projects projects={projects} selectedProject={selectedProject} setProjects={setProjects} setSelectedProject={setSelectedProject} />
         <Prompts prompts={prompts} selectedPrompt={selectedPrompt} promptInput={promptInput} setPrompts={setPrompts} setSelectedPrompt={setSelectedPrompt} setPromptInput={setPromptInput} track={track} />
-        {selectedProject && selectedPrompt && openAIKey ? (
-          <Paper sx={{ padding: 1 }}>
-            <Typography variant="h3">Ready</Typography>
-            <pre>PROJECT={selectedProject}</pre>
-            <pre>PROMPT={selectedPrompt}</pre>
-            <Button sx={{ mt: 1, }} color='success' onClick={startPrompt}>
-              Run
-            </Button>
-          </Paper>
-        ) : (
-          <Paper sx={{ padding: 1 }}>
-            <Typography variant='h3'>Missing:</Typography>
-            {selectedProject?.length ? null : <Typography variant='body1'> - Project</Typography>}
-            {selectedPrompt?.length ? null : <Typography variant='body1'> - Prompt</Typography>}
-            {openAIKey?.length ? null : <Typography variant='body1'> - OpenAI Key</Typography>}
-          </Paper>
-        )}
+        <Runner selectedProject={selectedProject} selectedPrompt={selectedPrompt} openAIKey={openAIKey} startPrompt={startPrompt} renderPrompt={renderPrompt} />
         <RunOutput runOut={runOut} showDebug={showDebug} setShowDebug={setShowDebug} />
       </Stack>
     </div>
   )
-}
+}

src/extension/ui/src/args.ts

@@ -1,4 +1,4 @@
-export const getRunArgs = (promptRef: string, projectDir: string, username: string, platform: string) => {
+export const getRunArgs = (promptRef: string, projectDir: string, username: string, platform: string, render = false) => {
     const isLocal = promptRef.startsWith('local://');
     let promptArgs: string[] = ["--prompts", promptRef];
     let mountArgs: string[] = [];
@@ -18,9 +18,9 @@ export const getRunArgs = (promptRef: string, projectDir: string, username: stri
         '--mount', 'type=volume,source=docker-prompts,target=/prompts'
     ];
 
-    const runArgs: string[] = [
+    const runArgs: string[] = render ? [] : [
         'vonwig/prompts:latest',
-        'run',
+        ...(render ? [] : ['run']),
         "--host-dir", projectDir,
         "--user", username,
         "--platform", platform,
@@ -29,4 +29,4 @@ export const getRunArgs = (promptRef: string, projectDir: string, username: stri
     ];
 
     return [...baseArgs, ...mountArgs, ...runArgs];
-}
+}

src/extension/ui/src/components/RunOutput.tsx

@@ -31,6 +31,9 @@ const RunOutput: React.FC<RunOutputProps> = ({ runOut, showDebug, setShowDebug }
                     if (line.method === 'functions-done') {
                         return showDebug ? <Typography key={i} variant='body1' sx={{ whiteSpace: 'pre-wrap' }}>{JSON.stringify(line.params, null, 2)}</Typography> : null;
                     }
+                    if (line.method === 'prompts') {
+                        return showDebug ? <Typography key={i} variant='body1' sx={{ whiteSpace: 'pre-wrap' }}>{JSON.stringify(line.params.messages, null, 2)}</Typography> : null;
+                    }
                     return <Typography key={i} variant='body1'>{JSON.stringify(line)}</Typography>
                 })}
             </div>

src/extension/ui/src/components/Runner.tsx

@@ -0,0 +1,38 @@
+import { Paper, Typography, Button } from '@mui/material';
+import { useEffect } from 'react';
+
+type RunnerProps = {
+    selectedProject: string | null;
+    selectedPrompt: string | null;
+    openAIKey: string | null;
+    startPrompt: () => void;
+    renderPrompt: () => void;
+}
+
+const Runner: React.FC<RunnerProps> = ({ selectedProject, selectedPrompt, openAIKey, startPrompt, renderPrompt }) => {
+    useEffect(() => {
+        if (selectedProject && selectedPrompt && openAIKey) {
+            // renderPrompt();
+        }
+    }, [selectedProject, selectedPrompt, openAIKey]);
+
+    return selectedProject && selectedPrompt && openAIKey ? (
+        <Paper sx={{ padding: 1 }}>
+            <Typography variant="h3">Ready</Typography>
+            <pre>PROJECT={selectedProject}</pre>
+            <pre>PROMPT={selectedPrompt}</pre>
+            <Button sx={{ mt: 1, }} color='success' onClick={startPrompt}>
+                Run
+            </Button>
+        </Paper>
+    ) : (
+        <Paper sx={{ padding: 1 }}>
+            <Typography variant='h3'>Missing:</Typography>
+            {selectedProject?.length ? null : <Typography variant='body1'> - Project</Typography>}
+            {selectedPrompt?.length ? null : <Typography variant='body1'> - Prompt</Typography>}
+            {openAIKey?.length ? null : <Typography variant='body1'> - OpenAI Key</Typography>}
+        </Paper>
+    )
+}
+
+export default Runner;