61 |
62 |
63 |
64 | To get started, choose a transcription model
65 |
66 |
67 |
68 |
69 | {error && (
70 |
73 | )}
74 |
75 | {/*
*/}
76 |
77 | {availableModels
78 | .filter((model) => getRecommendedBadge(model.id))
79 | .map((model) => (
80 |
87 | ))}
88 |
89 | {availableModels
90 | .filter((model) => !getRecommendedBadge(model.id))
91 | .sort((a, b) => Number(a.size_mb) - Number(b.size_mb))
92 | .map((model) => (
93 |
99 | ))}
100 |
101 |
102 |
103 | );
104 | };
105 |
106 | export default Onboarding;
107 |
--------------------------------------------------------------------------------
/src/components/ui/Dropdown.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useRef, useState } from "react";
2 |
3 | export interface DropdownOption {
4 | value: string;
5 | label: string;
6 | disabled?: boolean;
7 | }
8 |
9 | interface DropdownProps {
10 | options: DropdownOption[];
11 | className?: string;
12 | selectedValue: string | null;
13 | onSelect: (value: string) => void;
14 | placeholder?: string;
15 | disabled?: boolean;
16 | onRefresh?: () => void;
17 | }
18 |
19 | export const Dropdown: React.FC
= ({
20 | options,
21 | selectedValue,
22 | onSelect,
23 | className = "",
24 | placeholder = "Select an option...",
25 | disabled = false,
26 | onRefresh,
27 | }) => {
28 | const [isOpen, setIsOpen] = useState(false);
29 | const dropdownRef = useRef(null);
30 |
31 | useEffect(() => {
32 | const handleClickOutside = (event: MouseEvent) => {
33 | if (
34 | dropdownRef.current &&
35 | !dropdownRef.current.contains(event.target as Node)
36 | ) {
37 | setIsOpen(false);
38 | }
39 | };
40 | document.addEventListener("mousedown", handleClickOutside);
41 | return () => document.removeEventListener("mousedown", handleClickOutside);
42 | }, []);
43 |
44 | const selectedOption = options.find(
45 | (option) => option.value === selectedValue,
46 | );
47 |
48 | const handleSelect = (value: string) => {
49 | onSelect(value);
50 | setIsOpen(false);
51 | };
52 |
53 | const handleToggle = () => {
54 | if (disabled) return;
55 | if (!isOpen && onRefresh) onRefresh();
56 | setIsOpen(!isOpen);
57 | };
58 |
59 | return (
60 |
61 |
86 | {isOpen && !disabled && (
87 |
88 | {options.length === 0 ? (
89 |
90 | No options found
91 |
92 | ) : (
93 | options.map((option) => (
94 |
107 | ))
108 | )}
109 |
110 | )}
111 |
55 | setNewWord(e.target.value)}
60 | onKeyDown={handleKeyPress}
61 | placeholder="Add a word"
62 | variant="compact"
63 | disabled={isUpdating("custom_words")}
64 | />
65 |
78 |
79 |
80 | {customWords.length > 0 && (
81 |
84 | {customWords.map((word) => (
85 |
109 | ))}
110 |