Minor UI update

frontend/src/components/DocumentInput.tsx

@@ -1,8 +1,9 @@
-import { TextField, Button, Box } from '@mui/material';
+import { TextField, Button, Box, Alert } from '@mui/material';
 import { useState } from 'react';
 
 function DocumentInput() {
   const [url, setUrl] = useState('');
+  const [showSuccess, setShowSuccess] = useState(false);
 
   const handleSubmit = async () => {
     try {
@@ -14,23 +15,37 @@ function DocumentInput() {
         body: JSON.stringify({ url }),
       });
       if (!response.ok) throw new Error('Network response was not ok');
-      setUrl('');
+      setShowSuccess(true);
     } catch (error) {
       console.error('Error:', error);
     }
   };
 
+  const handleUrlChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setUrl(e.target.value);
+    if (showSuccess) {
+      setShowSuccess(false);
+    }
+  };
+
   return (
-    <Box sx={{ mb: 4, display: 'flex', gap: 2 }}>
-      <TextField
-        fullWidth
-        label="Source Documentation"
-        value={url}
-        onChange={(e) => setUrl(e.target.value)}
-      />
-      <Button variant="contained" onClick={handleSubmit}>
-        Pull Source Docs
-      </Button>
+    <Box sx={{ mb: 4 }}>
+      <Box sx={{ display: 'flex', gap: 2, mb: 2 }}>
+        <TextField
+          fullWidth
+          label="Source Documentation"
+          value={url}
+          onChange={handleUrlChange}
+        />
+        <Button variant="contained" onClick={handleSubmit}>
+          Pull Source Docs
+        </Button>
+      </Box>
+      {showSuccess && (
+        <Alert severity="success" sx={{ mt: 1 }}>
+          Source documentation imported successfully!
+        </Alert>
+      )}
     </Box>
   );
 }

frontend/src/tests/components/DocumentInput.test.tsx

@@ -11,7 +11,7 @@ describe('DocumentInput', () => {
     mockFetch.mockResolvedValue({ ok: true, json: () => Promise.resolve({}) });
   });
 
-  test('submits URL when button is clicked', async () => {
+  test('submits URL and shows success message while keeping URL in input', async () => {
     render(<DocumentInput />);
     
     const input = screen.getByLabelText('Source Documentation');
@@ -27,5 +27,35 @@ describe('DocumentInput', () => {
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({ url: 'https://example.com' }),
     });
+
+    // Check if success message is shown
+    expect(screen.getByText('Source documentation imported successfully!')).toBeInTheDocument();
+    
+    // Verify URL is still in the input
+    expect(input).toHaveValue('https://example.com');
+  });
+
+  test('hides success message when starting to type new URL', async () => {
+    render(<DocumentInput />);
+    
+    // First submit a URL
+    const input = screen.getByLabelText('Source Documentation');
+    const button = screen.getByText('Pull Source Docs');
+    
+    await act(async () => {
+      await fireEvent.change(input, { target: { value: 'https://example.com' } });
+      await fireEvent.click(button);
+    });
+
+    // Verify success message is shown
+    expect(screen.getByText('Source documentation imported successfully!')).toBeInTheDocument();
+
+    // Start typing new URL
+    await act(async () => {
+      await fireEvent.change(input, { target: { value: 'https://new' } });
+    });
+
+    // Verify success message is hidden
+    expect(screen.queryByText('Source documentation imported successfully!')).not.toBeInTheDocument();
   });
 });

run_local.sh

@@ -15,12 +15,12 @@ docker run -d \
     --env-file .env \
     --name simplify \
     -p 80:80 \
-    -p 8000:8000 \
+    -p 7860:7860 \
     simplify
 
 echo "Services started!"
-echo "Frontend available at: http://localhost"
-echo "Backend available at: http://localhost:8000"
+echo "Frontend available at: http://localhost:7860"
+echo "Backend available at: http://localhost:7860"
 echo ""
 echo "To view logs: docker logs -f simplify"
 echo "To stop: docker stop simplify"