@sigsentry/react 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +106 -0
- package/dist/index.d.ts +59 -0
- package/dist/index.js +835 -0
- package/package.json +64 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 SigSentry
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,106 @@
|
|
|
1
|
+
# @sigsentry/react
|
|
2
|
+
|
|
3
|
+
Drop-in React components for [SigSentry](https://sigsentry.dev) — AI-powered log analysis.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @sigsentry/react
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Quick Start
|
|
12
|
+
|
|
13
|
+
```tsx
|
|
14
|
+
import { SigSentryProvider, AnalysisWidget } from '@sigsentry/react';
|
|
15
|
+
|
|
16
|
+
function App() {
|
|
17
|
+
return (
|
|
18
|
+
<SigSentryProvider apiKey="your-api-key" theme="light">
|
|
19
|
+
<AnalysisWidget
|
|
20
|
+
onAnalysisComplete={(result) => console.log(result)}
|
|
21
|
+
defaultTimeRange="1h"
|
|
22
|
+
/>
|
|
23
|
+
</SigSentryProvider>
|
|
24
|
+
);
|
|
25
|
+
}
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
## Components
|
|
29
|
+
|
|
30
|
+
### `<SigSentryProvider>`
|
|
31
|
+
|
|
32
|
+
Context provider that initializes the API client.
|
|
33
|
+
|
|
34
|
+
```tsx
|
|
35
|
+
<SigSentryProvider
|
|
36
|
+
apiKey="your-api-key"
|
|
37
|
+
baseUrl="https://api.sigsentry.dev" // optional
|
|
38
|
+
theme="light" // 'light' | 'dark' | 'auto'
|
|
39
|
+
>
|
|
40
|
+
{children}
|
|
41
|
+
</SigSentryProvider>
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
### `<AnalysisWidget>`
|
|
45
|
+
|
|
46
|
+
Full-featured analysis form with streaming results.
|
|
47
|
+
|
|
48
|
+
```tsx
|
|
49
|
+
<AnalysisWidget
|
|
50
|
+
onAnalysisComplete={(result) => {}}
|
|
51
|
+
onError={(error) => {}}
|
|
52
|
+
defaultTimeRange="1h" // '15m' | '30m' | '1h' | '4h' | '12h' | '24h'
|
|
53
|
+
showFollowUp={true}
|
|
54
|
+
className="my-widget"
|
|
55
|
+
/>
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
### `<AnalysisResultDisplay>`
|
|
59
|
+
|
|
60
|
+
Read-only result renderer. Use when you build your own input form.
|
|
61
|
+
|
|
62
|
+
```tsx
|
|
63
|
+
<AnalysisResultDisplay result={analysisResult} />
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
### `<SigSentryTrigger>`
|
|
67
|
+
|
|
68
|
+
Button that opens the widget in a modal or slideout panel.
|
|
69
|
+
|
|
70
|
+
```tsx
|
|
71
|
+
<SigSentryTrigger mode="modal" label="Diagnose Error" />
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
### `useSigSentry()` Hook
|
|
75
|
+
|
|
76
|
+
Headless hook for full control over the analysis flow.
|
|
77
|
+
|
|
78
|
+
```tsx
|
|
79
|
+
const {
|
|
80
|
+
submitAnalysis,
|
|
81
|
+
askFollowUp,
|
|
82
|
+
submitFeedback,
|
|
83
|
+
status, // 'idle' | AnalysisStage
|
|
84
|
+
result, // AnalysisResult | null
|
|
85
|
+
error, // ApiError | null
|
|
86
|
+
isLoading,
|
|
87
|
+
} = useSigSentry();
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
## Theming
|
|
91
|
+
|
|
92
|
+
Customize with CSS custom properties:
|
|
93
|
+
|
|
94
|
+
```css
|
|
95
|
+
:root {
|
|
96
|
+
--sg-color-primary: #6366f1;
|
|
97
|
+
--sg-color-bg: #ffffff;
|
|
98
|
+
--sg-color-text: #111827;
|
|
99
|
+
--sg-font-family: 'Inter', sans-serif;
|
|
100
|
+
--sg-border-radius: 8px;
|
|
101
|
+
}
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
## License
|
|
105
|
+
|
|
106
|
+
MIT
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { SigSentryClient, AnalysisResult, ApiError, AnalysisStage, AnalysisInput, ApiResponse, FollowUpResult, AnalysisFeedback } from '@sigsentry/core';
|
|
3
|
+
|
|
4
|
+
type TracebackTheme = 'light' | 'dark' | 'auto';
|
|
5
|
+
interface SigSentryProviderProps {
|
|
6
|
+
apiKey: string;
|
|
7
|
+
baseUrl?: string;
|
|
8
|
+
theme?: TracebackTheme;
|
|
9
|
+
children: React.ReactNode;
|
|
10
|
+
}
|
|
11
|
+
interface TracebackContextValue {
|
|
12
|
+
client: SigSentryClient;
|
|
13
|
+
theme: TracebackTheme;
|
|
14
|
+
}
|
|
15
|
+
declare function useSigSentryContext(): TracebackContextValue;
|
|
16
|
+
declare function SigSentryProvider({ apiKey, baseUrl, theme, children, }: SigSentryProviderProps): React.JSX.Element;
|
|
17
|
+
|
|
18
|
+
interface AnalysisResultProps {
|
|
19
|
+
result: AnalysisResult;
|
|
20
|
+
showRawLogs?: boolean;
|
|
21
|
+
showCodeCorrelation?: boolean;
|
|
22
|
+
className?: string;
|
|
23
|
+
}
|
|
24
|
+
declare function AnalysisResultDisplay({ result, showRawLogs, showCodeCorrelation, className, }: AnalysisResultProps): React.JSX.Element;
|
|
25
|
+
|
|
26
|
+
type TimeRangeOption = '15m' | '30m' | '1h' | '4h' | '12h' | '24h';
|
|
27
|
+
interface AnalysisWidgetProps {
|
|
28
|
+
onAnalysisComplete?: (result: AnalysisResult) => void;
|
|
29
|
+
onError?: (error: ApiError) => void;
|
|
30
|
+
defaultTimeRange?: TimeRangeOption;
|
|
31
|
+
showFollowUp?: boolean;
|
|
32
|
+
className?: string;
|
|
33
|
+
}
|
|
34
|
+
declare function AnalysisWidget({ onAnalysisComplete, onError, defaultTimeRange, showFollowUp, className, }: AnalysisWidgetProps): React.JSX.Element;
|
|
35
|
+
|
|
36
|
+
interface SigSentryTriggerProps extends AnalysisWidgetProps {
|
|
37
|
+
mode?: 'modal' | 'slideout';
|
|
38
|
+
label?: string;
|
|
39
|
+
}
|
|
40
|
+
declare function SigSentryTrigger({ mode, label, className, ...widgetProps }: SigSentryTriggerProps): React.JSX.Element;
|
|
41
|
+
|
|
42
|
+
type TracebackStatus = AnalysisStage | 'idle';
|
|
43
|
+
interface UseTracebackOptions {
|
|
44
|
+
client: SigSentryClient;
|
|
45
|
+
}
|
|
46
|
+
interface UseTracebackReturn {
|
|
47
|
+
submitAnalysis: (input: Omit<AnalysisInput, 'screenshot'> & {
|
|
48
|
+
screenshot?: File;
|
|
49
|
+
}) => Promise<void>;
|
|
50
|
+
askFollowUp: (question: string) => Promise<ApiResponse<FollowUpResult> | null>;
|
|
51
|
+
submitFeedback: (feedback: Omit<AnalysisFeedback, 'analysisId'>) => Promise<ApiResponse<void> | null>;
|
|
52
|
+
status: TracebackStatus;
|
|
53
|
+
result: AnalysisResult | null;
|
|
54
|
+
error: ApiError | null;
|
|
55
|
+
isLoading: boolean;
|
|
56
|
+
}
|
|
57
|
+
declare function useSigSentry({ client }: UseTracebackOptions): UseTracebackReturn;
|
|
58
|
+
|
|
59
|
+
export { AnalysisResultDisplay, type AnalysisResultProps, AnalysisWidget, type AnalysisWidgetProps, SigSentryProvider, type SigSentryProviderProps, SigSentryTrigger, type SigSentryTriggerProps, type TimeRangeOption, type TracebackStatus, type TracebackTheme, type UseTracebackOptions, type UseTracebackReturn, useSigSentry, useSigSentryContext };
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,835 @@
|
|
|
1
|
+
// src/components/TracebackProvider.tsx
|
|
2
|
+
import { createContext, useContext, useMemo, useEffect, useState } from "react";
|
|
3
|
+
import { SigSentryClient } from "@sigsentry/core";
|
|
4
|
+
import { jsx } from "react/jsx-runtime";
|
|
5
|
+
var TracebackContext = createContext(null);
|
|
6
|
+
function useSigSentryContext() {
|
|
7
|
+
const context = useContext(TracebackContext);
|
|
8
|
+
if (!context) {
|
|
9
|
+
throw new Error("useSigSentryContext must be used within a <SigSentryProvider>");
|
|
10
|
+
}
|
|
11
|
+
return context;
|
|
12
|
+
}
|
|
13
|
+
function SigSentryProvider({
|
|
14
|
+
apiKey,
|
|
15
|
+
baseUrl,
|
|
16
|
+
theme = "auto",
|
|
17
|
+
children
|
|
18
|
+
}) {
|
|
19
|
+
const client = useMemo(() => {
|
|
20
|
+
const config = { apiKey, baseUrl };
|
|
21
|
+
return new SigSentryClient(config);
|
|
22
|
+
}, [apiKey, baseUrl]);
|
|
23
|
+
const [resolvedTheme, setResolvedTheme] = useState("light");
|
|
24
|
+
useEffect(() => {
|
|
25
|
+
if (theme !== "auto") {
|
|
26
|
+
setResolvedTheme(theme);
|
|
27
|
+
return;
|
|
28
|
+
}
|
|
29
|
+
if (typeof window === "undefined") return;
|
|
30
|
+
const mql = window.matchMedia("(prefers-color-scheme: dark)");
|
|
31
|
+
setResolvedTheme(mql.matches ? "dark" : "light");
|
|
32
|
+
const handler = (e) => {
|
|
33
|
+
setResolvedTheme(e.matches ? "dark" : "light");
|
|
34
|
+
};
|
|
35
|
+
mql.addEventListener("change", handler);
|
|
36
|
+
return () => mql.removeEventListener("change", handler);
|
|
37
|
+
}, [theme]);
|
|
38
|
+
const value = useMemo(() => ({ client, theme }), [client, theme]);
|
|
39
|
+
return /* @__PURE__ */ jsx(TracebackContext.Provider, { value, children: /* @__PURE__ */ jsx("div", { "data-theme": resolvedTheme, style: { fontFamily: "var(--sg-font-family)" }, children }) });
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
// src/components/AnalysisResult.tsx
|
|
43
|
+
import { jsx as jsx2, jsxs } from "react/jsx-runtime";
|
|
44
|
+
var severityColors = {
|
|
45
|
+
critical: "var(--sg-color-critical)",
|
|
46
|
+
high: "var(--sg-color-high)",
|
|
47
|
+
medium: "var(--sg-color-medium)",
|
|
48
|
+
low: "var(--sg-color-low)",
|
|
49
|
+
info: "var(--sg-color-info)"
|
|
50
|
+
};
|
|
51
|
+
var styles = {
|
|
52
|
+
container: {
|
|
53
|
+
fontFamily: "var(--sg-font-family)",
|
|
54
|
+
color: "var(--sg-color-text)",
|
|
55
|
+
backgroundColor: "var(--sg-color-bg)",
|
|
56
|
+
borderRadius: "var(--sg-border-radius)",
|
|
57
|
+
border: "1px solid var(--sg-color-border)",
|
|
58
|
+
padding: "calc(var(--sg-spacing-unit) * 5)"
|
|
59
|
+
},
|
|
60
|
+
header: {
|
|
61
|
+
display: "flex",
|
|
62
|
+
alignItems: "center",
|
|
63
|
+
gap: "calc(var(--sg-spacing-unit) * 3)",
|
|
64
|
+
marginBottom: "calc(var(--sg-spacing-unit) * 4)"
|
|
65
|
+
},
|
|
66
|
+
severityBadge: (severity) => ({
|
|
67
|
+
display: "inline-block",
|
|
68
|
+
padding: "calc(var(--sg-spacing-unit) * 1) calc(var(--sg-spacing-unit) * 3)",
|
|
69
|
+
borderRadius: "calc(var(--sg-border-radius) / 2)",
|
|
70
|
+
backgroundColor: severityColors[severity],
|
|
71
|
+
color: "#ffffff",
|
|
72
|
+
fontSize: "var(--sg-font-size-sm)",
|
|
73
|
+
fontWeight: 600,
|
|
74
|
+
textTransform: "uppercase",
|
|
75
|
+
letterSpacing: "0.05em"
|
|
76
|
+
}),
|
|
77
|
+
section: {
|
|
78
|
+
marginBottom: "calc(var(--sg-spacing-unit) * 5)"
|
|
79
|
+
},
|
|
80
|
+
sectionTitle: {
|
|
81
|
+
fontSize: "var(--sg-font-size-base)",
|
|
82
|
+
fontWeight: 600,
|
|
83
|
+
marginBottom: "calc(var(--sg-spacing-unit) * 2)",
|
|
84
|
+
color: "var(--sg-color-text)"
|
|
85
|
+
},
|
|
86
|
+
summary: {
|
|
87
|
+
fontSize: "var(--sg-font-size-lg)",
|
|
88
|
+
lineHeight: 1.6,
|
|
89
|
+
color: "var(--sg-color-text)"
|
|
90
|
+
},
|
|
91
|
+
confidence: {
|
|
92
|
+
fontSize: "var(--sg-font-size-sm)",
|
|
93
|
+
color: "var(--sg-color-text-secondary)"
|
|
94
|
+
},
|
|
95
|
+
rootCauseBox: {
|
|
96
|
+
backgroundColor: "var(--sg-color-bg-secondary)",
|
|
97
|
+
borderRadius: "var(--sg-border-radius)",
|
|
98
|
+
padding: "calc(var(--sg-spacing-unit) * 4)",
|
|
99
|
+
border: "1px solid var(--sg-color-border)"
|
|
100
|
+
},
|
|
101
|
+
tag: {
|
|
102
|
+
display: "inline-block",
|
|
103
|
+
padding: "calc(var(--sg-spacing-unit) * 0.5) calc(var(--sg-spacing-unit) * 2)",
|
|
104
|
+
borderRadius: "calc(var(--sg-border-radius) / 2)",
|
|
105
|
+
backgroundColor: "var(--sg-color-bg-secondary)",
|
|
106
|
+
border: "1px solid var(--sg-color-border)",
|
|
107
|
+
fontSize: "var(--sg-font-size-sm)",
|
|
108
|
+
color: "var(--sg-color-text-secondary)",
|
|
109
|
+
marginRight: "calc(var(--sg-spacing-unit) * 2)",
|
|
110
|
+
marginBottom: "calc(var(--sg-spacing-unit) * 1)"
|
|
111
|
+
},
|
|
112
|
+
serviceList: {
|
|
113
|
+
listStyle: "none",
|
|
114
|
+
padding: 0,
|
|
115
|
+
margin: 0
|
|
116
|
+
},
|
|
117
|
+
serviceItem: {
|
|
118
|
+
display: "flex",
|
|
119
|
+
justifyContent: "space-between",
|
|
120
|
+
alignItems: "center",
|
|
121
|
+
padding: "calc(var(--sg-spacing-unit) * 2) 0",
|
|
122
|
+
borderBottom: "1px solid var(--sg-color-border)",
|
|
123
|
+
fontSize: "var(--sg-font-size-sm)"
|
|
124
|
+
},
|
|
125
|
+
timelineItem: (isRootCause) => ({
|
|
126
|
+
padding: "calc(var(--sg-spacing-unit) * 2) calc(var(--sg-spacing-unit) * 3)",
|
|
127
|
+
borderLeft: `3px solid ${isRootCause ? "var(--sg-color-critical)" : "var(--sg-color-border)"}`,
|
|
128
|
+
marginBottom: "calc(var(--sg-spacing-unit) * 2)",
|
|
129
|
+
backgroundColor: isRootCause ? "var(--sg-color-bg-secondary)" : "transparent",
|
|
130
|
+
borderRadius: "0 var(--sg-border-radius) var(--sg-border-radius) 0"
|
|
131
|
+
}),
|
|
132
|
+
actionItem: {
|
|
133
|
+
padding: "calc(var(--sg-spacing-unit) * 3)",
|
|
134
|
+
backgroundColor: "var(--sg-color-bg-secondary)",
|
|
135
|
+
borderRadius: "var(--sg-border-radius)",
|
|
136
|
+
marginBottom: "calc(var(--sg-spacing-unit) * 2)",
|
|
137
|
+
border: "1px solid var(--sg-color-border)"
|
|
138
|
+
},
|
|
139
|
+
codeBlock: {
|
|
140
|
+
backgroundColor: "var(--sg-color-bg-secondary)",
|
|
141
|
+
borderRadius: "var(--sg-border-radius)",
|
|
142
|
+
padding: "calc(var(--sg-spacing-unit) * 3)",
|
|
143
|
+
fontFamily: "monospace",
|
|
144
|
+
fontSize: "var(--sg-font-size-sm)",
|
|
145
|
+
overflowX: "auto",
|
|
146
|
+
border: "1px solid var(--sg-color-border)"
|
|
147
|
+
},
|
|
148
|
+
logEntry: {
|
|
149
|
+
padding: "calc(var(--sg-spacing-unit) * 2)",
|
|
150
|
+
borderBottom: "1px solid var(--sg-color-border)",
|
|
151
|
+
fontFamily: "monospace",
|
|
152
|
+
fontSize: "var(--sg-font-size-sm)",
|
|
153
|
+
whiteSpace: "pre-wrap",
|
|
154
|
+
wordBreak: "break-all"
|
|
155
|
+
}
|
|
156
|
+
};
|
|
157
|
+
var actionTypeLabels = {
|
|
158
|
+
fix: "Fix",
|
|
159
|
+
investigate: "Investigate",
|
|
160
|
+
mitigate: "Mitigate",
|
|
161
|
+
escalate: "Escalate"
|
|
162
|
+
};
|
|
163
|
+
function formatTimestamp(date) {
|
|
164
|
+
if (!(date instanceof Date) || isNaN(date.getTime())) {
|
|
165
|
+
return String(date);
|
|
166
|
+
}
|
|
167
|
+
return date.toLocaleTimeString(void 0, {
|
|
168
|
+
hour: "2-digit",
|
|
169
|
+
minute: "2-digit",
|
|
170
|
+
second: "2-digit"
|
|
171
|
+
});
|
|
172
|
+
}
|
|
173
|
+
function ServiceRow({ service }) {
|
|
174
|
+
return /* @__PURE__ */ jsxs("li", { style: styles.serviceItem, children: [
|
|
175
|
+
/* @__PURE__ */ jsxs("span", { children: [
|
|
176
|
+
/* @__PURE__ */ jsx2("strong", { children: service.serviceName }),
|
|
177
|
+
" ",
|
|
178
|
+
/* @__PURE__ */ jsx2("span", { style: styles.tag, children: service.role })
|
|
179
|
+
] }),
|
|
180
|
+
/* @__PURE__ */ jsxs("span", { style: { color: "var(--sg-color-text-secondary)" }, children: [
|
|
181
|
+
service.errorCount,
|
|
182
|
+
" errors"
|
|
183
|
+
] })
|
|
184
|
+
] });
|
|
185
|
+
}
|
|
186
|
+
function TimelineRow({ entry }) {
|
|
187
|
+
return /* @__PURE__ */ jsxs("div", { style: styles.timelineItem(entry.isRootCause), children: [
|
|
188
|
+
/* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", marginBottom: "calc(var(--sg-spacing-unit) * 1)" }, children: [
|
|
189
|
+
/* @__PURE__ */ jsxs("span", { style: { fontWeight: entry.isRootCause ? 700 : 400, fontSize: "var(--sg-font-size-sm)" }, children: [
|
|
190
|
+
entry.service,
|
|
191
|
+
entry.isRootCause ? " (root cause)" : ""
|
|
192
|
+
] }),
|
|
193
|
+
/* @__PURE__ */ jsx2("span", { style: { fontSize: "var(--sg-font-size-sm)", color: "var(--sg-color-text-secondary)" }, children: formatTimestamp(entry.timestamp) })
|
|
194
|
+
] }),
|
|
195
|
+
/* @__PURE__ */ jsx2("div", { style: { fontSize: "var(--sg-font-size-sm)", color: "var(--sg-color-text-secondary)" }, children: entry.message })
|
|
196
|
+
] });
|
|
197
|
+
}
|
|
198
|
+
function ActionRow({ action }) {
|
|
199
|
+
return /* @__PURE__ */ jsxs("div", { style: styles.actionItem, children: [
|
|
200
|
+
/* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", marginBottom: "calc(var(--sg-spacing-unit) * 1)" }, children: [
|
|
201
|
+
/* @__PURE__ */ jsx2("span", { style: { fontWeight: 600, fontSize: "var(--sg-font-size-sm)" }, children: action.action }),
|
|
202
|
+
/* @__PURE__ */ jsx2("span", { style: styles.tag, children: actionTypeLabels[action.type] })
|
|
203
|
+
] }),
|
|
204
|
+
/* @__PURE__ */ jsx2("div", { style: { fontSize: "var(--sg-font-size-sm)", color: "var(--sg-color-text-secondary)" }, children: action.rationale })
|
|
205
|
+
] });
|
|
206
|
+
}
|
|
207
|
+
function AnalysisResultDisplay({
|
|
208
|
+
result,
|
|
209
|
+
showRawLogs = false,
|
|
210
|
+
showCodeCorrelation = true,
|
|
211
|
+
className
|
|
212
|
+
}) {
|
|
213
|
+
return /* @__PURE__ */ jsxs("div", { style: styles.container, className, children: [
|
|
214
|
+
/* @__PURE__ */ jsxs("div", { style: styles.header, children: [
|
|
215
|
+
/* @__PURE__ */ jsx2("span", { style: styles.severityBadge(result.severity), children: result.severity }),
|
|
216
|
+
/* @__PURE__ */ jsxs("span", { style: styles.confidence, children: [
|
|
217
|
+
Math.round(result.confidence * 100),
|
|
218
|
+
"% confidence"
|
|
219
|
+
] })
|
|
220
|
+
] }),
|
|
221
|
+
/* @__PURE__ */ jsx2("div", { style: styles.section, children: /* @__PURE__ */ jsx2("p", { style: styles.summary, children: result.summary }) }),
|
|
222
|
+
/* @__PURE__ */ jsxs("div", { style: styles.section, children: [
|
|
223
|
+
/* @__PURE__ */ jsx2("h3", { style: styles.sectionTitle, children: "Root Cause" }),
|
|
224
|
+
/* @__PURE__ */ jsxs("div", { style: styles.rootCauseBox, children: [
|
|
225
|
+
/* @__PURE__ */ jsx2("p", { style: { margin: "0 0 calc(var(--sg-spacing-unit) * 2) 0" }, children: result.rootCause.description }),
|
|
226
|
+
/* @__PURE__ */ jsxs("div", { children: [
|
|
227
|
+
/* @__PURE__ */ jsx2("span", { style: styles.tag, children: result.rootCause.service }),
|
|
228
|
+
/* @__PURE__ */ jsx2("span", { style: styles.tag, children: result.rootCause.errorType }),
|
|
229
|
+
/* @__PURE__ */ jsx2("span", { style: styles.tag, children: result.rootCause.category })
|
|
230
|
+
] })
|
|
231
|
+
] })
|
|
232
|
+
] }),
|
|
233
|
+
result.affectedServices.length > 0 && /* @__PURE__ */ jsxs("div", { style: styles.section, children: [
|
|
234
|
+
/* @__PURE__ */ jsx2("h3", { style: styles.sectionTitle, children: "Affected Services" }),
|
|
235
|
+
/* @__PURE__ */ jsx2("ul", { style: styles.serviceList, children: result.affectedServices.map((service) => /* @__PURE__ */ jsx2(ServiceRow, { service }, service.serviceName)) })
|
|
236
|
+
] }),
|
|
237
|
+
result.timeline.length > 0 && /* @__PURE__ */ jsxs("div", { style: styles.section, children: [
|
|
238
|
+
/* @__PURE__ */ jsx2("h3", { style: styles.sectionTitle, children: "Timeline" }),
|
|
239
|
+
result.timeline.map((entry, index) => /* @__PURE__ */ jsx2(TimelineRow, { entry }, `${entry.service}-${index}`))
|
|
240
|
+
] }),
|
|
241
|
+
result.suggestedActions.length > 0 && /* @__PURE__ */ jsxs("div", { style: styles.section, children: [
|
|
242
|
+
/* @__PURE__ */ jsx2("h3", { style: styles.sectionTitle, children: "Suggested Actions" }),
|
|
243
|
+
result.suggestedActions.sort((a, b) => a.priority - b.priority).map((action, index) => /* @__PURE__ */ jsx2(ActionRow, { action }, `action-${index}`))
|
|
244
|
+
] }),
|
|
245
|
+
showCodeCorrelation && result.codeCorrelation?.available && /* @__PURE__ */ jsxs("div", { style: styles.section, children: [
|
|
246
|
+
/* @__PURE__ */ jsx2("h3", { style: styles.sectionTitle, children: "Code Correlation" }),
|
|
247
|
+
/* @__PURE__ */ jsxs("div", { style: styles.rootCauseBox, children: [
|
|
248
|
+
/* @__PURE__ */ jsxs("p", { style: { margin: "0 0 calc(var(--sg-spacing-unit) * 2) 0", fontWeight: 600 }, children: [
|
|
249
|
+
result.codeCorrelation.suspectedCode.repo,
|
|
250
|
+
" \u2014",
|
|
251
|
+
" ",
|
|
252
|
+
result.codeCorrelation.suspectedCode.filePath
|
|
253
|
+
] }),
|
|
254
|
+
/* @__PURE__ */ jsxs("p", { style: { margin: "0 0 calc(var(--sg-spacing-unit) * 2) 0", fontSize: "var(--sg-font-size-sm)", color: "var(--sg-color-text-secondary)" }, children: [
|
|
255
|
+
"Function: ",
|
|
256
|
+
result.codeCorrelation.suspectedCode.functionName,
|
|
257
|
+
" (lines",
|
|
258
|
+
" ",
|
|
259
|
+
result.codeCorrelation.suspectedCode.lineRange[0],
|
|
260
|
+
"\u2013",
|
|
261
|
+
result.codeCorrelation.suspectedCode.lineRange[1],
|
|
262
|
+
")"
|
|
263
|
+
] }),
|
|
264
|
+
/* @__PURE__ */ jsx2("pre", { style: styles.codeBlock, children: result.codeCorrelation.suspectedCode.snippet }),
|
|
265
|
+
result.codeCorrelation.causalPR && /* @__PURE__ */ jsxs("div", { style: { marginTop: "calc(var(--sg-spacing-unit) * 3)" }, children: [
|
|
266
|
+
/* @__PURE__ */ jsx2("p", { style: { fontWeight: 600, fontSize: "var(--sg-font-size-sm)", margin: "0 0 calc(var(--sg-spacing-unit) * 1) 0" }, children: "Suspected PR" }),
|
|
267
|
+
/* @__PURE__ */ jsxs("p", { style: { fontSize: "var(--sg-font-size-sm)", margin: 0 }, children: [
|
|
268
|
+
result.codeCorrelation.causalPR.title,
|
|
269
|
+
" by",
|
|
270
|
+
" ",
|
|
271
|
+
result.codeCorrelation.causalPR.author.name,
|
|
272
|
+
" \u2014",
|
|
273
|
+
" ",
|
|
274
|
+
Math.round(result.codeCorrelation.causalPR.confidence * 100),
|
|
275
|
+
"% confidence"
|
|
276
|
+
] })
|
|
277
|
+
] })
|
|
278
|
+
] })
|
|
279
|
+
] }),
|
|
280
|
+
showRawLogs && result.logEvidence.length > 0 && /* @__PURE__ */ jsxs("div", { style: styles.section, children: [
|
|
281
|
+
/* @__PURE__ */ jsx2("h3", { style: styles.sectionTitle, children: "Log Evidence" }),
|
|
282
|
+
/* @__PURE__ */ jsx2("div", { style: { border: "1px solid var(--sg-color-border)", borderRadius: "var(--sg-border-radius)", overflow: "hidden" }, children: result.logEvidence.sort((a, b) => b.relevanceScore - a.relevanceScore).map((log, index) => /* @__PURE__ */ jsxs("div", { style: styles.logEntry, children: [
|
|
283
|
+
/* @__PURE__ */ jsxs("span", { style: { color: "var(--sg-color-text-secondary)", marginRight: "calc(var(--sg-spacing-unit) * 2)" }, children: [
|
|
284
|
+
"[",
|
|
285
|
+
log.service,
|
|
286
|
+
"]"
|
|
287
|
+
] }),
|
|
288
|
+
log.raw
|
|
289
|
+
] }, `log-${index}`)) })
|
|
290
|
+
] }),
|
|
291
|
+
/* @__PURE__ */ jsxs("div", { style: { fontSize: "var(--sg-font-size-sm)", color: "var(--sg-color-text-secondary)", borderTop: "1px solid var(--sg-color-border)", paddingTop: "calc(var(--sg-spacing-unit) * 3)" }, children: [
|
|
292
|
+
result.logsScanned.toLocaleString(),
|
|
293
|
+
" logs scanned \xB7 Processed in",
|
|
294
|
+
" ",
|
|
295
|
+
(result.processingTimeMs / 1e3).toFixed(1),
|
|
296
|
+
"s"
|
|
297
|
+
] })
|
|
298
|
+
] });
|
|
299
|
+
}
|
|
300
|
+
|
|
301
|
+
// src/components/AnalysisWidget.tsx
|
|
302
|
+
import { useState as useState3, useCallback as useCallback2, useRef as useRef2 } from "react";
|
|
303
|
+
|
|
304
|
+
// src/hooks/useTraceback.ts
|
|
305
|
+
import { useState as useState2, useCallback, useRef } from "react";
|
|
306
|
+
function useSigSentry({ client }) {
|
|
307
|
+
const [status, setStatus] = useState2("idle");
|
|
308
|
+
const [result, setResult] = useState2(null);
|
|
309
|
+
const [error, setError] = useState2(null);
|
|
310
|
+
const [isLoading, setIsLoading] = useState2(false);
|
|
311
|
+
const analysisIdRef = useRef(null);
|
|
312
|
+
const submitAnalysis = useCallback(
|
|
313
|
+
async (input) => {
|
|
314
|
+
setIsLoading(true);
|
|
315
|
+
setError(null);
|
|
316
|
+
setResult(null);
|
|
317
|
+
setStatus("input_received");
|
|
318
|
+
try {
|
|
319
|
+
const response = await client.createAnalysis(input, {
|
|
320
|
+
onStatus: (stage, _detail) => {
|
|
321
|
+
setStatus(stage);
|
|
322
|
+
},
|
|
323
|
+
onPartial: (partial) => {
|
|
324
|
+
setResult((prev) => prev ? { ...prev, ...partial } : partial);
|
|
325
|
+
},
|
|
326
|
+
onComplete: (analysisId, analysisResult) => {
|
|
327
|
+
analysisIdRef.current = analysisId;
|
|
328
|
+
setResult(analysisResult);
|
|
329
|
+
setStatus("complete");
|
|
330
|
+
setIsLoading(false);
|
|
331
|
+
},
|
|
332
|
+
onError: (apiError) => {
|
|
333
|
+
setError(apiError);
|
|
334
|
+
setStatus("failed");
|
|
335
|
+
setIsLoading(false);
|
|
336
|
+
}
|
|
337
|
+
});
|
|
338
|
+
if (!response.success && response.error) {
|
|
339
|
+
setError(response.error);
|
|
340
|
+
setStatus("failed");
|
|
341
|
+
setIsLoading(false);
|
|
342
|
+
} else if (response.success && response.data) {
|
|
343
|
+
analysisIdRef.current = response.data.analysisId;
|
|
344
|
+
setResult(response.data.result);
|
|
345
|
+
setStatus("complete");
|
|
346
|
+
setIsLoading(false);
|
|
347
|
+
}
|
|
348
|
+
} catch (err) {
|
|
349
|
+
const message = err instanceof Error ? err.message : "Unknown error";
|
|
350
|
+
setError({ code: "CLIENT_ERROR", message });
|
|
351
|
+
setStatus("failed");
|
|
352
|
+
setIsLoading(false);
|
|
353
|
+
}
|
|
354
|
+
},
|
|
355
|
+
[client]
|
|
356
|
+
);
|
|
357
|
+
const askFollowUp = useCallback(
|
|
358
|
+
async (question) => {
|
|
359
|
+
const analysisId = analysisIdRef.current;
|
|
360
|
+
if (!analysisId) {
|
|
361
|
+
setError({ code: "NO_ANALYSIS", message: "No analysis to follow up on" });
|
|
362
|
+
return null;
|
|
363
|
+
}
|
|
364
|
+
try {
|
|
365
|
+
const response = await client.askFollowUp(analysisId, question);
|
|
366
|
+
if (!response.success && response.error) {
|
|
367
|
+
setError(response.error);
|
|
368
|
+
}
|
|
369
|
+
return response;
|
|
370
|
+
} catch (err) {
|
|
371
|
+
const message = err instanceof Error ? err.message : "Unknown error";
|
|
372
|
+
const apiError = { code: "CLIENT_ERROR", message };
|
|
373
|
+
setError(apiError);
|
|
374
|
+
return null;
|
|
375
|
+
}
|
|
376
|
+
},
|
|
377
|
+
[client]
|
|
378
|
+
);
|
|
379
|
+
const submitFeedback = useCallback(
|
|
380
|
+
async (feedback) => {
|
|
381
|
+
const analysisId = analysisIdRef.current;
|
|
382
|
+
if (!analysisId) {
|
|
383
|
+
setError({ code: "NO_ANALYSIS", message: "No analysis to give feedback on" });
|
|
384
|
+
return null;
|
|
385
|
+
}
|
|
386
|
+
try {
|
|
387
|
+
const response = await client.submitFeedback(analysisId, feedback);
|
|
388
|
+
if (!response.success && response.error) {
|
|
389
|
+
setError(response.error);
|
|
390
|
+
}
|
|
391
|
+
return response;
|
|
392
|
+
} catch (err) {
|
|
393
|
+
const message = err instanceof Error ? err.message : "Unknown error";
|
|
394
|
+
const apiError = { code: "CLIENT_ERROR", message };
|
|
395
|
+
setError(apiError);
|
|
396
|
+
return null;
|
|
397
|
+
}
|
|
398
|
+
},
|
|
399
|
+
[client]
|
|
400
|
+
);
|
|
401
|
+
return {
|
|
402
|
+
submitAnalysis,
|
|
403
|
+
askFollowUp,
|
|
404
|
+
submitFeedback,
|
|
405
|
+
status,
|
|
406
|
+
result,
|
|
407
|
+
error,
|
|
408
|
+
isLoading
|
|
409
|
+
};
|
|
410
|
+
}
|
|
411
|
+
|
|
412
|
+
// src/components/AnalysisWidget.tsx
|
|
413
|
+
import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
414
|
+
var TIME_RANGE_OPTIONS = [
|
|
415
|
+
{ value: "15m", label: "Last 15 minutes", ms: 15 * 60 * 1e3 },
|
|
416
|
+
{ value: "30m", label: "Last 30 minutes", ms: 30 * 60 * 1e3 },
|
|
417
|
+
{ value: "1h", label: "Last 1 hour", ms: 60 * 60 * 1e3 },
|
|
418
|
+
{ value: "4h", label: "Last 4 hours", ms: 4 * 60 * 60 * 1e3 },
|
|
419
|
+
{ value: "12h", label: "Last 12 hours", ms: 12 * 60 * 60 * 1e3 },
|
|
420
|
+
{ value: "24h", label: "Last 24 hours", ms: 24 * 60 * 60 * 1e3 }
|
|
421
|
+
];
|
|
422
|
+
var STAGE_LABELS = {
|
|
423
|
+
input_received: "Input received",
|
|
424
|
+
image_processing: "Processing screenshot...",
|
|
425
|
+
logs_fetching: "Fetching logs...",
|
|
426
|
+
logs_preprocessing: "Pre-processing logs...",
|
|
427
|
+
ai_analyzing: "AI analyzing root cause...",
|
|
428
|
+
code_correlating: "Correlating with code changes...",
|
|
429
|
+
complete: "Analysis complete",
|
|
430
|
+
failed: "Analysis failed"
|
|
431
|
+
};
|
|
432
|
+
var styles2 = {
|
|
433
|
+
container: {
|
|
434
|
+
fontFamily: "var(--sg-font-family)",
|
|
435
|
+
color: "var(--sg-color-text)",
|
|
436
|
+
backgroundColor: "var(--sg-color-bg)",
|
|
437
|
+
borderRadius: "var(--sg-border-radius)",
|
|
438
|
+
border: "1px solid var(--sg-color-border)",
|
|
439
|
+
padding: "calc(var(--sg-spacing-unit) * 5)"
|
|
440
|
+
},
|
|
441
|
+
form: {
|
|
442
|
+
display: "flex",
|
|
443
|
+
flexDirection: "column",
|
|
444
|
+
gap: "calc(var(--sg-spacing-unit) * 4)"
|
|
445
|
+
},
|
|
446
|
+
label: {
|
|
447
|
+
display: "block",
|
|
448
|
+
fontWeight: 600,
|
|
449
|
+
fontSize: "var(--sg-font-size-sm)",
|
|
450
|
+
marginBottom: "calc(var(--sg-spacing-unit) * 1)",
|
|
451
|
+
color: "var(--sg-color-text)"
|
|
452
|
+
},
|
|
453
|
+
textarea: {
|
|
454
|
+
width: "100%",
|
|
455
|
+
minHeight: "100px",
|
|
456
|
+
padding: "calc(var(--sg-spacing-unit) * 3)",
|
|
457
|
+
borderRadius: "var(--sg-border-radius)",
|
|
458
|
+
border: "1px solid var(--sg-color-border)",
|
|
459
|
+
backgroundColor: "var(--sg-color-bg)",
|
|
460
|
+
color: "var(--sg-color-text)",
|
|
461
|
+
fontFamily: "var(--sg-font-family)",
|
|
462
|
+
fontSize: "var(--sg-font-size-base)",
|
|
463
|
+
resize: "vertical",
|
|
464
|
+
boxSizing: "border-box"
|
|
465
|
+
},
|
|
466
|
+
select: {
|
|
467
|
+
width: "100%",
|
|
468
|
+
padding: "calc(var(--sg-spacing-unit) * 2) calc(var(--sg-spacing-unit) * 3)",
|
|
469
|
+
borderRadius: "var(--sg-border-radius)",
|
|
470
|
+
border: "1px solid var(--sg-color-border)",
|
|
471
|
+
backgroundColor: "var(--sg-color-bg)",
|
|
472
|
+
color: "var(--sg-color-text)",
|
|
473
|
+
fontFamily: "var(--sg-font-family)",
|
|
474
|
+
fontSize: "var(--sg-font-size-base)",
|
|
475
|
+
boxSizing: "border-box"
|
|
476
|
+
},
|
|
477
|
+
button: {
|
|
478
|
+
padding: "calc(var(--sg-spacing-unit) * 3) calc(var(--sg-spacing-unit) * 5)",
|
|
479
|
+
borderRadius: "var(--sg-border-radius)",
|
|
480
|
+
border: "none",
|
|
481
|
+
backgroundColor: "var(--sg-color-primary)",
|
|
482
|
+
color: "#ffffff",
|
|
483
|
+
fontFamily: "var(--sg-font-family)",
|
|
484
|
+
fontSize: "var(--sg-font-size-base)",
|
|
485
|
+
fontWeight: 600,
|
|
486
|
+
cursor: "pointer",
|
|
487
|
+
transition: "background-color 0.15s ease"
|
|
488
|
+
},
|
|
489
|
+
buttonDisabled: {
|
|
490
|
+
opacity: 0.6,
|
|
491
|
+
cursor: "not-allowed"
|
|
492
|
+
},
|
|
493
|
+
statusBar: {
|
|
494
|
+
display: "flex",
|
|
495
|
+
alignItems: "center",
|
|
496
|
+
gap: "calc(var(--sg-spacing-unit) * 3)",
|
|
497
|
+
padding: "calc(var(--sg-spacing-unit) * 3)",
|
|
498
|
+
backgroundColor: "var(--sg-color-bg-secondary)",
|
|
499
|
+
borderRadius: "var(--sg-border-radius)",
|
|
500
|
+
fontSize: "var(--sg-font-size-sm)",
|
|
501
|
+
color: "var(--sg-color-text-secondary)"
|
|
502
|
+
},
|
|
503
|
+
spinner: {
|
|
504
|
+
width: "16px",
|
|
505
|
+
height: "16px",
|
|
506
|
+
border: "2px solid var(--sg-color-border)",
|
|
507
|
+
borderTopColor: "var(--sg-color-primary)",
|
|
508
|
+
borderRadius: "50%",
|
|
509
|
+
animation: "tb-spin 0.8s linear infinite",
|
|
510
|
+
flexShrink: 0
|
|
511
|
+
},
|
|
512
|
+
errorBox: {
|
|
513
|
+
padding: "calc(var(--sg-spacing-unit) * 3)",
|
|
514
|
+
backgroundColor: "var(--sg-color-bg-secondary)",
|
|
515
|
+
borderRadius: "var(--sg-border-radius)",
|
|
516
|
+
border: "1px solid var(--sg-color-critical)",
|
|
517
|
+
color: "var(--sg-color-critical)",
|
|
518
|
+
fontSize: "var(--sg-font-size-sm)"
|
|
519
|
+
},
|
|
520
|
+
followUpContainer: {
|
|
521
|
+
display: "flex",
|
|
522
|
+
gap: "calc(var(--sg-spacing-unit) * 2)",
|
|
523
|
+
marginTop: "calc(var(--sg-spacing-unit) * 4)"
|
|
524
|
+
},
|
|
525
|
+
followUpInput: {
|
|
526
|
+
flex: 1,
|
|
527
|
+
padding: "calc(var(--sg-spacing-unit) * 2) calc(var(--sg-spacing-unit) * 3)",
|
|
528
|
+
borderRadius: "var(--sg-border-radius)",
|
|
529
|
+
border: "1px solid var(--sg-color-border)",
|
|
530
|
+
backgroundColor: "var(--sg-color-bg)",
|
|
531
|
+
color: "var(--sg-color-text)",
|
|
532
|
+
fontFamily: "var(--sg-font-family)",
|
|
533
|
+
fontSize: "var(--sg-font-size-sm)",
|
|
534
|
+
boxSizing: "border-box"
|
|
535
|
+
}
|
|
536
|
+
};
|
|
537
|
+
var spinKeyframes = `
|
|
538
|
+
@keyframes tb-spin {
|
|
539
|
+
to { transform: rotate(360deg); }
|
|
540
|
+
}
|
|
541
|
+
`;
|
|
542
|
+
function StatusDisplay({ status }) {
|
|
543
|
+
if (status === "idle" || status === "complete") return null;
|
|
544
|
+
const label = status === "failed" ? "Analysis failed" : STAGE_LABELS[status] ?? status;
|
|
545
|
+
return /* @__PURE__ */ jsxs2("div", { style: styles2.statusBar, children: [
|
|
546
|
+
status !== "failed" && /* @__PURE__ */ jsx3("div", { style: styles2.spinner }),
|
|
547
|
+
/* @__PURE__ */ jsx3("span", { children: label })
|
|
548
|
+
] });
|
|
549
|
+
}
|
|
550
|
+
function AnalysisWidget({
|
|
551
|
+
onAnalysisComplete,
|
|
552
|
+
onError,
|
|
553
|
+
defaultTimeRange = "1h",
|
|
554
|
+
showFollowUp = true,
|
|
555
|
+
className
|
|
556
|
+
}) {
|
|
557
|
+
const { client } = useSigSentryContext();
|
|
558
|
+
const { submitAnalysis, askFollowUp, status, result, error, isLoading } = useSigSentry({ client });
|
|
559
|
+
const [description, setDescription] = useState3("");
|
|
560
|
+
const [timeRange, setTimeRange] = useState3(defaultTimeRange);
|
|
561
|
+
const [followUpQuestion, setFollowUpQuestion] = useState3("");
|
|
562
|
+
const [followUpAnswer, setFollowUpAnswer] = useState3(null);
|
|
563
|
+
const [isFollowUpLoading, setIsFollowUpLoading] = useState3(false);
|
|
564
|
+
const prevResultRef = useRef2(null);
|
|
565
|
+
if (result && result !== prevResultRef.current && result.status === "complete") {
|
|
566
|
+
prevResultRef.current = result;
|
|
567
|
+
onAnalysisComplete?.(result);
|
|
568
|
+
}
|
|
569
|
+
if (error && onError) {
|
|
570
|
+
onError(error);
|
|
571
|
+
}
|
|
572
|
+
const handleSubmit = useCallback2(
|
|
573
|
+
async (e) => {
|
|
574
|
+
e.preventDefault();
|
|
575
|
+
if (!description.trim() || isLoading) return;
|
|
576
|
+
const rangeOption = TIME_RANGE_OPTIONS.find((o) => o.value === timeRange);
|
|
577
|
+
const ms = rangeOption?.ms ?? 60 * 60 * 1e3;
|
|
578
|
+
const now = /* @__PURE__ */ new Date();
|
|
579
|
+
const timeStart = new Date(now.getTime() - ms);
|
|
580
|
+
setFollowUpAnswer(null);
|
|
581
|
+
prevResultRef.current = null;
|
|
582
|
+
await submitAnalysis({
|
|
583
|
+
description: description.trim(),
|
|
584
|
+
timeStart,
|
|
585
|
+
timeEnd: now
|
|
586
|
+
});
|
|
587
|
+
},
|
|
588
|
+
[description, timeRange, isLoading, submitAnalysis]
|
|
589
|
+
);
|
|
590
|
+
const handleFollowUp = useCallback2(async () => {
|
|
591
|
+
if (!followUpQuestion.trim() || isFollowUpLoading) return;
|
|
592
|
+
setIsFollowUpLoading(true);
|
|
593
|
+
const response = await askFollowUp(followUpQuestion.trim());
|
|
594
|
+
if (response?.success && response.data) {
|
|
595
|
+
setFollowUpAnswer(response.data.answer);
|
|
596
|
+
setFollowUpQuestion("");
|
|
597
|
+
}
|
|
598
|
+
setIsFollowUpLoading(false);
|
|
599
|
+
}, [followUpQuestion, isFollowUpLoading, askFollowUp]);
|
|
600
|
+
return /* @__PURE__ */ jsxs2("div", { style: styles2.container, className, children: [
|
|
601
|
+
/* @__PURE__ */ jsx3("style", { children: spinKeyframes }),
|
|
602
|
+
status === "idle" || status === "failed" ? /* @__PURE__ */ jsxs2("form", { style: styles2.form, onSubmit: handleSubmit, children: [
|
|
603
|
+
/* @__PURE__ */ jsxs2("div", { children: [
|
|
604
|
+
/* @__PURE__ */ jsx3("label", { style: styles2.label, htmlFor: "tb-description", children: "Describe the error" }),
|
|
605
|
+
/* @__PURE__ */ jsx3(
|
|
606
|
+
"textarea",
|
|
607
|
+
{
|
|
608
|
+
id: "tb-description",
|
|
609
|
+
style: styles2.textarea,
|
|
610
|
+
value: description,
|
|
611
|
+
onChange: (e) => setDescription(e.target.value),
|
|
612
|
+
placeholder: "Describe what happened, paste error messages, or explain the symptoms..."
|
|
613
|
+
}
|
|
614
|
+
)
|
|
615
|
+
] }),
|
|
616
|
+
/* @__PURE__ */ jsxs2("div", { children: [
|
|
617
|
+
/* @__PURE__ */ jsx3("label", { style: styles2.label, htmlFor: "tb-time-range", children: "Time range" }),
|
|
618
|
+
/* @__PURE__ */ jsx3(
|
|
619
|
+
"select",
|
|
620
|
+
{
|
|
621
|
+
id: "tb-time-range",
|
|
622
|
+
style: styles2.select,
|
|
623
|
+
value: timeRange,
|
|
624
|
+
onChange: (e) => setTimeRange(e.target.value),
|
|
625
|
+
children: TIME_RANGE_OPTIONS.map((option) => /* @__PURE__ */ jsx3("option", { value: option.value, children: option.label }, option.value))
|
|
626
|
+
}
|
|
627
|
+
)
|
|
628
|
+
] }),
|
|
629
|
+
error && /* @__PURE__ */ jsxs2("div", { style: styles2.errorBox, children: [
|
|
630
|
+
error.code,
|
|
631
|
+
": ",
|
|
632
|
+
error.message
|
|
633
|
+
] }),
|
|
634
|
+
/* @__PURE__ */ jsx3(
|
|
635
|
+
"button",
|
|
636
|
+
{
|
|
637
|
+
type: "submit",
|
|
638
|
+
style: {
|
|
639
|
+
...styles2.button,
|
|
640
|
+
...isLoading || !description.trim() ? styles2.buttonDisabled : {}
|
|
641
|
+
},
|
|
642
|
+
disabled: isLoading || !description.trim(),
|
|
643
|
+
children: "Analyze"
|
|
644
|
+
}
|
|
645
|
+
)
|
|
646
|
+
] }) : null,
|
|
647
|
+
isLoading && /* @__PURE__ */ jsx3(StatusDisplay, { status }),
|
|
648
|
+
result && status === "complete" && /* @__PURE__ */ jsxs2(Fragment, { children: [
|
|
649
|
+
/* @__PURE__ */ jsx3(AnalysisResultDisplay, { result }),
|
|
650
|
+
showFollowUp && /* @__PURE__ */ jsxs2("div", { style: styles2.followUpContainer, children: [
|
|
651
|
+
/* @__PURE__ */ jsx3(
|
|
652
|
+
"input",
|
|
653
|
+
{
|
|
654
|
+
type: "text",
|
|
655
|
+
style: styles2.followUpInput,
|
|
656
|
+
value: followUpQuestion,
|
|
657
|
+
onChange: (e) => setFollowUpQuestion(e.target.value),
|
|
658
|
+
placeholder: "Ask a follow-up question...",
|
|
659
|
+
onKeyDown: (e) => {
|
|
660
|
+
if (e.key === "Enter") {
|
|
661
|
+
void handleFollowUp();
|
|
662
|
+
}
|
|
663
|
+
}
|
|
664
|
+
}
|
|
665
|
+
),
|
|
666
|
+
/* @__PURE__ */ jsx3(
|
|
667
|
+
"button",
|
|
668
|
+
{
|
|
669
|
+
type: "button",
|
|
670
|
+
style: {
|
|
671
|
+
...styles2.button,
|
|
672
|
+
fontSize: "var(--sg-font-size-sm)",
|
|
673
|
+
padding: "calc(var(--sg-spacing-unit) * 2) calc(var(--sg-spacing-unit) * 4)",
|
|
674
|
+
...isFollowUpLoading || !followUpQuestion.trim() ? styles2.buttonDisabled : {}
|
|
675
|
+
},
|
|
676
|
+
disabled: isFollowUpLoading || !followUpQuestion.trim(),
|
|
677
|
+
onClick: () => void handleFollowUp(),
|
|
678
|
+
children: isFollowUpLoading ? "Asking..." : "Ask"
|
|
679
|
+
}
|
|
680
|
+
)
|
|
681
|
+
] }),
|
|
682
|
+
followUpAnswer && /* @__PURE__ */ jsx3(
|
|
683
|
+
"div",
|
|
684
|
+
{
|
|
685
|
+
style: {
|
|
686
|
+
marginTop: "calc(var(--sg-spacing-unit) * 3)",
|
|
687
|
+
padding: "calc(var(--sg-spacing-unit) * 3)",
|
|
688
|
+
backgroundColor: "var(--sg-color-bg-secondary)",
|
|
689
|
+
borderRadius: "var(--sg-border-radius)",
|
|
690
|
+
fontSize: "var(--sg-font-size-sm)",
|
|
691
|
+
lineHeight: 1.6
|
|
692
|
+
},
|
|
693
|
+
children: followUpAnswer
|
|
694
|
+
}
|
|
695
|
+
)
|
|
696
|
+
] })
|
|
697
|
+
] });
|
|
698
|
+
}
|
|
699
|
+
|
|
700
|
+
// src/components/TracebackTrigger.tsx
|
|
701
|
+
import { useState as useState4, useCallback as useCallback3, useEffect as useEffect2 } from "react";
|
|
702
|
+
import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
703
|
+
var styles3 = {
|
|
704
|
+
triggerButton: {
|
|
705
|
+
padding: "calc(var(--sg-spacing-unit) * 3) calc(var(--sg-spacing-unit) * 5)",
|
|
706
|
+
borderRadius: "var(--sg-border-radius)",
|
|
707
|
+
border: "none",
|
|
708
|
+
backgroundColor: "var(--sg-color-primary)",
|
|
709
|
+
color: "#ffffff",
|
|
710
|
+
fontFamily: "var(--sg-font-family)",
|
|
711
|
+
fontSize: "var(--sg-font-size-base)",
|
|
712
|
+
fontWeight: 600,
|
|
713
|
+
cursor: "pointer"
|
|
714
|
+
},
|
|
715
|
+
overlay: {
|
|
716
|
+
position: "fixed",
|
|
717
|
+
inset: 0,
|
|
718
|
+
backgroundColor: "rgba(0, 0, 0, 0.5)",
|
|
719
|
+
display: "flex",
|
|
720
|
+
zIndex: 9999
|
|
721
|
+
},
|
|
722
|
+
modalOverlay: {
|
|
723
|
+
alignItems: "center",
|
|
724
|
+
justifyContent: "center"
|
|
725
|
+
},
|
|
726
|
+
slideoutOverlay: {
|
|
727
|
+
justifyContent: "flex-end"
|
|
728
|
+
},
|
|
729
|
+
modalContent: {
|
|
730
|
+
width: "90%",
|
|
731
|
+
maxWidth: "680px",
|
|
732
|
+
maxHeight: "90vh",
|
|
733
|
+
overflowY: "auto",
|
|
734
|
+
backgroundColor: "var(--sg-color-bg)",
|
|
735
|
+
borderRadius: "var(--sg-border-radius)",
|
|
736
|
+
boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.25)"
|
|
737
|
+
},
|
|
738
|
+
slideoutContent: {
|
|
739
|
+
width: "420px",
|
|
740
|
+
maxWidth: "100%",
|
|
741
|
+
height: "100%",
|
|
742
|
+
overflowY: "auto",
|
|
743
|
+
backgroundColor: "var(--sg-color-bg)",
|
|
744
|
+
boxShadow: "-4px 0 25px rgba(0, 0, 0, 0.15)"
|
|
745
|
+
},
|
|
746
|
+
closeButton: {
|
|
747
|
+
position: "absolute",
|
|
748
|
+
top: "calc(var(--sg-spacing-unit) * 3)",
|
|
749
|
+
right: "calc(var(--sg-spacing-unit) * 3)",
|
|
750
|
+
background: "none",
|
|
751
|
+
border: "none",
|
|
752
|
+
fontSize: "1.5rem",
|
|
753
|
+
cursor: "pointer",
|
|
754
|
+
color: "var(--sg-color-text-secondary)",
|
|
755
|
+
lineHeight: 1,
|
|
756
|
+
padding: "calc(var(--sg-spacing-unit) * 1)"
|
|
757
|
+
},
|
|
758
|
+
contentWrapper: {
|
|
759
|
+
position: "relative"
|
|
760
|
+
}
|
|
761
|
+
};
|
|
762
|
+
function SigSentryTrigger({
|
|
763
|
+
mode = "modal",
|
|
764
|
+
label = "Analyze Error",
|
|
765
|
+
className,
|
|
766
|
+
...widgetProps
|
|
767
|
+
}) {
|
|
768
|
+
const [isOpen, setIsOpen] = useState4(false);
|
|
769
|
+
const open = useCallback3(() => setIsOpen(true), []);
|
|
770
|
+
const close = useCallback3(() => setIsOpen(false), []);
|
|
771
|
+
useEffect2(() => {
|
|
772
|
+
if (!isOpen) return;
|
|
773
|
+
const handleKeyDown = (e) => {
|
|
774
|
+
if (e.key === "Escape") close();
|
|
775
|
+
};
|
|
776
|
+
document.addEventListener("keydown", handleKeyDown);
|
|
777
|
+
return () => document.removeEventListener("keydown", handleKeyDown);
|
|
778
|
+
}, [isOpen, close]);
|
|
779
|
+
useEffect2(() => {
|
|
780
|
+
if (!isOpen) return;
|
|
781
|
+
const prev = document.body.style.overflow;
|
|
782
|
+
document.body.style.overflow = "hidden";
|
|
783
|
+
return () => {
|
|
784
|
+
document.body.style.overflow = prev;
|
|
785
|
+
};
|
|
786
|
+
}, [isOpen]);
|
|
787
|
+
const isModal = mode === "modal";
|
|
788
|
+
return /* @__PURE__ */ jsxs3(Fragment2, { children: [
|
|
789
|
+
/* @__PURE__ */ jsx4(
|
|
790
|
+
"button",
|
|
791
|
+
{
|
|
792
|
+
type: "button",
|
|
793
|
+
style: styles3.triggerButton,
|
|
794
|
+
className,
|
|
795
|
+
onClick: open,
|
|
796
|
+
children: label
|
|
797
|
+
}
|
|
798
|
+
),
|
|
799
|
+
isOpen && /* @__PURE__ */ jsx4(
|
|
800
|
+
"div",
|
|
801
|
+
{
|
|
802
|
+
style: {
|
|
803
|
+
...styles3.overlay,
|
|
804
|
+
...isModal ? styles3.modalOverlay : styles3.slideoutOverlay
|
|
805
|
+
},
|
|
806
|
+
onClick: (e) => {
|
|
807
|
+
if (e.target === e.currentTarget) close();
|
|
808
|
+
},
|
|
809
|
+
role: "dialog",
|
|
810
|
+
"aria-modal": "true",
|
|
811
|
+
children: /* @__PURE__ */ jsxs3("div", { style: { ...isModal ? styles3.modalContent : styles3.slideoutContent, ...styles3.contentWrapper }, children: [
|
|
812
|
+
/* @__PURE__ */ jsx4(
|
|
813
|
+
"button",
|
|
814
|
+
{
|
|
815
|
+
type: "button",
|
|
816
|
+
style: styles3.closeButton,
|
|
817
|
+
onClick: close,
|
|
818
|
+
"aria-label": "Close",
|
|
819
|
+
children: "\xD7"
|
|
820
|
+
}
|
|
821
|
+
),
|
|
822
|
+
/* @__PURE__ */ jsx4(AnalysisWidget, { ...widgetProps })
|
|
823
|
+
] })
|
|
824
|
+
}
|
|
825
|
+
)
|
|
826
|
+
] });
|
|
827
|
+
}
|
|
828
|
+
export {
|
|
829
|
+
AnalysisResultDisplay,
|
|
830
|
+
AnalysisWidget,
|
|
831
|
+
SigSentryProvider,
|
|
832
|
+
SigSentryTrigger,
|
|
833
|
+
useSigSentry,
|
|
834
|
+
useSigSentryContext
|
|
835
|
+
};
|
package/package.json
ADDED
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@sigsentry/react",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"description": "SigSentry React SDK — drop-in components for AI-powered log analysis",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"license": "MIT",
|
|
7
|
+
"main": "./dist/index.js",
|
|
8
|
+
"module": "./dist/index.js",
|
|
9
|
+
"types": "./dist/index.d.ts",
|
|
10
|
+
"exports": {
|
|
11
|
+
".": {
|
|
12
|
+
"import": "./dist/index.js",
|
|
13
|
+
"types": "./dist/index.d.ts"
|
|
14
|
+
},
|
|
15
|
+
"./styles": "./dist/styles/variables.css"
|
|
16
|
+
},
|
|
17
|
+
"files": [
|
|
18
|
+
"dist",
|
|
19
|
+
"README.md",
|
|
20
|
+
"LICENSE"
|
|
21
|
+
],
|
|
22
|
+
"sideEffects": false,
|
|
23
|
+
"dependencies": {
|
|
24
|
+
"@sigsentry/core": "0.1.0"
|
|
25
|
+
},
|
|
26
|
+
"peerDependencies": {
|
|
27
|
+
"react": ">=18.0.0",
|
|
28
|
+
"react-dom": ">=18.0.0"
|
|
29
|
+
},
|
|
30
|
+
"devDependencies": {
|
|
31
|
+
"@types/react": "^19.0.0",
|
|
32
|
+
"@types/react-dom": "^19.0.0",
|
|
33
|
+
"react": "^19.0.0",
|
|
34
|
+
"react-dom": "^19.0.0",
|
|
35
|
+
"tsup": "^8.4.0",
|
|
36
|
+
"typescript": "^5.7.0",
|
|
37
|
+
"vitest": "^3.0.0"
|
|
38
|
+
},
|
|
39
|
+
"keywords": [
|
|
40
|
+
"sigsentry",
|
|
41
|
+
"react",
|
|
42
|
+
"log-analysis",
|
|
43
|
+
"ai",
|
|
44
|
+
"sdk",
|
|
45
|
+
"widget",
|
|
46
|
+
"components"
|
|
47
|
+
],
|
|
48
|
+
"homepage": "https://sigsentry.dev",
|
|
49
|
+
"repository": {
|
|
50
|
+
"type": "git",
|
|
51
|
+
"url": "https://github.com/SigSentry/sdk",
|
|
52
|
+
"directory": "packages/react"
|
|
53
|
+
},
|
|
54
|
+
"bugs": {
|
|
55
|
+
"url": "https://github.com/SigSentry/sdk/issues"
|
|
56
|
+
},
|
|
57
|
+
"scripts": {
|
|
58
|
+
"build": "tsup src/index.ts --format esm --dts --clean",
|
|
59
|
+
"dev": "tsup src/index.ts --format esm --dts --watch",
|
|
60
|
+
"typecheck": "tsc --noEmit",
|
|
61
|
+
"test": "vitest run",
|
|
62
|
+
"clean": "rm -rf dist"
|
|
63
|
+
}
|
|
64
|
+
}
|