stream.place
Live video on the AT Protocol
Merge pull request #908 from streamplace/natb/command-errors
fix: show slash command errors in chat
+3
-1
js/components/src/components/chat/chat-box.tsx
+3
-1
js/components/src/components/chat/chat-box.tsx
···
27
27
w,
28
28
} from "../../lib/theme/atoms";
29
29
import {
30
+
useAddSystemMessage,
30
31
useChat,
31
32
useCreateChatMessage,
32
33
useLivestream,
···
81
82
82
83
const chat = useChat();
83
84
const createChatMessage = useCreateChatMessage();
85
+
const addSystemMessage = useAddSystemMessage();
84
86
const replyTo = useReplyToMessage();
85
87
const setReplyToMessage = useSetReplyToMessage();
86
88
const textAreaRef = useRef<TextInput>(null);
···
311
313
if (result.handled) {
312
314
if (result.error) {
313
315
console.error("Slash command error:", result.error);
314
-
SystemMessages.commandError(result.error);
316
+
addSystemMessage(SystemMessages.commandError(result.error));
315
317
}
316
318
return;
317
319
}
+12
-2
js/components/src/components/chat/system-message.tsx
+12
-2
js/components/src/components/chat/system-message.tsx
···
1
1
import { View } from "react-native";
2
2
import { Main } from "streamplace/src/lexicons/types/place/stream/richtext/facet";
3
3
import { SystemMessageType } from "../../lib/system-messages";
4
-
import { colors, flex, gap, layout, ml, pb, pl, px, w } from "../../ui";
4
+
import { bg, colors, flex, gap, layout, ml, pb, pl, px, r, w } from "../../ui";
5
5
import { Code, Text } from "../ui/text";
6
6
import { RichTextMessage } from "./chat-message";
7
7
···
18
18
timestamp,
19
19
facets,
20
20
}: SystemMessageProps) {
21
+
const isError = variant === SystemMessageType.command_error;
22
+
21
23
return (
22
-
<View style={[w.percent[100], px[2], pb[2]]}>
24
+
<View
25
+
style={[
26
+
w.percent[100],
27
+
px[2],
28
+
pb[2],
29
+
isError && bg.red[950],
30
+
isError && r.md,
31
+
]}
32
+
>
23
33
<Code color="muted" tracking="widest" style={[pl[12], ml[1]]}>
24
34
SYSTEM MESSAGE
25
35
</Code>
+12
js/components/src/livestream-store/chat.tsx
+12
js/components/src/livestream-store/chat.tsx
···
155
155
};
156
156
};
157
157
158
+
export const useAddSystemMessage = () => {
159
+
const store = getStoreFromContext();
160
+
return useCallback(
161
+
(message: ChatMessageViewHydrated) => {
162
+
const state = store.getState();
163
+
const newState = reduceChat(state, [message], []);
164
+
store.setState(newState);
165
+
},
166
+
[store],
167
+
);
168
+
};
169
+
158
170
const buildSortedChatList = (
159
171
chatIndex: { [key: string]: ChatMessageViewHydrated },
160
172
existingChatList: ChatMessageViewHydrated[],