Skip to content

Commit b74df95

Browse files
agg23agg23
committed
Fix formatting
1 parent 65a1577 commit b74df95

File tree

12 files changed

+169
-136
lines changed

12 files changed

+169
-136
lines changed

‎bridge-settings/react-app/src/App.tsx‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import { useSettings } from "./hooks/useSettings";
2-
import ConnectionStatus from "./components/ConnectionStatus";
3-
import SystemStatus from "./components/SystemStatus";
4-
import SystemSettings from "./components/SystemSettings";
2+
import { ConnectionStatus } from "./components/ConnectionStatus";
3+
import { SystemStatus } from "./components/SystemStatus";
4+
import { SystemSettings } from "./components/SystemSettings";
55
import { AppSettings } from "./components/AppSettings";
6-
import MABLStatus from "./components/MABLStatus";
7-
import ESimSettings from "./components/ESimSettings";
6+
import { MABLStatus } from "./components/MABLStatus";
7+
import { ESimSettings } from "./components/ESimSettings";
88
import { LogViewer } from "./components/LogViewer";
99

10-
function App() {
10+
export const App = () => {
1111
const {
1212
loading,
1313
error,
@@ -65,6 +65,4 @@ function App() {
6565
)}
6666
</div>
6767
);
68-
}
69-
70-
export default App;
68+
};

‎bridge-settings/react-app/src/components/ActionButton.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {
66
LogEntry,
77
ExecutionStatus,
88
} from "../types/settings";
9-
import TextInput from "./TextInput";
9+
import { TextInput } from "./TextInput";
1010

1111
interface ActionButtonProps {
1212
appId: string;
@@ -20,7 +20,7 @@ interface ActionButtonProps {
2020
executionStatus?: ExecutionStatus | null;
2121
}
2222

23-
const ActionButton: React.FC<ActionButtonProps> = ({
23+
export const ActionButton: React.FC<ActionButtonProps> = ({
2424
appId,
2525
action,
2626
onExecute,
@@ -225,5 +225,3 @@ const ActionButton: React.FC<ActionButtonProps> = ({
225225
</div>
226226
);
227227
};
228-
229-
export default ActionButton;

‎bridge-settings/react-app/src/components/AppSettings.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import React from "react";
22
import { useSettings } from "../hooks/useSettings";
3-
import ToggleSwitch from "./ToggleSwitch";
4-
import Slider from "./Slider";
5-
import TextInput from "./TextInput";
3+
import { ToggleSwitch } from "./ToggleSwitch";
4+
import { Slider } from "./Slider";
5+
import { TextInput } from "./TextInput";
66

77
export const AppSettings: React.FC = () => {
88
const { allSettings } = useSettings();

‎bridge-settings/react-app/src/components/ConnectionStatus.tsx‎

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,20 @@
1-
import React from 'react';
2-
import { useWebSocket } from '../hooks/useWebSocket';
1+
import React from "react";
2+
import { useWebSocket } from "../hooks/useWebSocket";
33

4-
const ConnectionStatus: React.FC = () => {
4+
export const ConnectionStatus: React.FC = () => {
55
const { connectionState } = useWebSocket();
66

77
const getStatusText = () => {
8-
if (connectionState.connected) return 'Connected';
9-
if (connectionState.connecting) return 'Connecting...';
8+
if (connectionState.connected) return "Connected";
9+
if (connectionState.connecting) return "Connecting...";
1010
if (connectionState.error) return `Error: ${connectionState.error}`;
11-
return 'Disconnected';
11+
return "Disconnected";
1212
};
1313

1414
const getStatusClass = () => {
15-
if (connectionState.connected) return 'status-connected';
16-
if (connectionState.connecting) return 'status-connecting';
17-
return 'status-error';
15+
if (connectionState.connected) return "status-connected";
16+
if (connectionState.connecting) return "status-connecting";
17+
return "status-error";
1818
};
1919

2020
return (
@@ -24,5 +24,3 @@ const ConnectionStatus: React.FC = () => {
2424
</div>
2525
);
2626
};
27-
28-
export default ConnectionStatus;

‎bridge-settings/react-app/src/components/ESimSettings.tsx‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
import React, { useState, useEffect } from "react";
2-
import ActionButton from "./ActionButton";
3-
import { ActionDefinition, ActionResult, ExecutionStatus } from "../types/settings";
2+
import { ActionButton } from "./ActionButton";
3+
import {
4+
ActionDefinition,
5+
ActionResult,
6+
ExecutionStatus,
7+
} from "../types/settings";
48

59
interface ESimSettingsProps {
610
onExecuteAction: (
@@ -12,7 +16,7 @@ interface ESimSettingsProps {
1216
executionStatus?: ExecutionStatus | null;
1317
}
1418

15-
const ESimSettings: React.FC<ESimSettingsProps> = ({
19+
export const ESimSettings: React.FC<ESimSettingsProps> = ({
1620
onExecuteAction,
1721
actionResults,
1822
executionStatus,
@@ -219,5 +223,3 @@ const ESimSettings: React.FC<ESimSettingsProps> = ({
219223
</div>
220224
);
221225
};
222-
223-
export default ESimSettings;

‎bridge-settings/react-app/src/components/MABLStatus.tsx‎

Lines changed: 84 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,49 @@
1-
import React from 'react';
2-
import { useMABLStatus } from '../hooks/useMABLStatus';
1+
import React from "react";
2+
import { useMABLStatus } from "../hooks/useMABLStatus";
33

4-
const MABLStatus: React.FC = () => {
5-
const { conversationStatus, recentEvents, isActive, clearEvents } = useMABLStatus();
4+
export const MABLStatus: React.FC = () => {
5+
const { conversationStatus, recentEvents, isActive, clearEvents } =
6+
useMABLStatus();
67

78
if (!isActive) {
89
return (
910
<div className="settings-section">
1011
<h2>MABL Assistant</h2>
11-
<p style={{ color: '#7f8c8d', fontStyle: 'italic' }}>
12-
MABL is not currently active. Start a conversation to see status updates.
12+
<p style={{ color: "#7f8c8d", fontStyle: "italic" }}>
13+
MABL is not currently active. Start a conversation to see status
14+
updates.
1315
</p>
1416
</div>
1517
);
1618
}
1719

1820
const getStateColor = (state: string) => {
1921
switch (state) {
20-
case 'transcribing': return '#f39c12';
21-
case 'aiThinking': return '#9b59b6';
22-
case 'aiResponding': return '#3498db';
23-
case 'error': return '#e74c3c';
24-
default: return '#27ae60';
22+
case "transcribing":
23+
return "#f39c12";
24+
case "aiThinking":
25+
return "#9b59b6";
26+
case "aiResponding":
27+
return "#3498db";
28+
case "error":
29+
return "#e74c3c";
30+
default:
31+
return "#27ae60";
2532
}
2633
};
2734

2835
const getStateLabel = (state: string) => {
2936
switch (state) {
30-
case 'transcribing': return 'Listening...';
31-
case 'aiThinking': return 'AI Thinking...';
32-
case 'aiResponding': return 'AI Responding...';
33-
case 'error': return 'Error';
34-
default: return 'Ready';
37+
case "transcribing":
38+
return "Listening...";
39+
case "aiThinking":
40+
return "AI Thinking...";
41+
case "aiResponding":
42+
return "AI Responding...";
43+
case "error":
44+
return "Error";
45+
default:
46+
return "Ready";
3547
}
3648
};
3749

@@ -41,26 +53,34 @@ const MABLStatus: React.FC = () => {
4153

4254
const getEventIcon = (type: string) => {
4355
switch (type) {
44-
case 'userMessage': return '👤';
45-
case 'aiResponse': return '🤖';
46-
case 'touchpadTap': return '👆';
47-
case 'sttError': return '🔊❌';
48-
case 'llmError': return '🤖❌';
49-
default: return '📝';
56+
case "userMessage":
57+
return "👤";
58+
case "aiResponse":
59+
return "🤖";
60+
case "touchpadTap":
61+
return "👆";
62+
case "sttError":
63+
return "🔊❌";
64+
case "llmError":
65+
return "🤖❌";
66+
default:
67+
return "📝";
5068
}
5169
};
5270

5371
const getEventDescription = (event: any) => {
5472
switch (event.type) {
55-
case 'userMessage':
56-
return `User: ${event.data.text || 'Message sent'}`;
57-
case 'aiResponse':
58-
return `AI: ${event.data.text?.substring(0, 50) || 'Response'}${event.data.text?.length > 50 ? '...' : ''}`;
59-
case 'touchpadTap':
73+
case "userMessage":
74+
return `User: ${event.data.text || "Message sent"}`;
75+
case "aiResponse":
76+
return `AI: ${event.data.text?.substring(0, 50) || "Response"}${
77+
event.data.text?.length > 50 ? "..." : ""
78+
}`;
79+
case "touchpadTap":
6080
return `Touchpad ${event.data.tapType} tap (${event.data.duration}ms)`;
61-
case 'sttError':
81+
case "sttError":
6282
return `Speech recognition error: ${event.data.error}`;
63-
case 'llmError':
83+
case "llmError":
6484
return `AI error: ${event.data.error}`;
6585
default:
6686
return `${event.type}: ${JSON.stringify(event.data)}`;
@@ -70,24 +90,24 @@ const MABLStatus: React.FC = () => {
7090
return (
7191
<div className="settings-section">
7292
<h2>MABL Assistant</h2>
73-
93+
7494
{/* Current Status */}
7595
<div className="mabl-status">
7696
<h3>Current Status</h3>
7797
<div className="status-grid">
7898
<div className="status-item">
7999
<span className="label">State:</span>
80-
<span
100+
<span
81101
className="value"
82-
style={{
102+
style={{
83103
color: getStateColor(conversationStatus.state),
84-
fontWeight: 'bold'
104+
fontWeight: "bold",
85105
}}
86106
>
87107
{getStateLabel(conversationStatus.state)}
88108
</span>
89109
</div>
90-
110+
91111
{conversationStatus.partialText && (
92112
<div className="status-item">
93113
<span className="label">Transcribing:</span>
@@ -96,16 +116,17 @@ const MABLStatus: React.FC = () => {
96116
</span>
97117
</div>
98118
)}
99-
119+
100120
{conversationStatus.userMessage && (
101121
<div className="status-item">
102122
<span className="label">User Message:</span>
103123
<span className="value">
104-
"{conversationStatus.userMessage.substring(0, 50)}{conversationStatus.userMessage.length > 50 ? '...' : ''}"
124+
"{conversationStatus.userMessage.substring(0, 50)}
125+
{conversationStatus.userMessage.length > 50 ? "..." : ""}"
105126
</span>
106127
</div>
107128
)}
108-
129+
109130
{conversationStatus.streamingToken && (
110131
<div className="status-item">
111132
<span className="label">AI Token:</span>
@@ -114,20 +135,21 @@ const MABLStatus: React.FC = () => {
114135
</span>
115136
</div>
116137
)}
117-
138+
118139
{conversationStatus.lastResponse && (
119140
<div className="status-item">
120141
<span className="label">Last Response:</span>
121142
<span className="value">
122-
"{conversationStatus.lastResponse.substring(0, 50)}{conversationStatus.lastResponse.length > 50 ? '...' : ''}"
143+
"{conversationStatus.lastResponse.substring(0, 50)}
144+
{conversationStatus.lastResponse.length > 50 ? "..." : ""}"
123145
</span>
124146
</div>
125147
)}
126-
148+
127149
{conversationStatus.errorMessage && (
128150
<div className="status-item">
129151
<span className="label">Error:</span>
130-
<span className="value" style={{ color: '#e74c3c' }}>
152+
<span className="value" style={{ color: "#e74c3c" }}>
131153
{conversationStatus.errorMessage}
132154
</span>
133155
</div>
@@ -137,26 +159,33 @@ const MABLStatus: React.FC = () => {
137159

138160
{/* Recent Events */}
139161
<div className="mabl-events">
140-
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '12px' }}>
162+
<div
163+
style={{
164+
display: "flex",
165+
justifyContent: "space-between",
166+
alignItems: "center",
167+
marginBottom: "12px",
168+
}}
169+
>
141170
<h3>Recent Events</h3>
142-
<button
171+
<button
143172
onClick={clearEvents}
144173
style={{
145-
background: '#e74c3c',
146-
color: 'white',
147-
border: 'none',
148-
padding: '4px 8px',
149-
borderRadius: '4px',
150-
fontSize: '12px',
151-
cursor: 'pointer'
174+
background: "#e74c3c",
175+
color: "white",
176+
border: "none",
177+
padding: "4px 8px",
178+
borderRadius: "4px",
179+
fontSize: "12px",
180+
cursor: "pointer",
152181
}}
153182
>
154183
Clear
155184
</button>
156185
</div>
157-
186+
158187
{recentEvents.length === 0 ? (
159-
<p style={{ color: '#7f8c8d', fontStyle: 'italic' }}>
188+
<p style={{ color: "#7f8c8d", fontStyle: "italic" }}>
160189
No recent events
161190
</p>
162191
) : (
@@ -165,7 +194,9 @@ const MABLStatus: React.FC = () => {
165194
<div key={event.id} className="event-item">
166195
<div className="event-header">
167196
<span className="event-icon">{getEventIcon(event.type)}</span>
168-
<span className="event-time">{formatTimestamp(event.timestamp)}</span>
197+
<span className="event-time">
198+
{formatTimestamp(event.timestamp)}
199+
</span>
169200
</div>
170201
<div className="event-description">
171202
{getEventDescription(event)}
@@ -178,5 +209,3 @@ const MABLStatus: React.FC = () => {
178209
</div>
179210
);
180211
};
181-
182-
export default MABLStatus;

‎bridge-settings/react-app/src/components/Slider.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ interface SliderProps {
99
disabled?: boolean;
1010
}
1111

12-
const Slider: React.FC<SliderProps> = ({
12+
export const Slider: React.FC<SliderProps> = ({
1313
value,
1414
min,
1515
max,
@@ -37,5 +37,3 @@ const Slider: React.FC<SliderProps> = ({
3737
</div>
3838
);
3939
};
40-
41-
export default Slider;

0 commit comments

Comments
 (0)