Skip to content

Commit 62fa68a

Browse files
kshmidt-digmakshmidt-digma
committed
Restyle chat, add query and delete mutation
1 parent d9a8c7a commit 62fa68a

File tree

13 files changed

+237
-81
lines changed

13 files changed

+237
-81
lines changed

‎src/components/Agentic/IncidentDirectives/index.tsx‎

Lines changed: 114 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,24 @@ import {
66
useReactTable
77
} from "@tanstack/react-table";
88
import { useMemo, useState } from "react";
9+
import {
10+
useDeleteIncidentAgentDirectiveMutation,
11+
useGetIncidentAgentDirectivesQuery
12+
} from "../../../redux/services/digma";
13+
import type {
14+
Directive,
15+
IncidentAgentEvent
16+
} from "../../../redux/services/types";
917
import { SortIcon } from "../../common/icons/16px/SortIcon";
1018
import { TrashBinIcon } from "../../common/icons/16px/TrashBinIcon";
1119
import { Direction } from "../../common/icons/types";
1220
import { KebabMenu } from "../../common/KebabMenu";
1321
import { Checkmark } from "../../common/v3/Checkmark";
1422
import type { MenuItem } from "../../Navigation/common/MenuList/types";
1523
import * as s from "./styles";
16-
import type { ColumnMeta, Directive, ExtendedDirective } from "./types";
24+
import type { ColumnMeta, ExtendedDirective } from "./types";
1725

26+
// TODO: remove
1827
const mockData: Directive[] = [
1928
{
2029
id: "1",
@@ -42,13 +51,73 @@ const mockData: Directive[] = [
4251
}
4352
];
4453

54+
// TODO: remove
55+
const mockEventsData: IncidentAgentEvent[] = [
56+
{
57+
agent_name: "incident_entry",
58+
message: "",
59+
type: "memory_update"
60+
},
61+
{
62+
agent_name: "incident_entry",
63+
message: "",
64+
type: "memory_update"
65+
},
66+
{
67+
agent_name: "incident_entry",
68+
message: "",
69+
type: "memory_update"
70+
},
71+
{
72+
agent_name: "incident_entry",
73+
message: "",
74+
type: "memory_update"
75+
},
76+
{
77+
agent_name: "incident_entry",
78+
message: "",
79+
type: "memory_update"
80+
},
81+
{
82+
agent_name: "incident_entry",
83+
message: "",
84+
type: "memory_update"
85+
},
86+
{
87+
agent_name: "incident_entry",
88+
message: "",
89+
type: "memory_update"
90+
},
91+
{
92+
agent_name: "incident_entry",
93+
message: "",
94+
type: "memory_update"
95+
},
96+
{
97+
agent_name: "incident_entry",
98+
message: "",
99+
type: "memory_update"
100+
},
101+
{
102+
agent_name: "incident_entry",
103+
message: "",
104+
type: "memory_update"
105+
}
106+
];
107+
45108
const columnHelper = createColumnHelper<ExtendedDirective>();
46109

47110
export const IncidentDirectives = () => {
48111
const [searchInputValue, setSearchInputValue] = useState("");
49-
const [bottomInputValue, setBottomInputValue] = useState("");
50112
const [selectedConditions, setSelectedConditions] = useState<string[]>([]);
51113

114+
const { data } = useGetIncidentAgentDirectivesQuery({
115+
search_term: searchInputValue
116+
});
117+
118+
const [deleteIncidentAgentDirective] =
119+
useDeleteIncidentAgentDirectiveMutation();
120+
52121
const handleSearchInputChange = (value: string) => {
53122
setSearchInputValue(value);
54123
};
@@ -59,31 +128,32 @@ export const IncidentDirectives = () => {
59128
);
60129
};
61130

62-
const handleBottomInputChange = () => {
63-
setBottomInputValue("");
131+
const handleMessageSend = () => {
132+
// TODO: implement
64133
};
65134

66-
const handleBottomInputSubmit = () => {
67-
return undefined;
135+
const handleSelectedConditionTagClick = (id: string) => () => {
136+
setSelectedConditions((prev) => prev.filter((x) => x !== id));
68137
};
69138

70139
const items = useMemo(() => {
71-
const filteredItems = mockData.filter((item) => {
72-
const conditionMatch = item.condition
73-
.toLowerCase()
74-
.includes(searchInputValue.toLowerCase());
75-
const directiveMatch = item.directive
76-
.toLowerCase()
77-
.includes(searchInputValue.toLowerCase());
78-
return conditionMatch || directiveMatch;
79-
});
140+
// const filteredItems = (data?.directives ?? mockData).filter((item) => {
141+
// const conditionMatch = item.condition
142+
// .toLowerCase()
143+
// .includes(searchInputValue.toLowerCase());
144+
// const directiveMatch = item.directive
145+
// .toLowerCase()
146+
// .includes(searchInputValue.toLowerCase());
147+
// return conditionMatch || directiveMatch;
148+
// });
80149

81-
return filteredItems.map((item, index) => ({
150+
// TODO: remove mock data
151+
return (data?.directives ?? mockData)?.map((item, index) => ({
82152
...item,
83153
number: index + 1,
84154
isSelected: selectedConditions.includes(item.id)
85155
}));
86-
}, [searchInputValue, selectedConditions]);
156+
}, [selectedConditions, data?.directives]);
87157

88158
const columns = [
89159
columnHelper.accessor((x) => x, {
@@ -180,9 +250,13 @@ export const IncidentDirectives = () => {
180250
minWidth: 100,
181251
textAlign: "center"
182252
},
183-
cell: () => {
253+
cell: (info) => {
254+
const value = info.getValue();
255+
184256
const handleDeleteMenuItemClick = () => {
185-
// TODO: implement
257+
void deleteIncidentAgentDirective({
258+
id: value.id
259+
});
186260
};
187261

188262
const items: MenuItem[] = [
@@ -200,7 +274,7 @@ export const IncidentDirectives = () => {
200274
];
201275

202276
const table = useReactTable({
203-
data: items,
277+
data: items ?? [],
204278
columns,
205279
getCoreRowModel: getCoreRowModel(),
206280
getSortedRowModel: getSortedRowModel(),
@@ -301,21 +375,26 @@ export const IncidentDirectives = () => {
301375
</s.TableBody>
302376
</s.Table>
303377
</s.TableContainer>
304-
{selectedConditions.length > 0 && (
305-
<s.SelectedConditionsContainer>
306-
Selected Conditions
307-
<s.SelectedConditionsList>
308-
{selectedConditions.map((x) => (
309-
<s.SelectedConditionTag key={x}>#{x}</s.SelectedConditionTag>
310-
))}
311-
</s.SelectedConditionsList>
312-
</s.SelectedConditionsContainer>
313-
)}
314-
<s.StyledPromptInput
315-
onChange={handleBottomInputChange}
316-
onSubmit={handleBottomInputSubmit}
317-
value={bottomInputValue}
318-
isDisabled={true}
378+
<s.StyledAgentChat
379+
// TODO: remove mock data
380+
data={mockEventsData}
381+
isDataLoading={false}
382+
onMessageSend={handleMessageSend}
383+
isMessageSending={false}
384+
attachmentsComponent={
385+
selectedConditions.length > 0 && (
386+
<s.SelectedConditionsContainer>
387+
{selectedConditions.map((x) => (
388+
<s.SelectedConditionTag
389+
onClick={handleSelectedConditionTagClick(x)}
390+
key={x}
391+
>
392+
#{x}
393+
</s.SelectedConditionTag>
394+
))}
395+
</s.SelectedConditionsContainer>
396+
)
397+
}
319398
/>
320399
</s.Container>
321400
);

‎src/components/Agentic/IncidentDirectives/styles.ts‎

Lines changed: 20 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@ import {
66
subheading1RegularTypography,
77
subscriptRegularTypography
88
} from "../../common/App/typographies";
9-
import { PromptInput } from "../common/PromptInput";
9+
import { AgentChat } from "../common/AgentChat";
10+
import { Form, TextArea } from "../common/PromptInput/styles";
1011
import { SearchInput } from "../common/SearchInput";
1112
import type { TableCellContentProps } from "./types";
1213

@@ -132,47 +133,42 @@ export const Directive = styled.span`
132133

133134
export const SelectedConditionsContainer = styled.div`
134135
display: flex;
135-
flex-direction: column;
136-
gap: 16px;
137-
padding: 24px;
138-
border-radius: 8px;
139-
border: 1px solid ${({ theme }) => theme.colors.v3.stroke.dark};
140-
background: ${({ theme }) => theme.colors.v3.surface.secondary};
141-
color: ${({ theme }) => theme.colors.v3.text.primary};
142-
font-size: 14px;
143-
font-weight: 600;
144-
`;
145-
146-
export const SelectedConditionsList = styled.div`
147-
display: flex;
148-
gap: 10px;
136+
gap: 6px;
149137
flex-wrap: wrap;
150-
height: 35px;
151-
overflow: auto;
152138
`;
153139

154140
export const SelectedConditionTag = styled.div`
155141
display: flex;
156142
align-items: center;
157143
justify-content: center;
158144
padding: 6px 8px;
159-
background: ${({ theme }) => theme.colors.v3.surface.brandTertiary};
145+
background: ${({ theme }) => theme.colors.v3.surface.primary};
146+
border: 1px solid ${({ theme }) => theme.colors.v3.stroke.dark};
160147
border-radius: 5px;
161148
color: ${({ theme }) => theme.colors.v3.text.primary};
162149
font-size: 16px;
163150
line-height: 20px;
151+
box-shadow: 0 3px 5px 0 rgb(0 0 0 / 13%);
152+
cursor: pointer;
164153
`;
165154

166-
export const StyledPromptInput = styled(PromptInput)`
167-
height: 96px;
155+
export const StyledAgentChat = styled(AgentChat)`
168156
${/* TODO: change to color from the theme */ ""}
169-
border: 1px solid #6063f6;
157+
background: #000;
158+
border-radius: 8px;
159+
padding: 24px;
160+
gap: 12px;
161+
max-height: 306px;
170162
171-
& > textarea {
172-
height: 100%;
163+
& ${Form} {
164+
height: 117px;
165+
${/* TODO: change to color from the theme */ ""}
166+
border: 1px solid #6063f6;
173167
174-
&::placeholder {
168+
& ${TextArea} {
169+
${subheading1RegularTypography}
175170
color: ${({ theme }) => theme.colors.v3.text.primary};
171+
height: 100%;
176172
}
177173
}
178174
`;

‎src/components/Agentic/IncidentDirectives/types.ts‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,4 @@
1-
export interface Directive {
2-
id: string;
3-
condition: string;
4-
directive: string;
5-
agents: string[];
6-
}
1+
import type { Directive } from "../../../redux/services/types";
72

83
export interface ExtendedDirective extends Directive {
94
number: number;

‎src/components/Agentic/common/AgentChat/index.tsx‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { Fragment, useEffect, useMemo, useState } from "react";
22
import type { IncidentAgentEvent } from "../../../../redux/services/types";
33
import { isNumber } from "../../../../typeGuards/isNumber";
44
import { sendUserActionTrackingEvent } from "../../../../utils/actions/sendUserActionTrackingEvent";
5+
import { MagicWandIcon } from "../../../common/icons/16px/MagicWandIcon";
56
import { Chat } from "../../common/Chat";
67
import { Accordion } from "../../IncidentDetails/AgentEvents/Accordion";
78
import { TypingMarkdown } from "../../IncidentDetails/TypingMarkdown";
@@ -20,7 +21,8 @@ export const AgentChat = ({
2021
className,
2122
data,
2223
isDataLoading,
23-
onNavigateToIncident
24+
onNavigateToIncident,
25+
attachmentsComponent
2426
}: AgentChatProps) => {
2527
const [initialEventsCount, setInitialEventsCount] = useState<number>();
2628
const [eventsVisibleCount, setEventsVisibleCount] = useState<number>();
@@ -119,13 +121,21 @@ export const AgentChat = ({
119121
}
120122
break;
121123
}
124+
case "memory_update":
125+
return (
126+
<s.MemoryUpdateMessage>
127+
<MagicWandIcon color={"currentColor"} />
128+
Updated saved memory
129+
</s.MemoryUpdateMessage>
130+
);
122131
default:
123132
return null;
124133
}
125134
};
126135

127136
return (
128137
<Chat
138+
attachmentsComponent={attachmentsComponent}
129139
isInitialLoading={!data && isDataLoading}
130140
isMessageSending={isMessageSending}
131141
onMessageSend={handleMessageSend}

‎src/components/Agentic/common/AgentChat/styles.ts‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
import styled from "styled-components";
2-
import { subheading1RegularTypography } from "../../../common/App/typographies";
2+
import {
3+
subheading1RegularTypography,
4+
subscriptRegularTypography
5+
} from "../../../common/App/typographies";
36
import { Link } from "../../../common/Link";
47

58
export const HumanMessage = styled.div`
@@ -17,3 +20,11 @@ export const AgentMessage = styled.div`
1720
export const StyledLink = styled(Link)`
1821
font-size: inherit;
1922
`;
23+
24+
export const MemoryUpdateMessage = styled.div`
25+
${subscriptRegularTypography}
26+
color: ${({ theme }) => theme.colors.v3.text.tertiary};
27+
display: flex;
28+
align-items: center;
29+
gap: 4px;
30+
`;

‎src/components/Agentic/common/AgentChat/types.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import type { ReactNode } from "react";
12
import type { IncidentAgentEvent } from "../../../../redux/services/types";
23

34
export interface AgentChatProps {
@@ -10,4 +11,5 @@ export interface AgentChatProps {
1011
data?: IncidentAgentEvent[];
1112
isDataLoading: boolean;
1213
onNavigateToIncident?: (incidentId: string) => void;
14+
attachmentsComponent?: ReactNode;
1315
}

‎src/components/Agentic/common/Chat/index.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ export const Chat = ({
1212
onMessageSend,
1313
chatContent,
1414
className,
15+
attachmentsComponent,
1516
promptFontSize
1617
}: ChatProps) => {
1718
const [inputValue, setInputValue] = useState("");
@@ -42,6 +43,7 @@ export const Chat = ({
4243
isSubmitting={isMessageSending}
4344
placeholder={"Write your prompt here"}
4445
fontSize={promptFontSize}
46+
attachmentsComponent={attachmentsComponent}
4547
/>
4648
</s.Container>
4749
);

‎src/components/Agentic/common/Chat/types.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,4 +7,5 @@ export interface ChatProps {
77
chatContent: ReactNode;
88
className?: string;
99
promptFontSize?: number; // in pixels
10+
attachmentsComponent?: ReactNode;
1011
}

0 commit comments

Comments
 (0)