-
Notifications
You must be signed in to change notification settings - Fork 76
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor: adjust directory structure
- Loading branch information
Showing
25 changed files
with
380 additions
and
350 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
4 changes: 2 additions & 2 deletions
4
src/background/chatgpt-web.mjs → src/background/apis/chatgpt-web.mjs
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
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,155 @@ | ||
| import { memo, useEffect, useState } from 'react' | ||
| import PropTypes from 'prop-types' | ||
| import Browser from 'webextension-polyfill' | ||
| import InputBox from '../InputBox' | ||
| import ConversationItem from '../ConversationItem' | ||
| import { isSafari } from '../../utils' | ||
|
|
||
| class ConversationItemData extends Object { | ||
| /** | ||
| * @param {'question'|'answer'|'error'} type | ||
| * @param {string} content | ||
| */ | ||
| constructor(type, content) { | ||
| super() | ||
| this.type = type | ||
| this.content = content | ||
| this.session = null | ||
| this.done = false | ||
| } | ||
| } | ||
|
|
||
| function ConversationCardForSearch(props) { | ||
| /** | ||
| * @type {[ConversationItemData[], (conversationItemData: ConversationItemData[]) => void]} | ||
| */ | ||
| const [conversationItemData, setConversationItemData] = useState([ | ||
| new ConversationItemData('answer', '<p class="gpt-loading">Waiting for response...</p>'), | ||
| ]) | ||
| const [isReady, setIsReady] = useState(false) | ||
| const [port, setPort] = useState(() => Browser.runtime.connect()) | ||
|
|
||
| useEffect(() => { | ||
| window.session.question = props.question | ||
| port.postMessage({ session: window.session }) | ||
| }, [props.question]) // usually only triggered once | ||
|
|
||
| /** | ||
| * @param {string} value | ||
| * @param {boolean} appended | ||
| * @param {'question'|'answer'|'error'} newType | ||
| * @param {boolean} done | ||
| */ | ||
| const UpdateAnswer = (value, appended, newType, done = false) => { | ||
| setConversationItemData((old) => { | ||
| const copy = [...old] | ||
| const index = copy.findLastIndex((v) => v.type === 'answer') | ||
| if (index === -1) return copy | ||
| copy[index] = new ConversationItemData( | ||
| newType, | ||
| appended ? copy[index].content + value : value, | ||
| ) | ||
| copy[index].session = { ...window.session } | ||
| copy[index].done = done | ||
| return copy | ||
| }) | ||
| } | ||
|
|
||
| useEffect(() => { | ||
| const listener = () => { | ||
| setPort(Browser.runtime.connect()) | ||
| } | ||
| port.onDisconnect.addListener(listener) | ||
| return () => { | ||
| port.onDisconnect.removeListener(listener) | ||
| } | ||
| }, [port]) | ||
| useEffect(() => { | ||
| const listener = (msg) => { | ||
| if (msg.answer) { | ||
| UpdateAnswer(msg.answer, false, 'answer') | ||
| } | ||
| if (msg.session) { | ||
| window.session = msg.session | ||
| } | ||
| if (msg.done) { | ||
| UpdateAnswer('\n<hr>', true, 'answer', true) | ||
| setIsReady(true) | ||
| } | ||
| if (msg.error) { | ||
| switch (msg.error) { | ||
| case 'UNAUTHORIZED': | ||
| UpdateAnswer( | ||
| `UNAUTHORIZED<br>Please login at https://chat.openai.com first${ | ||
| isSafari() ? '<br>Then open https://chat.openai.com/api/auth/session' : '' | ||
| }<br>And refresh this page or type you question again`, | ||
| false, | ||
| 'error', | ||
| ) | ||
| break | ||
| case 'CLOUDFLARE': | ||
| UpdateAnswer( | ||
| `OpenAI Security Check Required<br>Please open ${ | ||
| isSafari() ? 'https://chat.openai.com/api/auth/session' : 'https://chat.openai.com' | ||
| }<br>And refresh this page or type you question again`, | ||
| false, | ||
| 'error', | ||
| ) | ||
| break | ||
| default: | ||
| setConversationItemData([ | ||
| ...conversationItemData, | ||
| new ConversationItemData('error', msg.error + '\n<hr>'), | ||
| ]) | ||
| break | ||
| } | ||
| setIsReady(true) | ||
| } | ||
| } | ||
| port.onMessage.addListener(listener) | ||
| return () => { | ||
| port.onMessage.removeListener(listener) | ||
| } | ||
| }, [conversationItemData]) | ||
|
|
||
| return ( | ||
| <div className="gpt-inner"> | ||
| <div className="markdown-body"> | ||
| {conversationItemData.map((data, idx) => ( | ||
| <ConversationItem | ||
| content={data.content} | ||
| key={idx} | ||
| type={data.type} | ||
| session={data.session} | ||
| done={data.done} | ||
| /> | ||
| ))} | ||
| </div> | ||
| <InputBox | ||
| enabled={isReady} | ||
| onSubmit={(question) => { | ||
| const newQuestion = new ConversationItemData('question', '**You:**\n' + question) | ||
| const newAnswer = new ConversationItemData( | ||
| 'answer', | ||
| '<p class="gpt-loading">Waiting for response...</p>', | ||
| ) | ||
| setConversationItemData([...conversationItemData, newQuestion, newAnswer]) | ||
| setIsReady(false) | ||
|
|
||
| window.session.question = question | ||
| try { | ||
| port.postMessage({ session: window.session }) | ||
| } catch (e) { | ||
| UpdateAnswer(e, false, 'error') | ||
| } | ||
| }} | ||
| /> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| ConversationCardForSearch.propTypes = { | ||
| question: PropTypes.string.isRequired, | ||
| } | ||
|
|
||
| export default memo(ConversationCardForSearch) |
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,59 @@ | ||
| import { useState } from 'react' | ||
| import FeedbackForChatGPTWeb from '../FeedbackForChatGPTWeb' | ||
| import { ChevronDownIcon, LinkExternalIcon, XCircleIcon } from '@primer/octicons-react' | ||
| import CopyButton from '../CopyButton' | ||
| import PropTypes from 'prop-types' | ||
| import MarkdownRender from '../MarkdownRender/markdown.jsx' | ||
|
|
||
| export function ConversationItem({ type, content, session, done }) { | ||
| const [collapsed, setCollapsed] = useState(false) | ||
|
|
||
| return ( | ||
| <div className={type} dir="auto"> | ||
| {type === 'answer' && ( | ||
| <div className="gpt-header"> | ||
| <p>{session ? 'ChatGPT:' : 'Loading...'}</p> | ||
| <div style="display: flex; gap: 15px;"> | ||
| {done && !session.useApiKey && ( | ||
| <FeedbackForChatGPTWeb | ||
| messageId={session.messageId} | ||
| conversationId={session.conversationId} | ||
| /> | ||
| )} | ||
| {session && session.conversationId && !session.useApiKey && ( | ||
| <a | ||
| title="Continue on official website" | ||
| href={'https://chat.openai.com/chat/' + session.conversationId} | ||
| target="_blank" | ||
| rel="nofollow noopener noreferrer" | ||
| style="color: inherit;" | ||
| > | ||
| <LinkExternalIcon size={14} /> | ||
| </a> | ||
| )} | ||
| {session && <CopyButton contentFn={() => content} size={14} />} | ||
| {!collapsed ? ( | ||
| <span title="Collapse" className="gpt-util-icon" onClick={() => setCollapsed(true)}> | ||
| <XCircleIcon size={14} /> | ||
| </span> | ||
| ) : ( | ||
| <span title="Expand" className="gpt-util-icon" onClick={() => setCollapsed(false)}> | ||
| <ChevronDownIcon size={14} /> | ||
| </span> | ||
| )} | ||
| </div> | ||
| </div> | ||
| )} | ||
| {!collapsed && <MarkdownRender>{content}</MarkdownRender>} | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| ConversationItem.propTypes = { | ||
| type: PropTypes.oneOf(['question', 'answer', 'error']).isRequired, | ||
| content: PropTypes.string.isRequired, | ||
| session: PropTypes.object.isRequired, | ||
| done: PropTypes.bool.isRequired, | ||
| } | ||
|
|
||
| export default ConversationItem |
File renamed without changes.
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.