@stackoverflow/backstage-plugin-stack-overflow-teams 1.6.1 → 1.6.3

package/dist/components/StackOverflow/StackOverflowPostQuestionModal.esm.js

@@ -0,0 +1,803 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState, useCallback, useMemo, useEffect } from 'react';
+import { useApi } from '@backstage/core-plugin-api';
+import Chip from '@mui/material/Chip';
+import { stackoverflowteamsApiRef } from '../../api/StackOverflowAPI.esm.js';
+import Modal from '@mui/material/Modal';
+import Box from '@mui/material/Box';
+import TextField from '@mui/material/TextField';
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
+import Link from '@mui/material/Link';
+import Paper from '@mui/material/Paper';
+import Alert from '@mui/material/Alert';
+import AlertTitle from '@mui/material/AlertTitle';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import Grid from '@mui/material/Grid';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+import InfoIcon from '@mui/icons-material/Info';
+import LightbulbIcon from '@mui/icons-material/Lightbulb';
+import CodeIcon from '@mui/icons-material/Code';
+import TitleIcon from '@mui/icons-material/Title';
+import DescriptionIcon from '@mui/icons-material/Description';
+import LocalOfferIcon from '@mui/icons-material/LocalOffer';
+import GroupIcon from '@mui/icons-material/Group';
+import PersonIcon from '@mui/icons-material/Person';
+import CloseIcon from '@mui/icons-material/Close';
+import IconButton from '@mui/material/IconButton';
+import { useStackOverflowStyles } from './hooks/useStackOverflowStyles.esm.js';
+import { TiptapEditor } from './TiptapEditor.esm.js';
+import CircularProgress from '@mui/material/CircularProgress';
+import { debounce } from '@material-ui/core';
+import Divider from '@mui/material/Divider';
+
+const isMac = () => {
+  return typeof navigator !== "undefined" && navigator.platform.toUpperCase().indexOf("MAC") >= 0;
+};
+const getModifierKey = () => {
+  const isApple = isMac();
+  return {
+    symbol: isApple ? "\u2318" : "Ctrl",
+    text: isApple ? "Cmd" : "Ctrl"
+  };
+};
+const StackOverflowPostQuestionModal = () => {
+  const stackOverflowApi = useApi(stackoverflowteamsApiRef);
+  const [title, setTitle] = useState("");
+  const [body, setBody] = useState("");
+  const [tags, setTags] = useState([]);
+  const [tagInput, setTagInput] = useState("");
+  const [focusedField, setFocusedField] = useState(null);
+  const [isAuthenticated, setIsAuthenticated] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [success, setSuccess] = useState(false);
+  const [open, setOpen] = useState(false);
+  const [titleValidation, setTitleValidation] = useState("");
+  const [bodyValidation, setBodyValidation] = useState("");
+  const [tagsValidation, setTagsValidation] = useState("");
+  const classes = useStackOverflowStyles();
+  const [titleStarted, setTitleStarted] = useState(false);
+  const [bodyStarted, setBodyStarted] = useState(false);
+  const [tagsStarted, setTagsStarted] = useState(false);
+  const [popularTags, setPopularTags] = useState([]);
+  const [loadingTags, setLoadingTags] = useState(false);
+  const [tagError, setTagError] = useState(null);
+  const [tagSearchResults, setTagSearchResults] = useState([]);
+  const [searchingTags, setSearchingTags] = useState(false);
+  const [showCreateTagOption, setShowCreateTagOption] = useState(false);
+  const fetchPopularTags = useCallback(async function fetchPopularTags2() {
+    if (!isAuthenticated) return;
+    setLoadingTags(true);
+    setTagError(null);
+    try {
+      const response = await stackOverflowApi.getTags();
+      const topTags = response.items?.slice(0, 10) || [];
+      setPopularTags(topTags);
+    } catch (err) {
+      setTagError("Failed to load tags.");
+      setPopularTags([]);
+    } finally {
+      setLoadingTags(false);
+    }
+  }, [stackOverflowApi, isAuthenticated]);
+  const searchTags = useMemo(
+    () => debounce(async (searchTerm) => {
+      if (!searchTerm.trim() || !isAuthenticated) {
+        setTagSearchResults([]);
+        setShowCreateTagOption(false);
+        return;
+      }
+      setSearchingTags(true);
+      try {
+        const response = await stackOverflowApi.getTags(searchTerm.trim());
+        const results = response.items || [];
+        setTagSearchResults(results);
+        setShowCreateTagOption(results.length === 0);
+      } catch (err) {
+        setTagSearchResults([]);
+        setShowCreateTagOption(true);
+      } finally {
+        setSearchingTags(false);
+      }
+    }, 500),
+    [stackOverflowApi, isAuthenticated]
+  );
+  const modifierKey = getModifierKey();
+  function validateTitle(value) {
+    if (titleStarted && value.trim().length < 15) {
+      setTitleValidation("Title should be at least 15 characters for clarity.");
+    } else {
+      setTitleValidation("");
+    }
+  }
+  const validateBody = useCallback(function validateBody2(value) {
+    const textContent = value.replace(/<[^>]*>/g, "");
+    if (bodyStarted && textContent.trim().length < 30) {
+      setBodyValidation("Please provide more detail (minimum 30 characters).");
+    } else {
+      setBodyValidation("");
+    }
+  }, [bodyStarted]);
+  const validateTags = useCallback(function validateTags2() {
+    if (tagsStarted && tags.length === 0) {
+      setTagsValidation("At least one tag is required.");
+    } else {
+      setTagsValidation("");
+    }
+  }, [tagsStarted, tags]);
+  useEffect(() => {
+    const openModal = async () => {
+      const authStatus = await stackOverflowApi.getAuthStatus();
+      setIsAuthenticated(authStatus);
+      setSuccess(false);
+      setOpen(true);
+    };
+    window.addEventListener("openAskQuestionModal", openModal);
+    return () => {
+      window.removeEventListener("openAskQuestionModal", openModal);
+    };
+  }, [stackOverflowApi]);
+  useEffect(() => {
+    if (open && isAuthenticated && popularTags.length === 0) {
+      fetchPopularTags();
+    }
+  }, [open, isAuthenticated, fetchPopularTags, popularTags.length]);
+  useEffect(() => {
+    validateTags();
+  }, [tags, tagsStarted, validateTags]);
+  useEffect(() => {
+    validateBody(body);
+  }, [body, bodyStarted, validateBody]);
+  const handleSubmit = async () => {
+    validateTitle(title);
+    validateBody(body);
+    validateTags();
+    if (titleValidation || bodyValidation || tagsValidation) {
+      return;
+    }
+    const textContent = body.replace(/<[^>]*>/g, "").trim();
+    if (!title || !textContent || tags.length === 0) {
+      setError("Title, body, and at least one tag are required.");
+      return;
+    }
+    setLoading(true);
+    setError(null);
+    try {
+      const response = await stackOverflowApi.postQuestion(title, body, tags);
+      setSuccess(true);
+      setTitle("");
+      setBody("");
+      setTags([]);
+      setTagInput("");
+      if (response.webUrl) {
+        window.open(`${response.webUrl}?r=Backstage_Plugin`, "_blank");
+      }
+    } catch (err) {
+      if (err instanceof Error) {
+        setError(err.message);
+      } else {
+        setError("An unexpected error occurred.");
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+  const handleTagAdd = () => {
+    const newTags = tagInput.split(/[\s,]+/).map((tag) => tag.trim()).filter((tag) => tag.length > 0 && !tags.includes(tag));
+    if (newTags.length > 0 && tags.length + newTags.length <= 5) {
+      setTags([...tags, ...newTags]);
+      if (!tagsStarted) setTagsStarted(true);
+    }
+    setTagInput("");
+    setTagSearchResults([]);
+  };
+  const handleLoginRedirect = () => {
+    setOpen(false);
+    window.location.href = "/stack-overflow-teams";
+  };
+  const handleBodyChange = (value) => {
+    if (!bodyStarted) setBodyStarted(true);
+    setBody(value);
+  };
+  const handleBodyFocus = () => {
+    setFocusedField("body");
+  };
+  const renderTitleTips = () => /* @__PURE__ */ jsxs(Box, { children: [
+    /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1, mb: 2 }, children: [
+      /* @__PURE__ */ jsx(TitleIcon, { color: "primary" }),
+      /* @__PURE__ */ jsx(Typography, { variant: "h6", fontWeight: 600, children: "Writing a Good Title" })
+    ] }),
+    /* @__PURE__ */ jsx(Card, { elevation: 0, sx: { mb: 2, border: "1px solid", borderColor: "divider" }, children: /* @__PURE__ */ jsxs(CardContent, { sx: { "&:last-child": { pb: 2 } }, children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", fontWeight: 600, sx: { mb: 1.5, color: "success.main" }, children: "\u2713 Good Examples" }),
+      /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column", gap: 1 }, children: [
+        /* @__PURE__ */ jsx(Paper, { elevation: 0, sx: { p: 1.5, bgcolor: "success.50", border: "1px solid", borderColor: "success.200" }, children: /* @__PURE__ */ jsx(Typography, { variant: "body2", children: '"How to handle async errors in React useEffect hook?"' }) }),
+        /* @__PURE__ */ jsx(Paper, { elevation: 0, sx: { p: 1.5, bgcolor: "success.50", border: "1px solid", borderColor: "success.200" }, children: /* @__PURE__ */ jsx(Typography, { variant: "body2", children: '"Why does my Docker container fail to connect to PostgreSQL?"' }) })
+      ] }),
+      /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", fontWeight: 600, sx: { mt: 2, mb: 1.5, color: "error.main" }, children: "\u2717 Avoid" }),
+      /* @__PURE__ */ jsx(Paper, { elevation: 0, sx: { p: 1.5, bgcolor: "error.50", border: "1px solid", borderColor: "error.200" }, children: /* @__PURE__ */ jsx(Typography, { variant: "body2", children: `"Help! My code doesn't work!"` }) })
+    ] }) }),
+    /* @__PURE__ */ jsx(Card, { elevation: 0, sx: { border: "1px solid", borderColor: "divider" }, children: /* @__PURE__ */ jsxs(CardContent, { sx: { "&:last-child": { pb: 2 } }, children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", fontWeight: 600, sx: { mb: 1 }, children: "Tips for Success" }),
+      /* @__PURE__ */ jsxs(List, { dense: true, disablePadding: true, children: [
+        /* @__PURE__ */ jsxs(ListItem, { sx: { py: 0.5, px: 0 }, children: [
+          /* @__PURE__ */ jsx(ListItemIcon, { sx: { minWidth: 32 }, children: /* @__PURE__ */ jsx(InfoIcon, { color: "info", fontSize: "small" }) }),
+          /* @__PURE__ */ jsx(
+            ListItemText,
+            {
+              primary: "Be specific about your problem",
+              primaryTypographyProps: { variant: "body2" }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(ListItem, { sx: { py: 0.5, px: 0 }, children: [
+          /* @__PURE__ */ jsx(ListItemIcon, { sx: { minWidth: 32 }, children: /* @__PURE__ */ jsx(InfoIcon, { color: "info", fontSize: "small" }) }),
+          /* @__PURE__ */ jsx(
+            ListItemText,
+            {
+              primary: "Include relevant technologies",
+              primaryTypographyProps: { variant: "body2" }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(ListItem, { sx: { py: 0.5, px: 0 }, children: [
+          /* @__PURE__ */ jsx(ListItemIcon, { sx: { minWidth: 32 }, children: /* @__PURE__ */ jsx(InfoIcon, { color: "info", fontSize: "small" }) }),
+          /* @__PURE__ */ jsx(
+            ListItemText,
+            {
+              primary: "Avoid vague terms like 'doesn't work'",
+              primaryTypographyProps: { variant: "body2" }
+            }
+          )
+        ] })
+      ] })
+    ] }) })
+  ] });
+  const renderBodyTips = () => /* @__PURE__ */ jsxs(Box, { children: [
+    /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1, mb: 2 }, children: [
+      /* @__PURE__ */ jsx(DescriptionIcon, { color: "primary" }),
+      /* @__PURE__ */ jsx(Typography, { variant: "h6", fontWeight: 600, children: "Detailed Explanation" })
+    ] }),
+    /* @__PURE__ */ jsx(Card, { elevation: 0, sx: { mb: 2, border: "1px solid", borderColor: "divider" }, children: /* @__PURE__ */ jsxs(CardContent, { sx: { "&:last-child": { pb: 2 } }, children: [
+      /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1, mb: 1 }, children: [
+        /* @__PURE__ */ jsx(CodeIcon, { color: "info", fontSize: "small" }),
+        /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", fontWeight: 600, children: "Rich Text Formatting" })
+      ] }),
+      /* @__PURE__ */ jsxs(Typography, { variant: "body2", color: "text.secondary", children: [
+        "Use the toolbar for bold, italic, code blocks, and lists. Shortcuts: ",
+        modifierKey.text,
+        "+B (bold), ",
+        modifierKey.text,
+        "+I (italic), ",
+        modifierKey.text,
+        "+U (underline), ",
+        modifierKey.text,
+        "+E (code)."
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsx(Card, { elevation: 0, sx: { border: "1px solid", borderColor: "divider" }, children: /* @__PURE__ */ jsxs(CardContent, { sx: { "&:last-child": { pb: 2 } }, children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", fontWeight: 600, sx: { mb: 1 }, children: "Structure Your Question" }),
+      /* @__PURE__ */ jsxs(List, { dense: true, disablePadding: true, children: [
+        /* @__PURE__ */ jsxs(ListItem, { sx: { py: 0.5, px: 0 }, children: [
+          /* @__PURE__ */ jsx(ListItemIcon, { sx: { minWidth: 32 }, children: /* @__PURE__ */ jsx(CheckCircleIcon, { color: "success", fontSize: "small" }) }),
+          /* @__PURE__ */ jsx(
+            ListItemText,
+            {
+              primary: "What you're trying to achieve",
+              primaryTypographyProps: { variant: "body2" }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(ListItem, { sx: { py: 0.5, px: 0 }, children: [
+          /* @__PURE__ */ jsx(ListItemIcon, { sx: { minWidth: 32 }, children: /* @__PURE__ */ jsx(CheckCircleIcon, { color: "success", fontSize: "small" }) }),
+          /* @__PURE__ */ jsx(
+            ListItemText,
+            {
+              primary: "What you've tried so far",
+              primaryTypographyProps: { variant: "body2" }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(ListItem, { sx: { py: 0.5, px: 0 }, children: [
+          /* @__PURE__ */ jsx(ListItemIcon, { sx: { minWidth: 32 }, children: /* @__PURE__ */ jsx(CheckCircleIcon, { color: "success", fontSize: "small" }) }),
+          /* @__PURE__ */ jsx(
+            ListItemText,
+            {
+              primary: "Expected vs actual results",
+              primaryTypographyProps: { variant: "body2" }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(ListItem, { sx: { py: 0.5, px: 0 }, children: [
+          /* @__PURE__ */ jsx(ListItemIcon, { sx: { minWidth: 32 }, children: /* @__PURE__ */ jsx(CheckCircleIcon, { color: "success", fontSize: "small" }) }),
+          /* @__PURE__ */ jsx(
+            ListItemText,
+            {
+              primary: "Error messages (if any)",
+              primaryTypographyProps: { variant: "body2" }
+            }
+          )
+        ] })
+      ] })
+    ] }) })
+  ] });
+  const renderTagsTips = () => /* @__PURE__ */ jsxs(Box, { children: [
+    /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1, mb: 2 }, children: [
+      /* @__PURE__ */ jsx(LocalOfferIcon, { color: "primary" }),
+      /* @__PURE__ */ jsx(Typography, { variant: "h6", fontWeight: 600, children: "Choosing Tags" })
+    ] }),
+    (loadingTags || popularTags.length > 0 || tagError) && /* @__PURE__ */ jsx(Card, { elevation: 0, sx: { mb: 2, border: "1px solid", borderColor: "divider" }, children: /* @__PURE__ */ jsxs(CardContent, { sx: { "&:last-child": { pb: 2 } }, children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", fontWeight: 600, sx: { mb: 1.5 }, children: "Popular Tags" }),
+      loadingTags && /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", justifyContent: "center", alignItems: "center", py: 2 }, children: [
+        /* @__PURE__ */ jsx(CircularProgress, { size: 20 }),
+        /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { ml: 1 }, color: "text.secondary", children: "Loading..." })
+      ] }),
+      !loadingTags && tagError && /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "error", children: tagError }),
+      !loadingTags && !tagError && popularTags.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Box, { sx: { display: "flex", flexWrap: "wrap", gap: 0.75 }, children: popularTags.map((tag) => /* @__PURE__ */ jsx(
+          Chip,
+          {
+            label: tag.name,
+            size: "small",
+            variant: "outlined",
+            onClick: () => !tags.includes(tag.name) && tags.length < 5 && setTags([...tags, tag.name]),
+            disabled: tags.includes(tag.name) || tags.length >= 5,
+            sx: {
+              cursor: tags.includes(tag.name) || tags.length >= 5 ? "default" : "pointer",
+              "&:hover": {
+                bgcolor: tags.includes(tag.name) || tags.length >= 5 ? "transparent" : "action.hover"
+              }
+            }
+          },
+          tag.name
+        )) }),
+        /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", sx: { mt: 1.5, display: "block" }, children: "Click to add popular tags quickly" })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsx(Card, { elevation: 0, sx: { border: "1px solid", borderColor: "divider" }, children: /* @__PURE__ */ jsxs(CardContent, { sx: { "&:last-child": { pb: 2 } }, children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", fontWeight: 600, sx: { mb: 1 }, children: "Tag Guidelines" }),
+      /* @__PURE__ */ jsxs(List, { dense: true, disablePadding: true, children: [
+        /* @__PURE__ */ jsxs(ListItem, { sx: { py: 0.5, px: 0 }, children: [
+          /* @__PURE__ */ jsx(ListItemIcon, { sx: { minWidth: 32 }, children: /* @__PURE__ */ jsx(InfoIcon, { color: "info", fontSize: "small" }) }),
+          /* @__PURE__ */ jsx(
+            ListItemText,
+            {
+              primary: "Use 1-5 tags that describe your question",
+              primaryTypographyProps: { variant: "body2" }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(ListItem, { sx: { py: 0.5, px: 0 }, children: [
+          /* @__PURE__ */ jsx(ListItemIcon, { sx: { minWidth: 32 }, children: /* @__PURE__ */ jsx(InfoIcon, { color: "info", fontSize: "small" }) }),
+          /* @__PURE__ */ jsx(
+            ListItemText,
+            {
+              primary: "Try to use existing tags",
+              primaryTypographyProps: { variant: "body2" }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(ListItem, { sx: { py: 0.5, px: 0 }, children: [
+          /* @__PURE__ */ jsx(ListItemIcon, { sx: { minWidth: 32 }, children: /* @__PURE__ */ jsx(InfoIcon, { color: "info", fontSize: "small" }) }),
+          /* @__PURE__ */ jsx(
+            ListItemText,
+            {
+              primary: "Add relevant tools and platforms",
+              primaryTypographyProps: { variant: "body2" }
+            }
+          )
+        ] })
+      ] })
+    ] }) })
+  ] });
+  const renderMentionTips = () => /* @__PURE__ */ jsxs(Box, { children: [
+    /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1, mb: 2 }, children: [
+      /* @__PURE__ */ jsx(GroupIcon, { color: "primary" }),
+      /* @__PURE__ */ jsx(Typography, { variant: "h6", fontWeight: 600, children: "Asking Team Members" })
+    ] }),
+    /* @__PURE__ */ jsx(Card, { elevation: 0, sx: { mb: 2, border: "1px solid", borderColor: "divider" }, children: /* @__PURE__ */ jsxs(CardContent, { sx: { "&:last-child": { pb: 2 } }, children: [
+      /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1, mb: 1 }, children: [
+        /* @__PURE__ */ jsx(PersonIcon, { color: "info", fontSize: "small" }),
+        /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", fontWeight: 600, children: "When to Mention Someone" })
+      ] }),
+      /* @__PURE__ */ jsxs(List, { dense: true, disablePadding: true, children: [
+        /* @__PURE__ */ jsxs(ListItem, { sx: { py: 0.5, px: 0 }, children: [
+          /* @__PURE__ */ jsx(ListItemIcon, { sx: { minWidth: 32 }, children: /* @__PURE__ */ jsx(CheckCircleIcon, { color: "success", fontSize: "small" }) }),
+          /* @__PURE__ */ jsx(
+            ListItemText,
+            {
+              primary: "They're an expert in the relevant area",
+              primaryTypographyProps: { variant: "body2" }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(ListItem, { sx: { py: 0.5, px: 0 }, children: [
+          /* @__PURE__ */ jsx(ListItemIcon, { sx: { minWidth: 32 }, children: /* @__PURE__ */ jsx(CheckCircleIcon, { color: "success", fontSize: "small" }) }),
+          /* @__PURE__ */ jsx(
+            ListItemText,
+            {
+              primary: "They've worked on similar problems",
+              primaryTypographyProps: { variant: "body2" }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(ListItem, { sx: { py: 0.5, px: 0 }, children: [
+          /* @__PURE__ */ jsx(ListItemIcon, { sx: { minWidth: 32 }, children: /* @__PURE__ */ jsx(CheckCircleIcon, { color: "success", fontSize: "small" }) }),
+          /* @__PURE__ */ jsx(
+            ListItemText,
+            {
+              primary: "They're the owner of the code in question",
+              primaryTypographyProps: { variant: "body2" }
+            }
+          )
+        ] })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsx(Card, { elevation: 0, sx: { border: "1px solid", borderColor: "divider" }, children: /* @__PURE__ */ jsxs(CardContent, { sx: { "&:last-child": { pb: 2 } }, children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", fontWeight: 600, sx: { mb: 1 }, children: "Mention Guidelines" }),
+      /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", sx: { mb: 1 }, children: "Type usernames or group names. You can mention:" }),
+      /* @__PURE__ */ jsxs(List, { dense: true, disablePadding: true, children: [
+        /* @__PURE__ */ jsxs(ListItem, { sx: { py: 0.5, px: 0 }, children: [
+          /* @__PURE__ */ jsx(ListItemIcon, { sx: { minWidth: 32 }, children: /* @__PURE__ */ jsx(InfoIcon, { color: "info", fontSize: "small" }) }),
+          /* @__PURE__ */ jsx(
+            ListItemText,
+            {
+              primary: "Individual team members (@john.doe)",
+              primaryTypographyProps: { variant: "body2" }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(ListItem, { sx: { py: 0.5, px: 0 }, children: [
+          /* @__PURE__ */ jsx(ListItemIcon, { sx: { minWidth: 32 }, children: /* @__PURE__ */ jsx(InfoIcon, { color: "info", fontSize: "small" }) }),
+          /* @__PURE__ */ jsx(
+            ListItemText,
+            {
+              primary: "Team groups (@frontend-team)",
+              primaryTypographyProps: { variant: "body2" }
+            }
+          )
+        ] })
+      ] })
+    ] }) })
+  ] });
+  const renderDefaultTips = () => /* @__PURE__ */ jsxs(Box, { children: [
+    /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1, mb: 2 }, children: [
+      /* @__PURE__ */ jsx(LightbulbIcon, { color: "primary" }),
+      /* @__PURE__ */ jsx(Typography, { variant: "h6", fontWeight: 600, children: "Writing a Good Question" })
+    ] }),
+    /* @__PURE__ */ jsx(Card, { elevation: 0, sx: { border: "1px solid", borderColor: "divider" }, children: /* @__PURE__ */ jsxs(CardContent, { sx: { "&:last-child": { pb: 2 } }, children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", fontWeight: 600, sx: { mb: 1.5 }, children: "Quick Tips" }),
+      /* @__PURE__ */ jsxs(List, { dense: true, disablePadding: true, children: [
+        /* @__PURE__ */ jsxs(ListItem, { sx: { py: 0.5, px: 0 }, children: [
+          /* @__PURE__ */ jsx(ListItemIcon, { sx: { minWidth: 32 }, children: /* @__PURE__ */ jsx(CheckCircleIcon, { color: "success", fontSize: "small" }) }),
+          /* @__PURE__ */ jsx(
+            ListItemText,
+            {
+              primary: "Be specific and clear in your title",
+              primaryTypographyProps: { variant: "body2" }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(ListItem, { sx: { py: 0.5, px: 0 }, children: [
+          /* @__PURE__ */ jsx(ListItemIcon, { sx: { minWidth: 32 }, children: /* @__PURE__ */ jsx(CheckCircleIcon, { color: "success", fontSize: "small" }) }),
+          /* @__PURE__ */ jsx(
+            ListItemText,
+            {
+              primary: "Include relevant code and error messages",
+              primaryTypographyProps: { variant: "body2" }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(ListItem, { sx: { py: 0.5, px: 0 }, children: [
+          /* @__PURE__ */ jsx(ListItemIcon, { sx: { minWidth: 32 }, children: /* @__PURE__ */ jsx(CheckCircleIcon, { color: "success", fontSize: "small" }) }),
+          /* @__PURE__ */ jsx(
+            ListItemText,
+            {
+              primary: "Tag your question appropriately",
+              primaryTypographyProps: { variant: "body2" }
+            }
+          )
+        ] })
+      ] })
+    ] }) })
+  ] });
+  const renderRightPanel = () => {
+    switch (focusedField) {
+      case "title":
+        return renderTitleTips();
+      case "body":
+        return renderBodyTips();
+      case "tags":
+        return renderTagsTips();
+      case "mentions":
+        return renderMentionTips();
+      default:
+        return renderDefaultTips();
+    }
+  };
+  const renderQuestionForm = () => /* @__PURE__ */ jsxs(Box, { sx: { m: 4 }, children: [
+    /* @__PURE__ */ jsxs(Box, { sx: { mb: 3 }, children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "subtitle1", fontWeight: 600, sx: { mb: 0.5 }, children: "Title" }),
+      /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", sx: { mb: 1.5 }, children: "Be specific and imagine you're asking a question to another person." }),
+      /* @__PURE__ */ jsx(
+        TextField,
+        {
+          fullWidth: true,
+          variant: "outlined",
+          value: title,
+          onChange: (e) => {
+            if (!titleStarted) setTitleStarted(true);
+            setTitle(e.target.value);
+            validateTitle(e.target.value);
+          },
+          onFocus: () => setFocusedField("title"),
+          error: titleStarted && !!titleValidation,
+          helperText: titleStarted ? titleValidation : "",
+          placeholder: "e.g., How to handle authentication in React components?",
+          size: "small"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(Box, { sx: { mb: 3 }, children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "subtitle1", fontWeight: 600, sx: { mb: 0.5 }, children: "What are the details of your problem?" }),
+      /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", sx: { mb: 1.5 }, children: "Introduce the problem and expand on what you put in the title." }),
+      /* @__PURE__ */ jsx(
+        TiptapEditor,
+        {
+          content: body,
+          onUpdate: handleBodyChange,
+          onFocus: handleBodyFocus,
+          placeholder: "Describe your problem in detail. Include any error messages, code snippets, and what you've tried so far...",
+          error: bodyStarted && !!bodyValidation,
+          modifierKey
+        }
+      ),
+      bodyStarted && bodyValidation && /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "error", sx: { mt: 1, display: "block" }, children: bodyValidation })
+    ] }),
+    /* @__PURE__ */ jsxs(Box, { sx: { mb: 3, position: "relative" }, children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "subtitle1", fontWeight: 600, sx: { mb: 0.5 }, children: "Tags" }),
+      /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", sx: { mb: 1.5 }, children: "At least one tag is required." }),
+      /* @__PURE__ */ jsx(
+        TextField,
+        {
+          fullWidth: true,
+          variant: "outlined",
+          value: tagInput,
+          onChange: (e) => {
+            const value = e.target.value;
+            setTagInput(value);
+            setShowCreateTagOption(false);
+            const lastTag = value.split(/[\s,]/).pop()?.trim() || "";
+            if (lastTag.length >= 2) {
+              searchTags(lastTag);
+            } else {
+              setTagSearchResults([]);
+            }
+            if (value.includes(",") || value.includes(" ")) {
+              handleTagAdd();
+            }
+          },
+          onFocus: () => setFocusedField("tags"),
+          onKeyDown: (e) => e.key === "Enter" && handleTagAdd(),
+          placeholder: "e.g., react, javascript, authentication",
+          error: !!tagsValidation,
+          size: "small"
+        }
+      ),
+      (tagSearchResults.length > 0 || searchingTags || tagInput.trim() && tagSearchResults.length === 0 && !searchingTags) && /* @__PURE__ */ jsxs(
+        Paper,
+        {
+          elevation: 3,
+          sx: {
+            position: "absolute",
+            zIndex: 1e3,
+            width: "100%",
+            maxHeight: 200,
+            overflow: "auto",
+            mt: 0.5
+          },
+          children: [
+            searchingTags && /* @__PURE__ */ jsxs(Box, { sx: { p: 2, display: "flex", alignItems: "center", gap: 1 }, children: [
+              /* @__PURE__ */ jsx(CircularProgress, { size: 16 }),
+              /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: "Searching tags..." })
+            ] }),
+            tagSearchResults.map((tag) => /* @__PURE__ */ jsx(
+              ListItem,
+              {
+                onClick: () => {
+                  if (!tags.includes(tag.name) && tags.length < 5) {
+                    setTags([...tags, tag.name]);
+                    if (!tagsStarted) setTagsStarted(true);
+                  }
+                  setTagInput("");
+                  setTagSearchResults([]);
+                },
+                sx: {
+                  cursor: "pointer",
+                  py: 1,
+                  "&:hover": { backgroundColor: "action.hover" }
+                },
+                children: /* @__PURE__ */ jsx(
+                  ListItemText,
+                  {
+                    primary: tag.name,
+                    secondary: `${tag.postCount} posts`,
+                    primaryTypographyProps: { variant: "body2" },
+                    secondaryTypographyProps: { variant: "caption" }
+                  }
+                )
+              },
+              tag.name
+            )),
+            tagInput.trim() && showCreateTagOption && /* @__PURE__ */ jsx(
+              ListItem,
+              {
+                onClick: () => {
+                  const trimmedTag = tagInput.trim();
+                  if (trimmedTag && !tags.includes(trimmedTag) && tags.length < 5) {
+                    setTags([...tags, trimmedTag]);
+                    if (!tagsStarted) setTagsStarted(true);
+                    setShowCreateTagOption(false);
+                  }
+                  setTagInput("");
+                  setTagSearchResults([]);
+                },
+                sx: {
+                  cursor: "pointer",
+                  py: 1,
+                  "&:hover": { backgroundColor: "action.hover" },
+                  borderTop: tagSearchResults.length > 0 ? "1px solid" : "none",
+                  borderColor: "divider"
+                },
+                children: /* @__PURE__ */ jsx(
+                  ListItemText,
+                  {
+                    primary: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+                      /* @__PURE__ */ jsxs(Typography, { variant: "body2", children: [
+                        'Create "',
+                        tagInput.trim(),
+                        '"'
+                      ] }),
+                      /* @__PURE__ */ jsx(Chip, { size: "small", label: "New", color: "primary", variant: "outlined" })
+                    ] }),
+                    secondary: "This will create a new tag",
+                    secondaryTypographyProps: { variant: "caption" }
+                  }
+                )
+              }
+            )
+          ]
+        }
+      ),
+      tags.length > 0 && /* @__PURE__ */ jsx(Box, { sx: { display: "flex", flexWrap: "wrap", gap: 0.75, mt: 1.5 }, children: tags.map((tag, index) => /* @__PURE__ */ jsx(
+        Chip,
+        {
+          label: tag,
+          onDelete: () => setTags(tags.filter((t) => t !== tag)),
+          size: "small",
+          variant: "outlined",
+          color: "primary"
+        },
+        index
+      )) }),
+      tagsValidation && /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "error", sx: { mt: 0.5, display: "block" }, children: tagsValidation })
+    ] }),
+    error && /* @__PURE__ */ jsx(Alert, { severity: "error", sx: { mb: 2 }, children: error }),
+    /* @__PURE__ */ jsx(Divider, { sx: { my: 3 } }),
+    /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", gap: 2 }, children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "contained",
+          className: classes.button,
+          size: "medium",
+          onClick: handleSubmit,
+          disabled: loading || !isAuthenticated,
+          sx: { minWidth: 140 },
+          children: loading ? "Posting..." : "Post Question"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          onClick: () => setOpen(false),
+          variant: "outlined",
+          size: "medium",
+          children: "Cancel"
+        }
+      )
+    ] })
+  ] });
+  const renderContent = () => {
+    if (!isAuthenticated) {
+      return /* @__PURE__ */ jsxs(Box, { sx: { textAlign: "center", py: 6 }, children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "h6", color: "text.primary", sx: { mb: 1 }, children: "Authentication Required" }),
+        /* @__PURE__ */ jsxs(Typography, { color: "text.secondary", sx: { mb: 3 }, children: [
+          "Please",
+          " ",
+          /* @__PURE__ */ jsx(Link, { component: "button", onClick: handleLoginRedirect, sx: { cursor: "pointer" }, children: "log in" }),
+          " ",
+          "to post questions."
+        ] })
+      ] });
+    }
+    if (success) {
+      return /* @__PURE__ */ jsx(Box, { sx: { py: 4 }, children: /* @__PURE__ */ jsxs(Alert, { severity: "success", children: [
+        /* @__PURE__ */ jsx(AlertTitle, { children: "Question Posted Successfully!" }),
+        "Your question has been posted and will open in a new tab."
+      ] }) });
+    }
+    return /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 3, children: [
+      /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, md: 8, children: /* @__PURE__ */ jsx(Box, { sx: { pr: { md: 2 } }, children: renderQuestionForm() }) }),
+      /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, md: 4, children: /* @__PURE__ */ jsx(
+        Box,
+        {
+          sx: {
+            position: { md: "sticky" },
+            top: { md: 24 },
+            pl: { md: 2 },
+            borderLeft: { md: "1px solid" },
+            borderColor: { md: "divider" }
+          },
+          children: renderRightPanel()
+        }
+      ) })
+    ] });
+  };
+  return /* @__PURE__ */ jsx(Modal, { open, onClose: () => setOpen(false), children: /* @__PURE__ */ jsxs(
+    Box,
+    {
+      sx: {
+        position: "absolute",
+        top: "50%",
+        left: "50%",
+        transform: "translate(-50%, -50%)",
+        width: success ? { xs: "90vw", sm: "500px" } : { xs: "95vw", sm: "90vw", md: "85vw", lg: "80vw", xl: "75vw" },
+        maxWidth: success ? "500px" : "1400px",
+        maxHeight: "90vh",
+        bgcolor: "background.paper",
+        boxShadow: 24,
+        borderRadius: 2,
+        overflow: "hidden",
+        display: "flex",
+        flexDirection: "column"
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          Box,
+          {
+            sx: {
+              p: 2.5,
+              borderBottom: "1px solid",
+              borderColor: "divider",
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center"
+            },
+            children: [
+              /* @__PURE__ */ jsx(Typography, { variant: "h6", fontWeight: 600, children: "Ask a Question" }),
+              /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  onClick: () => setOpen(false),
+                  size: "small",
+                  sx: { ml: 2 },
+                  children: /* @__PURE__ */ jsx(CloseIcon, {})
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(Box, { sx: { p: 3, overflow: "auto", flexGrow: 1 }, children: renderContent() })
+      ]
+    }
+  ) });
+};
+
+export { StackOverflowPostQuestionModal };
+//# sourceMappingURL=StackOverflowPostQuestionModal.esm.js.map