@oneuptime/common 9.2.16 → 9.2.18

package/UI/Components/AI/GenerateFromAIModal.tsx

@@ -0,0 +1,432 @@
+import React, {
+  FunctionComponent,
+  ReactElement,
+  useState,
+  useEffect,
+} from "react";
+import Modal, { ModalWidth } from "../Modal/Modal";
+import AILoader from "./AILoader";
+import ErrorMessage from "../ErrorMessage/ErrorMessage";
+import ButtonType from "../Button/ButtonTypes";
+import { ButtonStyleType } from "../Button/Button";
+import IconProp from "../../../Types/Icon/IconProp";
+import Dropdown, { DropdownOption, DropdownValue } from "../Dropdown/Dropdown";
+import MarkdownEditor from "../Markdown.tsx/MarkdownEditor";
+
+export interface GenerateFromAIModalProps {
+  title: string;
+  description?: string;
+  onClose: () => void;
+  onGenerate: (data: GenerateAIRequestData) => Promise<string>;
+  onSuccess: (generatedContent: string) => void;
+  templates?: Array<{ id: string; name: string; content?: string }>;
+  noteType?: NoteType; // Type of note being generated (determines default templates)
+}
+
+export interface GenerateAIRequestData {
+  template?: string;
+  templateId?: string;
+}
+
+// Template categories for different note types
+export type NoteType = "postmortem" | "public-note" | "internal-note";
+
+// Default hardcoded templates for incident postmortem
+const POSTMORTEM_TEMPLATES: Array<{
+  id: string;
+  name: string;
+  content: string;
+}> = [
+  {
+    id: "default-standard",
+    name: "Standard Postmortem",
+    content: `## Executive Summary
+[Brief overview of the incident, its impact, and resolution]
+
+## Incident Timeline
+| Time | Event |
+|------|-------|
+| [Time] | [Event description] |
+
+## Root Cause Analysis
+[Detailed analysis of what caused the incident]
+
+## Impact Assessment
+- **Duration**: [How long the incident lasted]
+- **Users Affected**: [Number or percentage of affected users]
+- **Services Affected**: [List of affected services]
+
+## Resolution
+[Steps taken to resolve the incident]
+
+## Action Items
+- [ ] [Action item 1]
+- [ ] [Action item 2]
+- [ ] [Action item 3]
+
+## Lessons Learned
+[Key takeaways and improvements identified]`,
+  },
+  {
+    id: "default-detailed",
+    name: "Detailed Technical Postmortem",
+    content: `## Incident Overview
+**Incident Title**: [Title]
+**Severity**: [P1/P2/P3/P4]
+**Duration**: [Start time] - [End time]
+**Authors**: [Names]
+
+## Summary
+[2-3 sentence summary of the incident]
+
+## Detection
+- **How was the incident detected?** [Monitoring alert / Customer report / etc.]
+- **Time to detection**: [Duration from start to detection]
+
+## Timeline
+| Timestamp | Action | Owner |
+|-----------|--------|-------|
+| [Time] | [What happened] | [Who did it] |
+
+## Root Cause
+### Primary Cause
+[Detailed explanation of the root cause]
+
+### Contributing Factors
+1. [Factor 1]
+2. [Factor 2]
+
+## Impact
+### Customer Impact
+[Description of how customers were affected]
+
+### Business Impact
+[Description of business consequences]
+
+### Technical Impact
+[Systems and services affected]
+
+## Mitigation & Resolution
+### Immediate Actions
+[Steps taken to stop the bleeding]
+
+### Permanent Fix
+[Long-term solution implemented]
+
+## Prevention
+### What Went Well
+- [Item 1]
+- [Item 2]
+
+### What Went Wrong
+- [Item 1]
+- [Item 2]
+
+### Where We Got Lucky
+- [Item 1]
+
+## Action Items
+| Action | Owner | Priority | Due Date |
+|--------|-------|----------|----------|
+| [Action] | [Name] | [High/Medium/Low] | [Date] |
+
+## Appendix
+[Any additional technical details, logs, or graphs]`,
+  },
+  {
+    id: "default-brief",
+    name: "Brief Postmortem",
+    content: `## What Happened
+[Concise description of the incident]
+
+## Why It Happened
+[Root cause explanation]
+
+## How We Fixed It
+[Resolution steps]
+
+## How We Prevent It
+- [ ] [Prevention action 1]
+- [ ] [Prevention action 2]`,
+  },
+];
+
+// Default templates for public notes (customer-facing)
+const PUBLIC_NOTE_TEMPLATES: Array<{
+  id: string;
+  name: string;
+  content: string;
+}> = [
+  {
+    id: "public-status-update",
+    name: "Status Update",
+    content: `## Current Status
+[Brief description of the current situation]
+
+## What We're Doing
+[Actions being taken to resolve the issue]
+
+## Next Update
+[Expected time for next update or resolution]`,
+  },
+  {
+    id: "public-resolution",
+    name: "Resolution Notice",
+    content: `## Issue Resolved
+[Brief description of what was resolved]
+
+## Summary
+[What happened and how it was fixed]
+
+## Prevention
+[Steps taken to prevent recurrence]
+
+Thank you for your patience.`,
+  },
+  {
+    id: "public-maintenance",
+    name: "Maintenance Update",
+    content: `## Maintenance Status
+[Current phase of the maintenance]
+
+## Progress
+[What has been completed]
+
+## Remaining Work
+[What still needs to be done]
+
+## Expected Completion
+[Estimated completion time]`,
+  },
+];
+
+// Default templates for internal notes (team-facing)
+const INTERNAL_NOTE_TEMPLATES: Array<{
+  id: string;
+  name: string;
+  content: string;
+}> = [
+  {
+    id: "internal-investigation",
+    name: "Investigation Update",
+    content: `## Current Investigation Status
+[What we're looking at]
+
+## Findings So Far
+- [Finding 1]
+- [Finding 2]
+
+## Hypothesis
+[Current theory about the root cause]
+
+## Next Steps
+- [ ] [Action 1]
+- [ ] [Action 2]`,
+  },
+  {
+    id: "internal-technical",
+    name: "Technical Analysis",
+    content: `## Technical Details
+[Detailed technical observations]
+
+## Metrics/Logs
+[Relevant metrics or log entries]
+
+## Impact Assessment
+[Technical impact analysis]
+
+## Recommendations
+[Technical recommendations for resolution]`,
+  },
+  {
+    id: "internal-handoff",
+    name: "Shift Handoff",
+    content: `## Current State
+[Where things stand now]
+
+## Actions Taken
+[What has been done so far]
+
+## Open Questions
+[Things that still need investigation]
+
+## Immediate Priorities
+- [ ] [Priority 1]
+- [ ] [Priority 2]
+
+## Contacts
+[Key people involved or to contact]`,
+  },
+];
+
+// Function to get default templates based on note type
+const getDefaultTemplates: (
+  noteType: NoteType,
+) => Array<{ id: string; name: string; content: string }> = (
+  noteType: NoteType,
+): Array<{ id: string; name: string; content: string }> => {
+  switch (noteType) {
+    case "postmortem":
+      return POSTMORTEM_TEMPLATES;
+    case "public-note":
+      return PUBLIC_NOTE_TEMPLATES;
+    case "internal-note":
+      return INTERNAL_NOTE_TEMPLATES;
+    default:
+      return POSTMORTEM_TEMPLATES;
+  }
+};
+
+const GenerateFromAIModal: FunctionComponent<GenerateFromAIModalProps> = (
+  props: GenerateFromAIModalProps,
+): ReactElement => {
+  // Get default templates based on note type
+  const defaultTemplates: Array<{ id: string; name: string; content: string }> =
+    getDefaultTemplates(props.noteType || "postmortem");
+
+  const [isGenerating, setIsGenerating] = useState<boolean>(false);
+  const [error, setError] = useState<string>("");
+  const [selectedTemplateId, setSelectedTemplateId] = useState<string>(
+    defaultTemplates[0]?.id || "",
+  );
+  const [templateContent, setTemplateContent] = useState<string>("");
+
+  // Combine default templates with custom templates
+  const allTemplates: Array<{ id: string; name: string; content?: string }> = [
+    ...defaultTemplates,
+    ...(props.templates || []),
+  ];
+
+  // Build dropdown options
+  const templateOptions: Array<DropdownOption> = allTemplates.map(
+    (template: { id: string; name: string; content?: string }) => {
+      return {
+        label: template.name,
+        value: template.id,
+      };
+    },
+  );
+
+  // Update template content when selection changes
+  useEffect(() => {
+    if (selectedTemplateId) {
+      const selectedTemplate:
+        | { id: string; name: string; content?: string }
+        | undefined = allTemplates.find(
+        (t: { id: string; name: string; content?: string }) => {
+          return t.id === selectedTemplateId;
+        },
+      );
+      setTemplateContent(selectedTemplate?.content || "");
+    } else {
+      setTemplateContent("");
+    }
+  }, [selectedTemplateId]);
+
+  const handleGenerate: () => Promise<void> = async (): Promise<void> => {
+    setIsGenerating(true);
+    setError("");
+
+    try {
+      const requestData: GenerateAIRequestData = {};
+
+      // Use the edited template content if a template was selected
+      if (selectedTemplateId && templateContent) {
+        requestData.template = templateContent;
+        requestData.templateId = selectedTemplateId;
+      }
+
+      const generatedContent: string = await props.onGenerate(requestData);
+      props.onSuccess(generatedContent);
+    } catch (err) {
+      if (err instanceof Error) {
+        setError(err.message);
+      } else {
+        setError("An error occurred while generating content.");
+      }
+    } finally {
+      setIsGenerating(false);
+    }
+  };
+
+  return (
+    <Modal
+      title={props.title}
+      description={
+        props.description ||
+        "Generate content using AI based on the available data."
+      }
+      onClose={() => {
+        if (!isGenerating) {
+          props.onClose();
+        }
+      }}
+      submitButtonText={isGenerating ? "Generating..." : "Generate with AI"}
+      submitButtonStyleType={ButtonStyleType.PRIMARY}
+      submitButtonType={ButtonType.Button}
+      isLoading={isGenerating}
+      disableSubmitButton={isGenerating}
+      onSubmit={handleGenerate}
+      modalWidth={ModalWidth.Large}
+      icon={IconProp.Bolt}
+    >
+      <>
+        {error && <ErrorMessage message={error} />}
+
+        {isGenerating && <AILoader />}
+
+        {!isGenerating && (
+          <div className="space-y-4">
+            {/* Template Selection */}
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">
+                Select Template
+              </label>
+              <Dropdown
+                options={templateOptions}
+                value={templateOptions.find((opt: DropdownOption) => {
+                  return opt.value === selectedTemplateId;
+                })}
+                onChange={(
+                  value: DropdownValue | Array<DropdownValue> | null,
+                ) => {
+                  setSelectedTemplateId((value as string) || "");
+                }}
+                placeholder="Select a template..."
+              />
+              <p className="mt-1 text-xs text-gray-500">
+                Choose a template to guide the AI generation. You can edit it
+                below before generating.
+              </p>
+            </div>
+
+            {/* Template Preview/Editor */}
+            {selectedTemplateId && (
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">
+                  Template Preview
+                </label>
+                <p className="text-xs text-gray-500 mb-2">
+                  Edit the template below. AI will fill in the sections with
+                  incident data.
+                </p>
+                <div className="">
+                  <MarkdownEditor
+                    key={selectedTemplateId}
+                    initialValue={templateContent}
+                    onChange={(value: string) => {
+                      setTemplateContent(value);
+                    }}
+                    placeholder="Template content..."
+                  />
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+      </>
+    </Modal>
+  );
+};
+
+export default GenerateFromAIModal;

package/UI/Components/Modal/Modal.tsx

@@ -39,15 +39,20 @@ const Modal: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
   let iconBgColor: string = "bg-indigo-100";
+  let iconColor: string = "text-indigo-600";
 
   if (props.iconType === IconType.Info) {
     iconBgColor = "bg-indigo-100";
+    iconColor = "text-indigo-600";
   } else if (props.iconType === IconType.Warning) {
     iconBgColor = "bg-yellow-100";
+    iconColor = "text-yellow-600";
   } else if (props.iconType === IconType.Success) {
     iconBgColor = "bg-green-100";
+    iconColor = "text-green-600";
   } else if (props.iconType === IconType.Danger) {
     iconBgColor = "bg-red-100";
+    iconColor = "text-red-600";
   }
 
   return (
@@ -98,7 +103,7 @@ const Modal: FunctionComponent<ComponentProps> = (
                         ? IconType.Info
                         : props.iconType
                     }
-                    className={"text-red-600 h-6 w-6 stroke-2"}
+                    className={`${iconColor} h-6 w-6 stroke-2`}
                     icon={props.icon}
                     size={SizeProp.Large}
                   />