added write settings in compose tab

Author: gurveervirk

src/App.js

@@ -206,11 +206,11 @@ const AppContent = ({ isGenerating, setIsGenerating, isBookmarking, setIsBookmar
     };
   }, [navigate, setIsGenerating, setIsBookmarking, setError]);
 
-  const handleQuestionSubmit = async (question) => {
+  const handleQuestionSubmit = async (question, tone = null, length = null) => {
     setIsGenerating(true);
     navigate('/output');
     try {
-      const result = await handleWrite(question);
+      const result = await handleWrite(question, tone, length);
       const outputData = {
         id: uuidv4(),
         input: question,

src/api/writeHandler.js

@@ -10,13 +10,13 @@ export const createWriterSession = async (tone, length, format, context) => {
   writer = await window.ai.writer.create({ tone, length, format, sharedContext: context });
 };
 
-export const handleWrite = async (prompt) => {
+export const handleWrite = async (prompt, chosenTone = null, chosenLength = null) => {
   if (!prompt) throw new Error("Prompt is required");
 
   const storedSettings = await loadSettings();
   const { tone, length, format, context } = storedSettings.write;
 
-  await createWriterSession(tone, length, format, context);
+  await createWriterSession(chosenTone === null ? tone : chosenTone, chosenLength === null ? length : chosenLength, format, context);
 
   const fullResponse = await writer.write(prompt);
   return DOMPurify.sanitize(marked.parse(fullResponse));

src/components/ui/QuestionBox.js

@@ -1,14 +1,35 @@
-import React, { useState } from 'react';
-import { Box, TextField, IconButton } from '@mui/material';
+import React, { useState, useEffect } from 'react';
+import { Box, TextField, IconButton, Select, MenuItem, Tooltip, Typography, CircularProgress } from '@mui/material';
 import SendIcon from '@mui/icons-material/Send';
 import CloseIcon from '@mui/icons-material/Close';
 import SearchIcon from '@mui/icons-material/Search';
+import { loadSettings, saveSettings } from "../../api/settingsStorage";
 
 const QuestionBox = ({ compose, closeBox, enhanceQuery }) => {
   const [question, setQuestion] = useState("");
+  const [settings, setSettings] = useState({});
+  const [loading, setLoading] = useState(true); // Track loading state
 
-  const handleSubmit = () => {
+  // Load settings on component mount
+  useEffect(() => {
+    const fetchSettings = async () => {
+      const storedSettings = await loadSettings();
+      const filteredSettings = Object.keys(storedSettings)
+        .filter(key => key !== "detect")
+        .reduce((obj, key) => {
+          obj[key] = storedSettings[key];
+          return obj;
+        }, {});
+      setSettings(filteredSettings);
+      console.log('Settings:', filteredSettings); // Log the settings
+      setLoading(false); // Mark loading as complete
+    };
+    fetchSettings();
+  }, []);
+
+  const handleSubmit = async () => {
     if (question.trim()) {
+      await saveSettings(settings);
       compose(question);
       setQuestion("");
     }
@@ -20,90 +41,99 @@ const QuestionBox = ({ compose, closeBox, enhanceQuery }) => {
     }
   };
 
+  if (loading) {
+    // Show a loading spinner while settings are being fetched
+    return (
+      <Box
+        sx={{
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          height: '100vh', // Adjust as needed
+          backgroundColor: 'background.default',
+        }}
+      >
+        <CircularProgress />
+      </Box>
+    );
+  }
+
   return (
     <Box
       sx={{
         position: 'relative',
         backgroundColor: 'background.default',
-        color: 'text.primary',
-        borderRadius: 2,
-        p: 2,
-        mt: 2,
-        width: '100%',
+        padding: 2,
+        borderRadius: 1,
         boxShadow: 3,
-        border: '2px solid #1A73E8',
-        textAlign: 'center',
       }}
     >
-      <Box
-        sx={{
-          display: 'flex',
-          alignItems: 'flex-start',
-        }}
-      >
-        <TextField
-          fullWidth
-          multiline
-          rows={4}
-          variant="outlined"
-          value={question}
-          onChange={(e) => setQuestion(e.target.value)}
-          placeholder="Type your question here..."
-          sx={{ 
-            flexGrow: 1,
-            bgcolor: 'background.paper',
-            color: 'text.primary',
-         }}
-        />
-        <Box
+      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
+        <Typography
+          variant="h6"
           sx={{
+            background: 'linear-gradient(90deg, #4285F4, #EA4335)',
+            WebkitBackgroundClip: 'text',
+            WebkitTextFillColor: 'transparent',
             display: 'flex',
-            flexDirection: 'column',
-            marginLeft: 1,
+            alignItems: 'flex-end',
+            lineHeight: 2,
           }}
         >
-          <IconButton
-            onClick={closeBox}
-            sx={{
-              color: '#1A73E8',
-              '&:hover': {
-                color: '#1558B0',
-              },
-              marginBottom: 1,
-            }}
-            aria-label="close"
-          >
-            <CloseIcon />
-          </IconButton>
-          <IconButton
-            onClick={handleEnhanceQuery}
-            sx={{
-              color: '#1A73E8',
-              '&:hover': {
-                color: '#1558B0',
-              },
-              marginBottom: 1,
-            }}
-            aria-label="search"
-          >
-            <SearchIcon />
-          </IconButton>
-          <IconButton
-            onClick={handleSubmit}
-            sx={{
-              color: '#1A73E8',
-              '&:hover': {
-                color: '#1558B0',
-              },
-            }}
-            aria-label="submit"
-          >
-            <SendIcon />
-          </IconButton>
+          Compose
+        </Typography>
+        <IconButton onClick={closeBox}>
+          <CloseIcon />
+        </IconButton>
+      </Box>
+      <TextField
+        fullWidth
+        multiline
+        rows={4}
+        value={question}
+        onChange={(e) => setQuestion(e.target.value)}
+        placeholder="Type your question here..."
+        variant="outlined"
+        sx={{ mb: 2 }}
+      />
+      <Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
+        <Select
+          value={settings["write"]?.tone || ""}
+          onChange={(e) => setSettings({ ...settings, "write": { ...settings["write"], tone: e.target.value } })}
+          sx={{ mr: 2 }}
+        >
+          {["formal", "neutral", "casual"].map((option) => (
+            <MenuItem key={option} value={option}>
+              {option.charAt(0).toUpperCase() + option.slice(1).toLowerCase()}
+            </MenuItem>
+          ))}
+        </Select>
+        <Select
+          value={settings["write"]?.length || ""}
+          onChange={(e) => setSettings({ ...settings, "write": { ...settings["write"], length: e.target.value } })}
+          sx={{ mr: 2 }}
+        >
+          {["short", "medium", "long"].map((option) => (
+            <MenuItem key={option} value={option}>
+              {option.charAt(0).toUpperCase() + option.slice(1).toLowerCase()}
+            </MenuItem>
+          ))}
+        </Select>
+        <Box sx={{ ml: 'auto', display: 'flex', alignItems: 'center' }}>
+          <Tooltip title="Enhance Query">
+            <IconButton onClick={handleEnhanceQuery}>
+              <SearchIcon />
+            </IconButton>
+          </Tooltip>
+          <Tooltip title="Compose">
+            <IconButton onClick={handleSubmit}>
+              <SendIcon />
+            </IconButton>
+          </Tooltip>
         </Box>
       </Box>
     </Box>
   );
 };
 
-export default QuestionBox;
+export default QuestionBox;