-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Change default keyboard shortcuts; update Readme and add link in Conf…
…ig tab to change the shortcuts
- Loading branch information
1 parent
40bba02
commit aca0246
Showing
13 changed files
with
198 additions
and
113 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
83 changes: 83 additions & 0 deletions
83
src/sidePanel/components/SidePanel/tabs/ConfigTab/ApiKeySection/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,83 @@ | ||
| import { useAtom } from "jotai"; | ||
| import { useCallback, useRef, useState } from "react"; | ||
|
|
||
| import { Button } from "sidePanel/components/Button"; | ||
| import TextInput from "sidePanel/components/TextInput"; | ||
| import { openaiApiKeyAtom } from "sidePanel/utils/atoms"; | ||
| import { getAllNonCharacterKeys } from "sidePanel/utils/helpers"; | ||
| import { saveOpenaiApiKey } from "utils/helpers"; | ||
|
|
||
| import { SectionContainer, SubmitButtonContainer } from "./styled"; | ||
|
|
||
| const ApiKeySection = () => { | ||
| const [openaiApiKey, setOpenaiApiKey] = useAtom(openaiApiKeyAtom); | ||
| const [inputValue, setInputValue] = useState(openaiApiKey); | ||
| const textInputRef = useRef<HTMLInputElement>(null); | ||
|
|
||
| const saveApiKey = useCallback(() => { | ||
| const value = textInputRef.current?.value || ""; | ||
|
|
||
| saveOpenaiApiKey(value.trim()).then((maskedKey) => { | ||
| setInputValue(maskedKey); | ||
| setOpenaiApiKey(maskedKey); | ||
| }); | ||
| }, [setInputValue, setOpenaiApiKey]); | ||
|
|
||
| const inputMasked = inputValue.includes("...") && inputValue === openaiApiKey; | ||
|
|
||
| const isApiKeySubmitDisabled = useCallback( | ||
| () => inputMasked || inputValue === openaiApiKey, | ||
| [openaiApiKey, inputMasked, inputValue] | ||
| ); | ||
|
|
||
| const onKeyDown = useCallback( | ||
| (e: React.KeyboardEvent<HTMLInputElement>) => { | ||
| if (e.key === "Enter" && !isApiKeySubmitDisabled()) { | ||
| e.preventDefault(); | ||
| saveApiKey(); | ||
| } | ||
|
|
||
| const characterKeyPressed = | ||
| !getAllNonCharacterKeys().includes(e.key) && !e.ctrlKey && !e.metaKey; | ||
|
|
||
| if (inputMasked && characterKeyPressed) { | ||
| try { | ||
| /* document.execCommand is used to allow the built-in "undo" action to revert this input change. | ||
| * It is deprecated, but works for now. Might need to replaced in the future. */ | ||
| textInputRef.current?.focus(); | ||
| textInputRef.current?.select(); | ||
| document.execCommand("delete"); | ||
| } catch (err) { | ||
| console.debug( | ||
| "[Cumuli] Failed to call document.execCommand('delete') on the input" | ||
| ); | ||
| setInputValue(""); | ||
| } | ||
| } | ||
| }, | ||
| [isApiKeySubmitDisabled, inputMasked, saveApiKey] | ||
| ); | ||
|
|
||
| const onChange = useCallback((value: string) => setInputValue(value), []); | ||
|
|
||
| return ( | ||
| <SectionContainer> | ||
| <TextInput | ||
| label="OpenAI API Key" | ||
| value={inputValue} | ||
| onChange={onChange} | ||
| onKeyDown={onKeyDown} | ||
| placeholder="Enter OpenAI API Key" | ||
| showSavedStatus={inputValue === openaiApiKey} | ||
| textInputRef={textInputRef} | ||
| /> | ||
| <SubmitButtonContainer> | ||
| <Button onClick={saveApiKey} disabled={isApiKeySubmitDisabled()}> | ||
| Submit | ||
| </Button> | ||
| </SubmitButtonContainer> | ||
| </SectionContainer> | ||
| ); | ||
| }; | ||
|
|
||
| export default ApiKeySection; |
11 changes: 11 additions & 0 deletions
11
src/sidePanel/components/SidePanel/tabs/ConfigTab/ApiKeySection/styled.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| import styled from "styled-components"; | ||
|
|
||
| export const SectionContainer = styled.div` | ||
| display: flex; | ||
| align-items: end; | ||
| justify-content: space-between; | ||
| `; | ||
|
|
||
| export const SubmitButtonContainer = styled.div` | ||
| margin-left: 8px; | ||
| `; |
20 changes: 20 additions & 0 deletions
20
src/sidePanel/components/SidePanel/tabs/ConfigTab/ChangeKeyboardShortcutsSection/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| import { ButtonLabel, ChangeShortcutsButton, SectionContainer } from "./styled"; | ||
|
|
||
| const ChangeKeyboardShortcutsSection = () => { | ||
| return ( | ||
| <SectionContainer> | ||
| <ButtonLabel> | ||
| Keyboard shortcuts are customizable in the extension settings | ||
| </ButtonLabel> | ||
| <ChangeShortcutsButton | ||
| onClick={() => | ||
| chrome.tabs.create({ url: "chrome://extensions/shortcuts" }) | ||
| } | ||
| > | ||
| Change keyboard shortcuts | ||
| </ChangeShortcutsButton> | ||
| </SectionContainer> | ||
| ); | ||
| }; | ||
|
|
||
| export default ChangeKeyboardShortcutsSection; |
18 changes: 18 additions & 0 deletions
18
src/sidePanel/components/SidePanel/tabs/ConfigTab/ChangeKeyboardShortcutsSection/styled.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| import styled from "styled-components"; | ||
|
|
||
| import { SecondaryButton } from "sidePanel/components/Button"; | ||
| import { FONT_SIZE_SECONDARY } from "sidePanel/globalStyles"; | ||
|
|
||
| export const SectionContainer = styled.div` | ||
| margin-top: 35px; | ||
| `; | ||
|
|
||
| export const ButtonLabel = styled.div` | ||
| margin-bottom: 5px; | ||
| color: ${({ theme }) => theme.colors.HELP_TEXT}; | ||
| font-size: ${FONT_SIZE_SECONDARY}; | ||
| `; | ||
|
|
||
| export const ChangeShortcutsButton = styled(SecondaryButton)` | ||
| width: 247px; | ||
| `; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
85 changes: 5 additions & 80 deletions
85
src/sidePanel/components/SidePanel/tabs/ConfigTab/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.