dmed-voice-assistant 1.0.2 → 1.1.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (16) hide show
  1. package/dist/components/RecognitionListItem.js +54 -0
  2. package/dist/components/RecordListItem.js +246 -0
  3. package/dist/components/StyledSelect.js +25 -0
  4. package/dist/components/svgs.js +343 -0
  5. package/dist/index.js +39 -0
  6. package/dist/recognition.js +743 -0
  7. package/dist/recorder.js +513 -0
  8. package/package.json +3 -4
  9. package/src/VoiceAssistant/index.js +0 -45
  10. package/src/VoiceAssistant/recognition.js +0 -952
  11. package/src/VoiceAssistant/recorder.js +0 -575
  12. package/src/shared/RecognitionListItem.js +0 -53
  13. package/src/shared/RecordListItem.js +0 -259
  14. package/src/shared/StyledDatePicker.js +0 -26
  15. package/src/shared/StyledSelect.js +0 -16
  16. package/src/shared/svgs.js +0 -267
package/src/VoiceAssistant/recognition.js DELETED
@@ -1,952 +0,0 @@
1
- import { useState, useEffect, useRef } from "react";
2
- import { Box, Typography, Divider, MenuItem, styled, Select, Dialog, Popover, Button } from "@mui/material";
3
- import {
4
- RecognitionIcon,
5
- CloseIcon,
6
- RocketIcon,
7
- StartIcon,
8
- DarkSettingIcon,
9
- StopIcon,
10
- HistoryIcon,
11
- BookIcon,
12
- RedirectIcon,
13
- SmallPauseIcon,
14
- RedStopIcon,
15
- MicIcon,
16
- LanguageIcon,
17
- SmallCloseIcon,
18
- CommandIcon
19
- } from "../shared/svgs";
20
- import RecognitionListItem from "../shared/RecognitionListItem";
21
-
22
- const StyledSelect = styled(Select)(({ theme }) => ({
23
- height: '41.4px',
24
- border: '0.9px solid #D8DEE4',
25
- borderRadius: '5px',
26
- maxWidth: '375px',
27
- '& .MuiOutlinedInput-notchedOutline': {
28
- border: "none",
29
- },
30
- '& svg': {
31
- fill: '#494A48'
32
- },
33
- }));
34
-
35
- const StyledDialog = styled(Dialog)(({ theme }) => ({
36
- '& .MuiPaper-root': {
37
- background: '#FBF3DE',
38
- border: '1px solid #FFB90080',
39
- borderRadius: '5px',
40
- padding: '8px 10px'
41
- },
42
- }));
43
-
44
- const StyledTypography = styled(Typography)(({ theme }) => ({
45
- padding: '3px 6px',
46
- background: '#FFB90033',
47
- borderRadius: '5px',
48
- fontWeight: '400 !important',
49
- fontSize: '12px !important',
50
- color: '#494A48 !important',
51
- lineHeight: '15.59px'
52
- }));
53
-
54
- const Recognition = ({
55
- mode = 'recorder',
56
- recognitionHistoryList,
57
- setMode,
58
- onNewRecognitionEvent,
59
- onRecognitionDataChange
60
- }) => {
61
- const [open, setOpen] = useState(false);
62
- const [anchorEl, setAnchorEl] = useState(null);
63
- const openAnchorEl = Boolean(anchorEl);
64
- const [isStarted, setIsStarted] = useState(false);
65
- const [isSteup, setIsSetup] = useState(false);
66
- const [selectedVoice, setSelectedVoice] = useState("");
67
- const [voiceList, setVoiceList] = useState([]);
68
- const languageList = ['Auto-Detect', 'English', 'Chinese (Simplified)'];
69
- const [selectedLanguage, setSelectedLanguage] = useState("");
70
-
71
- const recognitionRef = useRef(null);
72
- const [result, setResult] = useState([]);
73
- const [historyList, setHistoryList] = useState(recognitionHistoryList);
74
- const [recordTime, setRecordTime] = useState(0);
75
- const [intervalId, setIntervalId] = useState(null);
76
-
77
- const handleClickOpen = () => {
78
- setOpen(true);
79
- };
80
- const handleClose = () => {
81
- setOpen(false);
82
- };
83
-
84
- const handlePopoverOpen = (event) => {
85
- setAnchorEl(event.currentTarget);
86
- };
87
-
88
- const handlePopoverClose = () => {
89
- setAnchorEl(null);
90
- };
91
-
92
- const handleModeChange = () => {
93
- if(mode === "recorder") {
94
- setMode("recognition");
95
- } else if(mode === "recognition") {
96
- setMode("recorder");
97
- }
98
- };
99
-
100
- const handleStartChange = () => {
101
- if(isSteup) return;
102
-
103
- if(!isStarted) {
104
- setIsStarted(!isStarted);
105
- startRecording();
106
- } else {
107
- setIsStarted(false);
108
- stopRecording();
109
- }
110
- };
111
-
112
- const handleSetupChange = () => {
113
- setIsSetup(!isSteup);
114
- };
115
-
116
- const handleVoiceChange = (event) => {
117
- setSelectedVoice(event.target.value);
118
- };
119
-
120
- const handleLanguageChange = (event) => {
121
- setSelectedLanguage(event.target.value);
122
- };
123
-
124
- const startRecording = () => {
125
- if (recognitionRef.current) {
126
- setResult([]);
127
- setRecordTime(0);
128
- const id = setInterval(async () => {
129
- setRecordTime((prevCount) => prevCount + 1);
130
- }, 1000);
131
- setIntervalId(id);
132
- recognitionRef.current.start();
133
- }
134
- };
135
-
136
- const stopRecording = () => {
137
- if (recognitionRef.current) {
138
- recognitionRef.current.stop();
139
- clearInterval(intervalId);
140
- let temp = [...historyList];
141
- const newData = {
142
- result,
143
- date: new Date()
144
- }
145
- temp.push(newData);
146
- setHistoryList(temp);
147
-
148
- if(onNewRecognitionEvent) {
149
- onNewRecognitionEvent(newData);
150
- }
151
- if(onRecognitionDataChange) {
152
- onRecognitionDataChange(temp);
153
- }
154
- }
155
- };
156
-
157
- const startSpeechRecognition = () => {
158
- const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
159
-
160
- if (SpeechRecognition) {
161
- const recognition = new SpeechRecognition();
162
- recognition.continuous = true;
163
- recognition.interimResults = true;
164
- recognition.lang = 'en-US';
165
-
166
- recognition.onstart = () => {
167
- console.log('Recording started');
168
- };
169
-
170
- recognition.onresult = (event) => {
171
- setResult((prevTranscript) => {
172
- let updatedTranscript = [...prevTranscript];
173
- for (let i = event.resultIndex; i < event.results.length; i++) {
174
- if (event.results[i].isFinal) {
175
- const resultArr = event.results[i][0].transcript.split(' ').filter(word => word.trim() !== '');
176
- updatedTranscript = updatedTranscript.concat(resultArr);
177
- }
178
- }
179
- return updatedTranscript;
180
- });
181
- };
182
-
183
- recognition.onerror = (event) => {
184
- console.error('Speech recognition error:', event.error);
185
- };
186
-
187
- recognition.onend = () => {
188
- setIsStarted(false);
189
- clearInterval(intervalId);
190
- console.log('Speech recognition ended');
191
- };
192
-
193
- recognitionRef.current = recognition;
194
- } else {
195
- console.error('Speech recognition not supported');
196
- }
197
- };
198
-
199
- useEffect(() => {
200
- const fetchAudioInputDevices = async () => {
201
- try {
202
- await navigator.mediaDevices.getUserMedia({ audio: true });
203
- const devices = await navigator.mediaDevices.enumerateDevices();
204
-
205
- // Filter only audio input devices
206
- const audioInputs = devices.filter(device => device.kind === "audioinput");
207
- let temp = ['Auto-Detect'];
208
- audioInputs.forEach(device => {
209
- temp.push(device.label);
210
- });
211
- setVoiceList(temp);
212
- } catch (error) {
213
- console.error("Error accessing audio devices:", error);
214
- }
215
- };
216
-
217
- startSpeechRecognition();
218
- fetchAudioInputDevices();
219
- }, []);
220
-
221
- return (
222
- <Box
223
- className="bg-white rounded-[5px] p-[20px] w-[440px]"
224
- sx={{
225
- border: '1px solid #D8DEE4'
226
- }}
227
- >
228
- <Box className="flex justify-between">
229
- <Box className="flex items-center space-x-2">
230
- <Typography className="!font-[600] !text-[24px]" color="#494A48">
231
- Voice assistant
232
- </Typography>
233
- <Box
234
- className="flex items-center space-x-1 px-[10px] py-[3px] h-[24px] bg-[#006FFF4D] rounded-[89.1px] cursor-pointer"
235
- sx={{
236
- border: '0.9px solid #006FFFB2',
237
- }}
238
- onClick={handleModeChange}
239
- >
240
- <Box>
241
- <RecognitionIcon />
242
- </Box>
243
- <Typography className="!font-[600] !text-[12px]" color="#494A48">
244
- Recognition mode
245
- </Typography>
246
- </Box>
247
- </Box>
248
- <Box className="px-[10px] py-[8px] cursor-pointer">
249
- <CloseIcon />
250
- </Box>
251
- </Box>
252
-
253
- <Box className="flex items-center justify-between py-[4.5px] mt-1">
254
- <Box className="flex space-x-1">
255
- <Box>
256
- <RocketIcon />
257
- </Box>
258
- <Typography className="!font-400 !text-[14px]" color="#494A48">
259
- Real-time
260
- </Typography>
261
- </Box>
262
-
263
- <Box className="flex space-x-1">
264
- {
265
- !isStarted ?
266
- <Box
267
- className="flex items-center space-x-1 cursor-pointer rounded-[5px] px-[9px] h-[32.4px] bg-white"
268
- sx={{
269
- '&:hover': {
270
- boxShadow: '0px 0px 5px 1px #44C63380',
271
- cursor: isSteup && 'not-allowed'
272
- }
273
- }}
274
- onClick={handleStartChange}
275
- >
276
- <Box>
277
- <StartIcon />
278
- </Box>
279
- <Typography className="!font-400 !text-[14px]" color="#494A48">
280
- Start
281
- </Typography>
282
- </Box>
283
- :
284
- <Box
285
- className="flex items-center justify-between space-x-4 cursor-pointer rounded-[5px] px-[9px] h-[32.4px] bg-white"
286
- sx={{
287
- border: "0.9px solid #F3151580",
288
- '&:hover': {
289
- boxShadow: '0px 0px 5px 1px #F3151580'
290
- }
291
- }}
292
- onClick={handleStartChange}
293
- >
294
- <Box className="flex items-center space-x-1">
295
- <Box>
296
- <SmallPauseIcon />
297
- </Box>
298
- <Typography className="!font-400 !text-[14px]" color="#494A48">
299
- Stop
300
- </Typography>
301
- </Box>
302
- <Box className="flex items-baseline">
303
- <Typography
304
- className="!font-[600] !text-[20px]"
305
- color="#494847"
306
- sx={{ fontFamily: "Afacad !important" }}
307
- >
308
- {recordTime}
309
- </Typography>
310
- <Typography
311
- className="!font-400 !text-[16px]"
312
- color="#797974"
313
- sx={{ fontFamily: "Afacad !important" }}
314
- >
315
- s
316
- </Typography>
317
- </Box>
318
- </Box>
319
- }
320
- <Box
321
- className="flex items-center space-x-1 cursor-pointer rounded-[5px] px-[9px] h-[32.4px] bg-white"
322
- sx={{
323
- '&:hover': {
324
- boxShadow: !isStarted ? '0px 0px 5px 1px #494A4880' : 'none',
325
- cursor: isStarted && "not-allowed"
326
- }
327
- }}
328
- onClick={handleSetupChange}
329
- >
330
- <Box>
331
- <DarkSettingIcon fill={isStarted ? "#494A484D" : "#494A48" } />
332
- </Box>
333
- <Typography className="!font-400 !text-[14px]" color={isStarted ? "#494A484D" : "#494A48"}>
334
- Setup
335
- </Typography>
336
- </Box>
337
- </Box>
338
- </Box>
339
-
340
- {
341
- !isSteup ?
342
- <>
343
- <Box className="rounded-[5px] mt-1" sx={{ border: '1px solid #D8DEE4' }}>
344
- <Box className="flex items-center justify-between p-[4.5px]">
345
- <Typography className="px-[4.5px] py-[4px] !font-400 !text-[12px]" color="#494A48">
346
- {!isStarted ? '-' : result.length} words
347
- </Typography>
348
- <Box className="flex items-center space-x-1 px-[9px]">
349
- <Box>
350
- {!isStarted ? <StopIcon /> : <RedStopIcon />}
351
- </Box>
352
- <Typography className="!font-[600] !text-[14px]" color="#494A48">
353
- {!isStarted ? 'Stop' : 'REC'}
354
- </Typography>
355
- </Box>
356
- </Box>
357
-
358
- {
359
- isStarted &&
360
- <Box
361
- className="flex items-center flex-wrap space-x-1 mt-1 p-[9px]"
362
- sx={{ maxWidth: "387px", overflow: "hidden" }}
363
- >
364
- {
365
- result.map((item, index) => {
366
- return (
367
- <Box className="flex items-center" key={index}>
368
- <Typography
369
- className="!font-400 !text-[16px]" color="#494A48"
370
- sx={{ fontFamily: "Space Grotesk !important" }}
371
- >
372
- {item}
373
- </Typography>
374
- {
375
- index !== result.length - 1 &&
376
- <Typography
377
- className="!font-400 !text-[16px]" color="#494A4880"
378
- sx={{ fontFamily: "Fira Sans !important" }}
379
- >
380
- ,
381
- </Typography>
382
- }
383
- </Box>
384
- )
385
- })
386
- }
387
- </Box>
388
- }
389
- </Box>
390
-
391
- <Box className="mt-1">
392
- <Box className="flex items-center justify-between py-[4.5px]">
393
- <Box className="flex space-x-1">
394
- <Box>
395
- <HistoryIcon />
396
- </Box>
397
- <Typography className="!font-400 !text-[14px]" color="#494A48">
398
- History
399
- </Typography>
400
- </Box>
401
-
402
- <Button
403
- disabled={isStarted}
404
- color="#494A48"
405
- sx={{
406
- border: '0.9px solid #D8DEE4',
407
- fontSize: '14px !important',
408
- fontWeight: '400 !important',
409
- fontFamily: 'Reddit Sans !important',
410
- height: '32px !important',
411
- textTransform: "none"
412
- }}
413
- onClick={handlePopoverOpen}
414
- >
415
- 02.July.2024
416
- </Button>
417
- </Box>
418
-
419
- <Box
420
- className="flex flex-col scrollableBox mt-1"
421
- sx={{
422
- maxHeight: "160px",
423
- }}
424
- >
425
- {
426
- historyList.map((history, index) => {
427
- return (
428
- <RecognitionListItem
429
- data={history}
430
- key={index}
431
- />
432
- )
433
- })
434
- }
435
- </Box>
436
-
437
- <Box
438
- className="flex items-center justify-between rounded-[5px] bg-[#FBF3DE80] px-[5px] py-[8px] mt-1 cursor-pointer"
439
- sx={{
440
- border: '1px solid #FFB90080',
441
- }}
442
- onClick={handleClickOpen}
443
- >
444
- <Box className="flex items-center space-x-1">
445
- <Box>
446
- <BookIcon />
447
- </Box>
448
- <Typography className="!font-[600] !text-[14px]" color="#494A48">
449
- Voice command instructions
450
- </Typography>
451
- </Box>
452
- <Box>
453
- <RedirectIcon />
454
- </Box>
455
- </Box>
456
- </Box>
457
- </>
458
- :
459
- <>
460
- <Divider />
461
-
462
- <Box className="flex space-x-1 w-full mt-2">
463
- <Box>
464
- <MicIcon fill="#494A48" />
465
- </Box>
466
- <Box className="flex-1">
467
- <Typography className="!font-[600] !text-[16px]" color="#494A48">
468
- Voice
469
- </Typography>
470
- <Typography className="!font-400 !text-[14px] pt-1" color="#494A48">
471
- Input device
472
- </Typography>
473
- <StyledSelect
474
- className="mt-1"
475
- fullWidth
476
- displayEmpty
477
- value={selectedVoice}
478
- onChange={handleVoiceChange}
479
- renderValue={(selected) => {
480
- if (selected === "") {
481
- return <span style={{
482
- fontSize: '12.6px',
483
- fontWeight: '400',
484
- lineHeight: '25.2px',
485
- color: '#494A4899' }}>Auto-Detect</span>;
486
- }
487
- return <span style={{
488
- fontSize: '12.6px',
489
- fontWeight: '400',
490
- lineHeight: '25.2px',
491
- color: '#494A4899' }}>{voiceList[selected]}</span>;
492
- }}
493
- MenuProps={{
494
- PaperProps: {
495
- sx: {
496
- marginTop: "5px",
497
- border: '0.9px solid #D8DEE4',
498
- padding: '5px',
499
- '& .MuiList-root': {
500
- padding: "unset"
501
- },
502
- '& .MuiMenuItem-root': {
503
- padding: "7.2px 9px",
504
- color: '#494A4899',
505
- fontFamily: 'Reddit Sans',
506
- fontSize: '12.6px',
507
- fontWeight: '400',
508
- lineHeight: '25.2px'
509
- }
510
- },
511
- },
512
- }}
513
- >
514
- {
515
- voiceList.map((device, index) => {
516
- return (
517
- <MenuItem value={index} key={index}>{device}</MenuItem>
518
- )
519
- })
520
- }
521
- </StyledSelect>
522
- </Box>
523
- </Box>
524
-
525
- <Box className="flex space-x-1 w-full mt-2">
526
- <Box>
527
- <LanguageIcon fill="#494A48" />
528
- </Box>
529
- <Box className="flex-1">
530
- <Typography className="!font-[600] !text-[16px]" color="#494A48">
531
- Language
532
- </Typography>
533
- <Typography className="!font-400 !text-[14px] pt-1" color="#494A48">
534
- Prefer language
535
- </Typography>
536
- <StyledSelect
537
- className="mt-1"
538
- fullWidth
539
- displayEmpty
540
- value={selectedLanguage}
541
- onChange={handleLanguageChange}
542
- renderValue={(selected) => {
543
- if (selected === "") {
544
- return <span style={{
545
- fontSize: '12.6px',
546
- fontWeight: '400',
547
- lineHeight: '25.2px',
548
- color: '#494A4899' }}>Auto-Detect</span>;
549
- }
550
- return <span style={{
551
- fontSize: '12.6px',
552
- fontWeight: '400',
553
- lineHeight: '25.2px',
554
- color: '#494A4899' }}>{languageList[selected]}</span>;
555
- }}
556
- MenuProps={{
557
- PaperProps: {
558
- sx: {
559
- marginTop: "5px",
560
- border: '0.9px solid #D8DEE4',
561
- padding: '5px',
562
- '& .MuiList-root': {
563
- padding: "unset"
564
- },
565
- '& .MuiMenuItem-root': {
566
- padding: "7.2px 9px",
567
- color: '#494A4899',
568
- fontFamily: 'Reddit Sans',
569
- fontSize: '12.6px',
570
- fontWeight: '400',
571
- lineHeight: '25.2px'
572
- }
573
- },
574
- },
575
- }}
576
- >
577
- <MenuItem value={0}>Auto-Detect</MenuItem>
578
- <MenuItem value={1}>English</MenuItem>
579
- <MenuItem value={2}>Chinese (Simplified)</MenuItem>
580
- </StyledSelect>
581
- </Box>
582
- </Box>
583
- </>
584
- }
585
-
586
- <StyledDialog
587
- onClose={handleClose}
588
- aria-labelledby="customized-dialog-title"
589
- open={open}
590
- >
591
- <Box className="flex items-center justify-between py-[8px]">
592
- <Box className="flex items-center space-x-1">
593
- <Box>
594
- <BookIcon />
595
- </Box>
596
- <Typography className="!font-[600] !text-[14px]" color="#494A48">
597
- Voice command instructions
598
- </Typography>
599
- </Box>
600
- <Box className="cursor-pointer" onClick={handleClose}>
601
- <SmallCloseIcon />
602
- </Box>
603
- </Box>
604
-
605
- <Box className="py-[8px]">
606
- <Typography className="!font-[600] !text-[12px]" color="#494A48">
607
- Tooth position (FDI)
608
- </Typography>
609
- <Box className="flex items-center py-[5px]">
610
- <StyledTypography>
611
- Upper
612
- </StyledTypography>
613
- <Typography className="!font-400 !text-[12px]" color="#494A48">
614
- /
615
- </Typography>
616
- <StyledTypography>
617
- Lower
618
- </StyledTypography>
619
- <Typography className="!font-400 !text-[14px]" color="#494A48">
620
- +
621
- </Typography>
622
- <StyledTypography>
623
- Left
624
- </StyledTypography>
625
- <Typography className="!font-400 !text-[12px]" color="#494A48">
626
- /
627
- </Typography>
628
- <StyledTypography>
629
- Right
630
- </StyledTypography>
631
- <Typography className="!font-400 !text-[14px]" color="#494A48">
632
- +
633
- </Typography>
634
- <StyledTypography>
635
- number
636
- </StyledTypography>
637
- <Typography className="!font-400 !text-[12px] pl-2" color="#494A48">
638
- Tooth position (FDI)
639
- </Typography>
640
- </Box>
641
- <Box className="flex items-center pt-[5px]">
642
- <StyledTypography>
643
- Jump
644
- </StyledTypography>
645
- <Typography className="!font-400 !text-[14px]" color="#494A48">
646
- +
647
- </Typography>
648
- <StyledTypography>
649
- number
650
- </StyledTypography>
651
- <Typography className="!font-400 !text-[12px] pl-2" color="#494A48">
652
- Jump to tooth(FDI)
653
- </Typography>
654
- </Box>
655
- </Box>
656
-
657
- <Box className="pb-[8px]">
658
- <Typography className="!font-[600] !text-[12px]" color="#494A48">
659
- Terminology
660
- </Typography>
661
- <Box className="flex items-center space-x-5 py-[5px]">
662
- <Box className="flex items-center space-x-2">
663
- <StyledTypography>
664
- Mobility
665
- </StyledTypography>
666
- <Typography className="!font-400 !text-[12px]" color="#494A48">
667
- Mobility
668
- </Typography>
669
- </Box>
670
- <Box className="flex items-center space-x-2">
671
- <StyledTypography>
672
- Furcation
673
- </StyledTypography>
674
- <Typography className="!font-400 !text-[12px]" color="#494A48">
675
- Furcation
676
- </Typography>
677
- </Box>
678
- </Box>
679
- <Box className="flex items-center space-x-5 py-[5px]">
680
- <Box className="flex items-center space-x-2">
681
- <StyledTypography>
682
- Bleeding
683
- </StyledTypography>
684
- <Typography className="!font-400 !text-[12px]" color="#494A48">
685
- Bleeding of point
686
- </Typography>
687
- </Box>
688
- <Box className="flex items-center space-x-2">
689
- <StyledTypography>
690
- Plaque
691
- </StyledTypography>
692
- <Typography className="!font-400 !text-[12px]" color="#494A48">
693
- Plaque of point
694
- </Typography>
695
- </Box>
696
- </Box>
697
- <Box className="flex items-center space-x-5 py-[5px]">
698
- <Box className="flex items-center space-x-2">
699
- <StyledTypography>
700
- Buccal
701
- </StyledTypography>
702
- <Typography className="!font-400 !text-[12px]" color="#494A48">
703
- Buccal
704
- </Typography>
705
- </Box>
706
- <Box className="flex items-center space-x-2">
707
- <StyledTypography>
708
- Lingual
709
- </StyledTypography>
710
- <Typography className="!font-400 !text-[12px]" color="#494A48">
711
- Lingual
712
- </Typography>
713
- </Box>
714
- </Box>
715
- </Box>
716
-
717
- <Box className="pb-[8px]">
718
- <Typography className="!font-[600] !text-[12px]" color="#494A48">
719
- Scenario 1
720
- </Typography>
721
- <Typography className="!font-[600] !text-[12px] px-[10px] pt-[5px]" color="#494A48">
722
- Measure the full mouth pocket depth, then bleeding and plaque
723
- </Typography>
724
- <Box className="flex items-center space-x-2 px-[10px] py-[5px]">
725
- <Box className="flex items-center space-x-1">
726
- <Box>
727
- <CommandIcon />
728
- </Box>
729
- <Typography className="!font-400 !text-[12px]" color="#494A48">
730
- Command:
731
- </Typography>
732
- </Box>
733
- <Box className="flex items-center">
734
- <StyledTypography>
735
- One
736
- </StyledTypography>
737
- <Typography className="!font-400 !text-[14px]" color="#494A48">
738
- +
739
- </Typography>
740
- <StyledTypography>
741
- Bleeding
742
- </StyledTypography>
743
- <Typography className="!font-400 !text-[14px]" color="#494A48">
744
- +
745
- </Typography>
746
- <StyledTypography>
747
- Plaque
748
- </StyledTypography>
749
- </Box>
750
- </Box>
751
- </Box>
752
-
753
- <Box className="pb-[8px]">
754
- <Typography className="!font-[600] !text-[12px]" color="#494A48">
755
- Scenario 2
756
- </Typography>
757
- <Typography className="!font-[600] !text-[12px] px-[10px] pt-[5px]" color="#494A48">
758
- Jump to specific tooth position and check implant, crown, missing
759
- </Typography>
760
- <Box className="flex items-center space-x-2 px-[10px] py-[5px]">
761
- <Box className="flex items-center space-x-1">
762
- <Box>
763
- <CommandIcon />
764
- </Box>
765
- <Typography className="!font-400 !text-[12px]" color="#494A48">
766
- Command:
767
- </Typography>
768
- </Box>
769
- <Box className="flex items-center">
770
- <StyledTypography>
771
- Jump
772
- </StyledTypography>
773
- <Typography className="!font-400 !text-[14px]" color="#494A48">
774
- +
775
- </Typography>
776
- <StyledTypography>
777
- Twenty-four
778
- </StyledTypography>
779
- <Typography className="!font-400 !text-[14px]" color="#494A48">
780
- +
781
- </Typography>
782
- <StyledTypography>
783
- Implant
784
- </StyledTypography>
785
- <Typography className="!font-400 !text-[12px]" color="#494A48">
786
- /
787
- </Typography>
788
- <StyledTypography>
789
- Crown
790
- </StyledTypography>
791
- <Typography className="!font-400 !text-[12px]" color="#494A48">
792
- /
793
- </Typography>
794
- <StyledTypography>
795
- Missing
796
- </StyledTypography>
797
- </Box>
798
- </Box>
799
- </Box>
800
-
801
- <Box className="pb-[8px]">
802
- <Typography className="!font-[600] !text-[12px]" color="#494A48">
803
- Scenario 3
804
- </Typography>
805
- <Typography className="!font-[600] !text-[12px] px-[10px] pt-[5px]" color="#494A48">
806
- Jump to specific tooth position and check buccal bleeding
807
- </Typography>
808
- <Box className="flex items-center space-x-2 px-[10px] py-[5px]">
809
- <Box className="flex items-center space-x-1">
810
- <Box>
811
- <CommandIcon />
812
- </Box>
813
- <Typography className="!font-400 !text-[12px]" color="#494A48">
814
- Command:
815
- </Typography>
816
- </Box>
817
- <Box className="flex items-center">
818
- <StyledTypography>
819
- Jump
820
- </StyledTypography>
821
- <Typography className="!font-400 !text-[14px]" color="#494A48">
822
- +
823
- </Typography>
824
- <StyledTypography>
825
- Seventeen
826
- </StyledTypography>
827
- <Typography className="!font-400 !text-[14px]" color="#494A48">
828
- +
829
- </Typography>
830
- <StyledTypography>
831
- Buccal
832
- </StyledTypography>
833
- <Typography className="!font-400 !text-[14px]" color="#494A48">
834
- +
835
- </Typography>
836
- <StyledTypography>
837
- Bleeding
838
- </StyledTypography>
839
- </Box>
840
- </Box>
841
- <Typography className="!font-[600] !text-[12px] px-[10px] pt-[5px]" color="#494A48">
842
- Jump to specific tooth position and check mobility II
843
- </Typography>
844
- <Box className="flex items-center space-x-2 px-[10px] py-[5px]">
845
- <Box className="flex items-center space-x-1">
846
- <Box>
847
- <CommandIcon />
848
- </Box>
849
- <Typography className="!font-400 !text-[12px]" color="#494A48">
850
- Command:
851
- </Typography>
852
- </Box>
853
- <Box className="flex items-center">
854
- <StyledTypography>
855
- Jump
856
- </StyledTypography>
857
- <Typography className="!font-400 !text-[14px]" color="#494A48">
858
- +
859
- </Typography>
860
- <StyledTypography>
861
- Thirty-three
862
- </StyledTypography>
863
- <Typography className="!font-400 !text-[14px]" color="#494A48">
864
- +
865
- </Typography>
866
- <StyledTypography>
867
- Lingual
868
- </StyledTypography>
869
- <Typography className="!font-400 !text-[14px]" color="#494A48">
870
- +
871
- </Typography>
872
- <StyledTypography>
873
- Mobility
874
- </StyledTypography>
875
- <Typography className="!font-400 !text-[14px]" color="#494A48">
876
- +
877
- </Typography>
878
- <StyledTypography>
879
- Two
880
- </StyledTypography>
881
- </Box>
882
- </Box>
883
- </Box>
884
- </StyledDialog>
885
-
886
- <Popover
887
- open={openAnchorEl}
888
- anchorEl={anchorEl}
889
- onClose={handlePopoverClose}
890
- anchorOrigin={{
891
- vertical: 'bottom',
892
- horizontal: 'right',
893
- }}
894
- transformOrigin={{
895
- vertical: 'top',
896
- horizontal: 'right',
897
- }}
898
- sx={{
899
- '& .MuiPaper-root': {
900
- boxShadow: 'none',
901
- border: '1px solid #D8DEE4',
902
- borderRadius: '5px',
903
- marginTop: '5px'
904
- }
905
- }}
906
- >
907
- <Box className="px-[5px] py-[2.5px] w-[200px]">
908
- <Box className="flex items-center px-[10px] py-[3px]">
909
- <Typography className="!font-bold !text-[14px]" color="#494A48B2">
910
- Data
911
- </Typography>
912
- </Box>
913
- <Box
914
- className="flex items-center justify-between rounded-[5px] px-[10px] py-[3px] cursor-pointer"
915
- sx={{
916
- '&:hover': {
917
- background: '#F6F6F6'
918
- }
919
- }}
920
- >
921
- <Box className="flex items-center space-x-1">
922
- <Typography className="!font-bold !text-[14px]" color="#494A48">
923
- 7
924
- </Typography>
925
- <Typography className="!font-400 !text-[12px]" color="#494A48">
926
- words
927
- </Typography>
928
- </Box>
929
- <Typography className="!font-400 !text-[14px]" color="#494A48">
930
- 02.July.2024
931
- </Typography>
932
- </Box>
933
- <Box className="flex items-center justify-between px-[10px] py-[3px]">
934
- <Box className="flex items-center space-x-1">
935
- <Typography className="!font-bold !text-[14px]" color="#494A48">
936
- 7
937
- </Typography>
938
- <Typography className="!font-400 !text-[12px]" color="#494A48">
939
- words
940
- </Typography>
941
- </Box>
942
- <Typography className="!font-400 !text-[14px]" color="#494A48">
943
- 02.July.2024
944
- </Typography>
945
- </Box>
946
- </Box>
947
- </Popover>
948
- </Box>
949
- );
950
- };
951
-
952
- export default Recognition;