add export & link to beta
This commit is contained in:
		| @@ -192,7 +192,7 @@ export default function MessageInput(props: MessageInputProps) { | |||||||
|     }, [initialMessage, transcript, recording, transcribing, useOpenAIWhisper, dispatch]); |     }, [initialMessage, transcript, recording, transcribing, useOpenAIWhisper, dispatch]); | ||||||
|  |  | ||||||
|     const onKeyDown = useCallback((e: React.KeyboardEvent<HTMLTextAreaElement>) => { |     const onKeyDown = useCallback((e: React.KeyboardEvent<HTMLTextAreaElement>) => { | ||||||
|         if(e.key === 'Enter' && e.shiftKey === false && !props.disabled && isEnterToSend) { |         if(e.key === 'Enter' && e.shiftKey === false && !props.disabled) { | ||||||
|             e.preventDefault(); |             e.preventDefault(); | ||||||
|             onSubmit(); |             onSubmit(); | ||||||
|         } |         } | ||||||
| @@ -276,9 +276,6 @@ export default function MessageInput(props: MessageInputProps) { | |||||||
|                 rightSectionWidth={context.generating ? 100 : 55} |                 rightSectionWidth={context.generating ? 100 : 55} | ||||||
|                 onKeyDown={onKeyDown} /> |                 onKeyDown={onKeyDown} /> | ||||||
|             <div className="bottom"> |             <div className="bottom"> | ||||||
|                 <Center> |  | ||||||
|                     <Checkbox size="xs" label="Enter to send" checked={!isEnterToSend} onChange={(v) => setIsEnterToSend(!v.currentTarget.checked)}/> |  | ||||||
|                 </Center> |  | ||||||
|                 <Group my="sm" spacing="xs"> |                 <Group my="sm" spacing="xs"> | ||||||
|                     <Button variant="subtle" |                     <Button variant="subtle" | ||||||
|                         className="settings-button" |                         className="settings-button" | ||||||
|   | |||||||
| @@ -35,6 +35,11 @@ export default function LandingPage(props: any) { | |||||||
|                     <FormattedMessage defaultMessage={'Connect your OpenAI account to get started'} /> |                     <FormattedMessage defaultMessage={'Connect your OpenAI account to get started'} /> | ||||||
|                 </Button> |                 </Button> | ||||||
|             )} |             )} | ||||||
|  |             <p> | ||||||
|  |                 <Button size="xs" variant="light" component="a" href="https://www.chatwithgpt.ai" target="_blank"> | ||||||
|  |                     Try the new beta app<i style={{ marginLeft: '0.5rem' }} className="fa fa-arrow-up-right-from-square" /> | ||||||
|  |                 </Button> | ||||||
|  |             </p> | ||||||
|         </Container> |         </Container> | ||||||
|     </Page>; |     </Page>; | ||||||
| } | } | ||||||
|   | |||||||
| @@ -1,12 +1,14 @@ | |||||||
| import SettingsTab from "./tab"; | import SettingsTab from "./tab"; | ||||||
| import SettingsOption from "./option"; | import SettingsOption from "./option"; | ||||||
| import { Checkbox, TextInput } from "@mantine/core"; | import { Button, Checkbox, TextInput } from "@mantine/core"; | ||||||
| import { useCallback, useMemo } from "react"; | import { useCallback, useMemo } from "react"; | ||||||
| import { useAppDispatch, useAppSelector } from "../../store"; | import { useAppDispatch, useAppSelector } from "../../store"; | ||||||
| import { selectOpenAIApiKey, setOpenAIApiKeyFromEvent, selectUseOpenAIWhisper, setUseOpenAIWhisperFromEvent } from "../../store/api-keys"; | import { selectOpenAIApiKey, setOpenAIApiKeyFromEvent, selectUseOpenAIWhisper, setUseOpenAIWhisperFromEvent } from "../../store/api-keys"; | ||||||
| import { selectSettingsOption } from "../../store/settings-ui"; | import { selectSettingsOption } from "../../store/settings-ui"; | ||||||
| import { FormattedMessage, useIntl } from "react-intl"; | import { FormattedMessage, useIntl } from "react-intl"; | ||||||
| import { supportsSpeechRecognition } from "../../speech-recognition-types"; | import { supportsSpeechRecognition } from "../../speech-recognition-types"; | ||||||
|  | import { useAppContext } from "../../context"; | ||||||
|  | import { serializeChat } from "../../types"; | ||||||
|  |  | ||||||
| export default function UserOptionsTab(props: any) { | export default function UserOptionsTab(props: any) { | ||||||
|     const option = useAppSelector(selectSettingsOption); |     const option = useAppSelector(selectSettingsOption); | ||||||
| @@ -18,8 +20,35 @@ export default function UserOptionsTab(props: any) { | |||||||
|     const onOpenAIApiKeyChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => dispatch(setOpenAIApiKeyFromEvent(event)), [dispatch]); |     const onOpenAIApiKeyChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => dispatch(setOpenAIApiKeyFromEvent(event)), [dispatch]); | ||||||
|     const onUseOpenAIWhisperChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => dispatch(setUseOpenAIWhisperFromEvent(event)), [dispatch]); |     const onUseOpenAIWhisperChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => dispatch(setUseOpenAIWhisperFromEvent(event)), [dispatch]); | ||||||
|  |  | ||||||
|  |     const context = useAppContext(); | ||||||
|  |     const getData = useCallback(async () => { | ||||||
|  |         const chats = Array.from(context.chat.chats.values()); | ||||||
|  |         return chats.map(chat => ({ | ||||||
|  |             ...chat, | ||||||
|  |             messages: chat.messages.serialize(), | ||||||
|  |         })); | ||||||
|  |     }, [context.chat]); | ||||||
|  |  | ||||||
|  |     const handleExport = useCallback(async () => { | ||||||
|  |         const data = await getData(); | ||||||
|  |         const json = JSON.stringify(data); | ||||||
|  |         const blob = new Blob([json], { type: "application/json" }); | ||||||
|  |         const url = URL.createObjectURL(blob); | ||||||
|  |         const link = document.createElement("a"); | ||||||
|  |         link.href = url; | ||||||
|  |         link.download = "chat-with-gpt.json"; | ||||||
|  |         link.click(); | ||||||
|  |     }, [getData]); | ||||||
|  |  | ||||||
|     const elem = useMemo(() => ( |     const elem = useMemo(() => ( | ||||||
|         <SettingsTab name="user"> |         <SettingsTab name="user"> | ||||||
|  |             <SettingsOption heading="Export"> | ||||||
|  |                 <div> | ||||||
|  |                     <Button variant="light" onClick={handleExport} style={{ | ||||||
|  |                         marginRight: '1rem', | ||||||
|  |                     }}>Export</Button> | ||||||
|  |                 </div> | ||||||
|  |             </SettingsOption> | ||||||
|             <SettingsOption heading={intl.formatMessage({ defaultMessage: "Your OpenAI API Key", description: "Heading for the OpenAI API key setting on the settings screen" })} |             <SettingsOption heading={intl.formatMessage({ defaultMessage: "Your OpenAI API Key", description: "Heading for the OpenAI API key setting on the settings screen" })} | ||||||
|                 focused={option === 'openai-api-key'}> |                 focused={option === 'openai-api-key'}> | ||||||
|                 <TextInput |                 <TextInput | ||||||
|   | |||||||
		Reference in New Issue
	
	Block a user