extension code updated
This commit is contained in:
n4ze3m
parent
6bc176ef44
commit
a3535bb5c5
@ -88,10 +88,12 @@ const main = async () => {
|
||||
} else if (event.data === "pageassist-html") {
|
||||
console.log("pageassist-html");
|
||||
let html = document.documentElement.outerHTML;
|
||||
let url = window.location.href;
|
||||
|
||||
iframe.contentWindow.postMessage({
|
||||
type: "pageassist-html",
|
||||
html: html,
|
||||
url: url,
|
||||
}, "*");
|
||||
}
|
||||
});
|
||||
|
||||
@ -21,7 +21,8 @@
|
||||
"react": "18.2.0",
|
||||
"react-dom": "18.2.0",
|
||||
"react-markdown": "^8.0.6",
|
||||
"react-router-dom": "^6.10.0"
|
||||
"react-router-dom": "^6.10.0",
|
||||
"react-toastify": "^9.1.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@plasmohq/prettier-plugin-sort-imports": "3.6.3",
|
||||
|
||||
19
extension/pnpm-lock.yaml
generated
19
extension/pnpm-lock.yaml
generated
@ -37,6 +37,9 @@ dependencies:
|
||||
react-router-dom:
|
||||
specifier: ^6.10.0
|
||||
version: 6.10.0(react-dom@18.2.0)(react@18.2.0)
|
||||
react-toastify:
|
||||
specifier: ^9.1.2
|
||||
version: 9.1.2(react-dom@18.2.0)(react@18.2.0)
|
||||
|
||||
devDependencies:
|
||||
'@plasmohq/prettier-plugin-sort-imports':
|
||||
@ -2903,6 +2906,11 @@ packages:
|
||||
engines: {node: '>=0.8'}
|
||||
dev: false
|
||||
|
||||
/clsx@1.2.1:
|
||||
resolution: {integrity: sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==}
|
||||
engines: {node: '>=6'}
|
||||
dev: false
|
||||
|
||||
/color-convert@1.9.3:
|
||||
resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
|
||||
dependencies:
|
||||
@ -5122,6 +5130,17 @@ packages:
|
||||
react: 18.2.0
|
||||
dev: false
|
||||
|
||||
/react-toastify@9.1.2(react-dom@18.2.0)(react@18.2.0):
|
||||
resolution: {integrity: sha512-PBfzXO5jMGEtdYR5jxrORlNZZe/EuOkwvwKijMatsZZm8IZwLj01YvobeJYNjFcA6uy6CVrx2fzL9GWbhWPTDA==}
|
||||
peerDependencies:
|
||||
react: '>=16'
|
||||
react-dom: '>=16'
|
||||
dependencies:
|
||||
clsx: 1.2.1
|
||||
react: 18.2.0
|
||||
react-dom: 18.2.0(react@18.2.0)
|
||||
dev: false
|
||||
|
||||
/react@18.2.0:
|
||||
resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==}
|
||||
engines: {node: '>=0.10.0'}
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
|
||||
import { MemoryRouter } from "react-router-dom"
|
||||
import { Routing } from "~routes"
|
||||
|
||||
import { ToastContainer } from 'react-toastify';
|
||||
import 'react-toastify/dist/ReactToastify.css';
|
||||
|
||||
const queryClient = new QueryClient()
|
||||
|
||||
@ -10,6 +11,7 @@ function IndexPopup() {
|
||||
<MemoryRouter>
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<Routing />
|
||||
<ToastContainer />
|
||||
</QueryClientProvider>
|
||||
</MemoryRouter>
|
||||
)
|
||||
|
||||
@ -13,6 +13,9 @@ import axios from "axios"
|
||||
import logoImage from "data-base64:~assets/icon.png"
|
||||
import ReactMarkdown from "react-markdown"
|
||||
import { Link, useNavigate } from "react-router-dom"
|
||||
import { toast } from "react-toastify"
|
||||
|
||||
import { useStorage } from "@plasmohq/storage/hook"
|
||||
|
||||
function Chat() {
|
||||
type Message = {
|
||||
@ -33,6 +36,7 @@ function Chat() {
|
||||
])
|
||||
|
||||
const [history, setHistory] = useState<History[]>([])
|
||||
const [userToken] = useStorage("pa-token", null)
|
||||
|
||||
const route = useNavigate()
|
||||
|
||||
@ -53,25 +57,55 @@ function Chat() {
|
||||
return new Promise((resolve, reject) => {
|
||||
window.addEventListener("message", (event) => {
|
||||
if (event.data.type === "pageassist-html") {
|
||||
resolve(event.data.html)
|
||||
resolve(event.data)
|
||||
} else {
|
||||
reject("Error")
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
const sendToBot = async (message: string) => {
|
||||
const html = await getHtmlFromParent()
|
||||
|
||||
const response = await axios.post(process.env.PLASMO_PUBLIC_API_URL!, {
|
||||
const sendToBot = async (message: string) => {
|
||||
// @ts-ignore
|
||||
const { html } = await getHtmlFromParent()
|
||||
|
||||
const response = await axios.post(
|
||||
`${process.env.PLASMO_PUBLIC_API_URL}/chat/chrome`,
|
||||
{
|
||||
user_message: message,
|
||||
html: html,
|
||||
history: history
|
||||
})
|
||||
}
|
||||
)
|
||||
|
||||
return response.data
|
||||
}
|
||||
|
||||
const onSave = async () => {
|
||||
const data = await getHtmlFromParent()
|
||||
const response = await axios.post(
|
||||
`${process.env.PLASMO_PUBLIC_API_URL}/user/save`,
|
||||
data,
|
||||
{
|
||||
headers: {
|
||||
"x-auth-token": userToken
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
return response.data
|
||||
}
|
||||
|
||||
const { mutateAsync: saveAsync, isLoading: isSaving } = useMutation(onSave, {
|
||||
onSuccess: (data) => {
|
||||
toast.success("Saved Successfully")
|
||||
},
|
||||
onError: (er) => {
|
||||
console.log(er)
|
||||
toast.error("Error in saving")
|
||||
}
|
||||
})
|
||||
|
||||
const { mutateAsync: sendToBotAsync, isLoading: isSending } = useMutation(
|
||||
sendToBot,
|
||||
{
|
||||
@ -125,14 +159,15 @@ function Chat() {
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex items-center rounded-md border border-transparent bg-white px-3 py-2 text-sm font-medium leading-4 text-gray-800 hover:text-gray-500 shadow-sm hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
|
||||
onClick={() => {
|
||||
onClick={async () => {
|
||||
// Send data to the app
|
||||
await saveAsync()
|
||||
}}>
|
||||
<ArrowUpOnSquareIcon
|
||||
className="-ml-1 mr-3 h-5 w-5"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
Send to App
|
||||
{isSaving ? "Saving..." : "Send to App"}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
@ -205,14 +240,49 @@ function Chat() {
|
||||
form.reset()
|
||||
await sendToBotAsync(values.message)
|
||||
})}>
|
||||
<div className="flex-grow space-y-6">
|
||||
<div className="flex">
|
||||
<span className="mr-3">
|
||||
<button
|
||||
disabled={isSending || isSaving}
|
||||
onClick={() => {
|
||||
setHistory([])
|
||||
setMessages([
|
||||
{
|
||||
message: "Hi, I'm PageAssist. How can I help you?",
|
||||
isBot: true
|
||||
}
|
||||
])
|
||||
}}
|
||||
className="inline-flex items-center rounded-md border border-gray-700 bg-white px-3 h-10 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-offset-2"
|
||||
type="button">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
className="h-5 w-5 text-gray-600">
|
||||
<path d="M18.37 2.63 14 7l-1.59-1.59a2 2 0 0 0-2.82 0L8 7l9 9 1.59-1.59a2 2 0 0 0 0-2.82L17 10l4.37-4.37a2.12 2.12 0 1 0-3-3Z"></path>
|
||||
<path d="M9 8c-2 3-4 3.5-7 4l8 10c2-1 6-5 6-7"></path>
|
||||
<path d="M14.5 17.5 4.5 15"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</span>
|
||||
<div className="flex-grow">
|
||||
<input
|
||||
disabled={isSending}
|
||||
disabled={isSending || isSaving}
|
||||
className="flex items-center h-10 w-full rounded px-3 text-sm"
|
||||
type="text"
|
||||
required
|
||||
placeholder="Type your message…"
|
||||
{...form.getInputProps("message")}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -21,7 +21,7 @@ export default function Login() {
|
||||
|
||||
const onSubmit = async (token: string) => {
|
||||
const response = await axios.post(
|
||||
`${process.env.PLASMO_PUBLIC_CLIENT_URL}/api/verify`,
|
||||
`${process.env.PLASMO_PUBLIC_API_URL}/user/validate`,
|
||||
{
|
||||
token
|
||||
}
|
||||
@ -39,7 +39,7 @@ export default function Login() {
|
||||
},
|
||||
onError: (e:any) => {
|
||||
if (axios.isAxiosError(e)) {
|
||||
setErr(e.response?.data.error)
|
||||
setErr(e.response?.data.detail)
|
||||
} else {
|
||||
setErr(e?.message)
|
||||
}
|
||||
@ -47,6 +47,9 @@ export default function Login() {
|
||||
}
|
||||
)
|
||||
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<div className="isolate bg-gray-100 text-gray-800">
|
||||
<div className="absolute inset-x-0 top-[-10rem] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[-20rem]">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user