Commit 0cc896d9 authored by Domi's avatar Domi

chore: update logo

parent d3f55e2b
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Anything Copilot</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="./src/pages/chat.ts"></script>
</body>
</html>
public/favicon.ico

160 KB | W: | H:

public/favicon.ico

90.9 KB | W: | H:

public/favicon.ico
public/favicon.ico
public/favicon.ico
public/favicon.ico
  • 2-up
  • Swipe
  • Onion skin
public/logo.png

2.05 KB | W: | H:

public/logo.png

5.21 KB | W: | H:

public/logo.png
public/logo.png
public/logo.png
public/logo.png
  • 2-up
  • Swipe
  • Onion skin
...@@ -55,8 +55,9 @@ defineEmits(["click", "remove"]) ...@@ -55,8 +55,9 @@ defineEmits(["click", "remove"])
<div <div
v-if="badge === 'remove'" v-if="badge === 'remove'"
:class="[ :class="[
'size-4 absolute top-[-4px] right-[-4px] opacity-0 group-hover:opacity-65 rounded-full', 'size-4 absolute top-0.5 right-0.5 opacity-0 rounded-full bg-background-soft',
'bg-background-soft hover:bg-red-100 hover:text-red-600 hover:scale-105 flex items-center justify-center', 'hover:scale-105 flex items-center justify-center hover:bg-red-100 hover:text-red-600',
'group-hover:opacity-65 group-active:opacity-0',
]" ]"
@click="(e) => (e.stopPropagation(), $emit('remove'))" @click="(e) => (e.stopPropagation(), $emit('remove'))"
> >
......
...@@ -25,7 +25,8 @@ const props = defineProps<{ ...@@ -25,7 +25,8 @@ const props = defineProps<{
}>() }>()
const emit = defineEmits<{ const emit = defineEmits<{
load: [PageInfo] load: []
loaded: [PageInfo]
}>() }>()
defineExpose({ defineExpose({
...@@ -68,6 +69,7 @@ async function loadFrame(url: string, ua?: string) { ...@@ -68,6 +69,7 @@ async function loadFrame(url: string, ua?: string) {
const iframe = frame.value const iframe = frame.value
if (!url || !iframe) return if (!url || !iframe) return
emit("load")
const tab = await chrome.tabs.getCurrent() const tab = await chrome.tabs.getCurrent()
await updateFrameNetRules({ await updateFrameNetRules({
ua: ua, ua: ua,
...@@ -159,7 +161,7 @@ function handleFrameMessage(e: MessageEvent) { ...@@ -159,7 +161,7 @@ function handleFrameMessage(e: MessageEvent) {
pageInfo.url = e.data.url pageInfo.url = e.data.url
pageInfo.title = e.data.title pageInfo.title = e.data.title
pageInfo.icon = e.data.icon pageInfo.icon = e.data.icon
emit("load", pageInfo) emit("loaded", pageInfo)
break break
case FrameMessageType.invokeResponse: case FrameMessageType.invokeResponse:
webviewInvoke.value?.handleResMsg(e.data) webviewInvoke.value?.handleResMsg(e.data)
...@@ -169,6 +171,7 @@ function handleFrameMessage(e: MessageEvent) { ...@@ -169,6 +171,7 @@ function handleFrameMessage(e: MessageEvent) {
function reload() { function reload() {
console.log("reload", pageInfo.url) console.log("reload", pageInfo.url)
emit("load")
webviewInvoke.value webviewInvoke.value
?.invoke({ ?.invoke({
func: WebviewFunc.reload, func: WebviewFunc.reload,
......
...@@ -62,6 +62,7 @@ async function onDrop(e: DragEvent) { ...@@ -62,6 +62,7 @@ async function onDrop(e: DragEvent) {
e.preventDefault() e.preventDefault()
docsAddon.active = false docsAddon.active = false
docsAddon.visible = false docsAddon.visible = false
count = 0
if (e.dataTransfer) { if (e.dataTransfer) {
const items = await getDocItem(e.dataTransfer.items) const items = await getDocItem(e.dataTransfer.items)
......
<template>
<svg
width="24"
height="24"
viewBox="0 0 256 256"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect
x="8"
y="97.7391"
width="240"
height="60.4355"
rx="12"
fill="#FF9900"
/>
<rect
width="241.308"
height="60.1092"
rx="12"
transform="matrix(0.497291 0.867584 -0.864453 0.502714 94.0838 8.42761)"
fill="#FF5C00"
/>
<path
d="M203.607 32.1851C209.336 35.5168 211.309 42.8788 208.013 48.6287L99.9482 237.161C96.6525 242.911 89.3364 244.871 83.6073 241.54L52.3926 223.387C46.6636 220.055 44.6909 212.693 47.9867 206.944L156.052 18.4109C159.347 12.6611 166.664 10.7008 172.393 14.0325L203.607 32.1851Z"
fill="#FF0000"
/>
</svg>
</template>
<template>
<svg
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 24 24"
height="24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M3 4H21V6H3V4ZM3 11H21V13H3V11ZM3 18H21V20H3V18Z"></path>
</svg>
</template>
...@@ -16,7 +16,7 @@ import IconAdd from "@/components/icons/IconAdd.vue" ...@@ -16,7 +16,7 @@ import IconAdd from "@/components/icons/IconAdd.vue"
defineProps<{ defineProps<{
active: number active: number
pages: { url: string }[] pages: { url: string }[]
pagesInfo: (PageInfo | null)[] pagesInfo: ((PageInfo & { loading?: boolean }) | null)[]
isMobileUA: boolean isMobileUA: boolean
isPointerIn: boolean isPointerIn: boolean
closeWebview?: (index: number) => void closeWebview?: (index: number) => void
...@@ -66,6 +66,7 @@ const handleDragOver = (e: DragEvent) => { ...@@ -66,6 +66,7 @@ const handleDragOver = (e: DragEvent) => {
const handleDrop = (e: DragEvent) => { const handleDrop = (e: DragEvent) => {
e.preventDefault() e.preventDefault()
dragActive.value = false dragActive.value = false
count = 0
if (!e.dataTransfer) { if (!e.dataTransfer) {
return return
...@@ -96,14 +97,14 @@ const handleDrop = (e: DragEvent) => { ...@@ -96,14 +97,14 @@ const handleDrop = (e: DragEvent) => {
:class="[ :class="[
'group rounded-full relative box-border border', 'group rounded-full relative box-border border',
active === -1 active === -1
? 'bg-primary/10 border-primary-500' ? 'bg-primary/20 border-primary/10'
: 'border-transparent hover:bg-background-mute bg-background-soft', : 'border-transparent hover:bg-background-mute bg-background-soft',
]" ]"
> >
<img <img
:class="[ :class="[
'size-4 group-hover:opacity-85 transition-all pointer-events-none', 'size-4 group-hover:opacity-85 transition-all pointer-events-none',
false ? 'opacity-85' : 'opacity-50', false ? 'opacity-85' : 'opacity-60',
]" ]"
:src="logoUrl" :src="logoUrl"
/> />
...@@ -119,7 +120,7 @@ const handleDrop = (e: DragEvent) => { ...@@ -119,7 +120,7 @@ const handleDrop = (e: DragEvent) => {
:class="[ :class="[
'group rounded-full relative box-border border', 'group rounded-full relative box-border border',
active === i active === i
? 'bg-primary/10 border-primary-500' ? 'bg-primary/20 border-primary/10'
: 'border-transparent hover:bg-background-mute bg-background-soft', : 'border-transparent hover:bg-background-mute bg-background-soft',
]" ]"
> >
...@@ -130,6 +131,10 @@ const handleDrop = (e: DragEvent) => { ...@@ -130,6 +131,10 @@ const handleDrop = (e: DragEvent) => {
:data-fallback="globeImg" :data-fallback="globeImg"
@error="handleImgError" @error="handleImgError"
/> />
<div
v-if="pagesInfo[i]?.loading"
class="absolute rounded-full size-7 border-2 border-primary border-b-transparent animate-spin"
></div>
<span <span
v-if="active === i && closeWebview" v-if="active === i && closeWebview"
class="absolute hidden group-hover:block rounded-full bg-primary-500 text-white -top-0.5 -right-0.5 transition-all p-0.5" class="absolute hidden group-hover:block rounded-full bg-primary-500 text-white -top-0.5 -right-0.5 transition-all p-0.5"
...@@ -142,7 +147,7 @@ const handleDrop = (e: DragEvent) => { ...@@ -142,7 +147,7 @@ const handleDrop = (e: DragEvent) => {
</a> </a>
<a <a
v-if="dragActive" v-if="dragActive"
class="rounded-full box-border border border-primary-500 bg-primary/10 text-primary" class="rounded-full box-border border border-primary/10 bg-primary/10 text-primary"
> >
<IconAdd class="size-5 group-active:scale-90 transition-transform" /> <IconAdd class="size-5 group-active:scale-90 transition-transform" />
</a> </a>
......
...@@ -32,6 +32,7 @@ const emit = defineEmits({ ...@@ -32,6 +32,7 @@ const emit = defineEmits({
<div class="flex flex-wrap gap-x-4 gap-y-4 justify-center"> <div class="flex flex-wrap gap-x-4 gap-y-4 justify-center">
<SiteButton <SiteButton
v-for="item of recentItems.slice(0, 12)" v-for="item of recentItems.slice(0, 12)"
:key="item.url"
:icon="item.icon" :icon="item.icon"
:title="item.title" :title="item.title"
:url="item.url" :url="item.url"
...@@ -48,6 +49,7 @@ const emit = defineEmits({ ...@@ -48,6 +49,7 @@ const emit = defineEmits({
v-for="item of popularItems" v-for="item of popularItems"
:icon="item.icon" :icon="item.icon"
:title="item.title" :title="item.title"
:url="item.url"
@click="emit('go', item.url)" @click="emit('go', item.url)"
/> />
</div> </div>
......
...@@ -24,7 +24,7 @@ export const defaultSidebarPath = "sidebar.html" ...@@ -24,7 +24,7 @@ export const defaultSidebarPath = "sidebar.html"
const manifest = { const manifest = {
// maximum of 45 characters // maximum of 45 characters
name: "__MSG_name__", name: "__MSG_name__",
version: "1.2.10", version: "1.2.11",
// edge 12 characters // edge 12 characters
// short_name: "__MSG_short_name__", // short_name: "__MSG_short_name__",
// no more than 132 characters // no more than 132 characters
...@@ -77,6 +77,7 @@ const manifest = { ...@@ -77,6 +77,7 @@ const manifest = {
"sidePanel", "sidePanel",
"declarativeNetRequestWithHostAccess", "declarativeNetRequestWithHostAccess",
"declarativeNetRequestFeedback", "declarativeNetRequestFeedback",
// "cookies",
], ],
optional_permissions: [], optional_permissions: [],
host_permissions: ["<all_urls>"], host_permissions: ["<all_urls>"],
......
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue"
import Webview from "@/components/Webview.vue"
import { autoPointerCapture } from "@/utils/dom"
import IconMenu from "@/components/icons/IconMenu.vue"
import { useI18n } from "@/utils/i18n"
const logoUrl = chrome.runtime.getURL("/logo.svg")
const globeImg = chrome.runtime.getURL("img/globe.svg")
const { t } = useI18n()
const collpase = ref(false)
const editorHeight = ref(144)
const innerWidth = ref(window.innerWidth)
onMounted(() => {
window.addEventListener("resize", handleResize)
})
onUnmounted(() => {
window.removeEventListener("resize", handleResize)
})
const handlePointerMove = (e: PointerEvent) => {
if (e.buttons) {
editorHeight.value -= e.movementY
}
}
const handleResize = () => {
innerWidth.value = window.innerWidth
}
</script>
<template>
<div class="flex w-screen h-screen">
<div
:class="[
'flex flex-col h-full w-64 transition-all border-r border-foreground/15',
{
'relative ': innerWidth > 1280,
'absolute bg-background shadow-md z-20': innerWidth <= 1280,
'-ml-64': collpase,
'-ml-0': !collpase,
},
]"
>
<div class="flex p-3 gap-3">
<img :src="logoUrl" class="size-10" />
<div class="text-4xl font-bold">Chat</div>
</div>
<div class="p-3 text-lg">Group</div>
<div class="flex flex-col gap-1 px-3">
<div
v-for="i in 3"
:key="i"
class="flex px-3 py-2 rounded-md cursor-pointer hover:bg-background-mute"
>
<div class="flex *:bg-background *:rounded-full *:-ml-2 mx-2">
<img class="" :src="globeImg" />
<img class="" :src="globeImg" />
<img class="" :src="globeImg" />
</div>
<div class="text-base">Chat GPT</div>
</div>
</div>
<div class="p-3 text-lg">AI Sites</div>
<div class="flex flex-col gap-1 px-3">
<div
v-for="i in 6"
:key="i"
class="flex px-3 py-2 gap-2 rounded-md cursor-pointer hover:bg-background-mute"
>
<img class="size-6 bg-background rounded-full" :src="globeImg" />
<div class="text-base">ChatGPT</div>
</div>
</div>
</div>
<div
v-if="innerWidth <= 1280 && !collpase"
class="fixed w-full h-full bg-black/30 top-0 left-0 z-10"
@click="collpase = !collpase"
></div>
<div class="flex flex-col w-full">
<div class="flex flex-1 p-6 w-full h-full gap-6">
<div
v-for="url in [
'https://chat.openai.com',
'https://gemini.google.com/',
'https://copilot.microsoft.com/',
]"
class="w-1/3 h-full rounded-xl border border-foreground/15 overflow-hidden"
>
<Webview ref="webviews" :key="url" :url="url" />
</div>
</div>
<div
class="relative min-h-16 max-h-[30%] h-36 w-full"
:style="{ height: editorHeight + 'px' }"
>
<div
:class="[
'w-full h-1 -top-0.5 left-0 cursor-ns-resize border-t border-foreground/15',
'hover:border-transparent hover:bg-primary/50',
]"
@pointerdown="autoPointerCapture"
@pointermove="handlePointerMove"
></div>
<button class="absolute p-2" @click="collpase = !collpase">
<IconMenu />
</button>
<div class="py-3 px-12">
<textarea
class="resize-none w-full h-full border outline-none p-3 rounded-xl"
></textarea>
</div>
</div>
</div>
</div>
</template>
<style scoped></style>
...@@ -18,6 +18,7 @@ import IconGppMaybe from "@/components/icons/IconGppMaybe.vue" ...@@ -18,6 +18,7 @@ import IconGppMaybe from "@/components/icons/IconGppMaybe.vue"
import IconHide from "@/components/icons/IconHide.vue" import IconHide from "@/components/icons/IconHide.vue"
import IconArrowCircleRight from "@/components/icons/IconArrowCircleRight.vue" import IconArrowCircleRight from "@/components/icons/IconArrowCircleRight.vue"
import IconSplitscreenRight from "@/components/icons/IconSplitscreenRight.vue" import IconSplitscreenRight from "@/components/icons/IconSplitscreenRight.vue"
import IconLogo from "@/components/icons/IconLogo.vue"
import SiteButton from "@/components/SiteButton.vue" import SiteButton from "@/components/SiteButton.vue"
import { getIsEdge } from "@/utils/ext" import { getIsEdge } from "@/utils/ext"
import { handleImgError } from "@/utils/dom" import { handleImgError } from "@/utils/dom"
...@@ -224,11 +225,13 @@ function showChatDocs() { ...@@ -224,11 +225,13 @@ function showChatDocs() {
<template> <template>
<main class="w-[300px] p-4 mx-auto bg-background"> <main class="w-[300px] p-4 mx-auto bg-background">
<div class="flex"> <div class="flex">
<div class="mr-auto"> <div
<span class="font-bold opacity-50" @click="goHome"> class="mr-auto flex items-center gap-2 cursor-pointer"
Anything Copilot @click="goHome"
</span> >
<span class="mx-2 text-sm opacity-50">{{ manifest.version }}</span> <IconLogo class="size-5" />
<span class="font-bold opacity-65">Anything Copilot</span>
<!-- <span class="mx-2 text-sm opacity-50">{{ manifest.version }}</span> -->
</div> </div>
<div class="flex items-center gap-1"> <div class="flex items-center gap-1">
<button <button
...@@ -249,7 +252,7 @@ function showChatDocs() { ...@@ -249,7 +252,7 @@ function showChatDocs() {
<div <div
:class="[ :class="[
'flex gap-2 items-center text-sm my-2 px-2', 'flex gap-2 items-center text-sm mt-6 my-2 px-0',
{ {
'text-rose-800': !avaiable, 'text-rose-800': !avaiable,
}, },
......
...@@ -42,7 +42,7 @@ const webviewsAttr = computed(() => { ...@@ -42,7 +42,7 @@ const webviewsAttr = computed(() => {
}) })
}) })
const active = ref(-1) const active = ref(-1)
const pagesInfo = reactive<(PageInfo | null)[]>([]) const pagesInfo = reactive<((PageInfo & { loading?: boolean }) | null)[]>([])
const hostUA = reactive<Record<string, number>>(config.data.embedView.hostUA) const hostUA = reactive<Record<string, number>>(config.data.embedView.hostUA)
const isPointerIn = ref(false) const isPointerIn = ref(false)
...@@ -153,8 +153,12 @@ async function handleMessage(message: any) { ...@@ -153,8 +153,12 @@ async function handleMessage(message: any) {
} }
} }
async function handlePageLoad(i: number, pageInfo: PageInfo) { function handlePageLoad(i: number) {
pagesInfo[i] = pageInfo pagesInfo[i] = { ...pagesInfo[i]!, loading: true }
}
async function handlePageLoaded(i: number, pageInfo: PageInfo) {
pagesInfo[i] = { ...pageInfo, loading: false }
if (mode.value === "content") { if (mode.value === "content") {
chrome.runtime.sendMessage({ chrome.runtime.sendMessage({
...@@ -335,10 +339,7 @@ function handlePointerLeave() { ...@@ -335,10 +339,7 @@ function handlePointerLeave() {
<div <div
v-for="(attr, i) of webviewsAttr" v-for="(attr, i) of webviewsAttr"
:class="[ :class="['w-full h-full overflow-hidden', { hidden: active != i }]"
'w-full h-full rounded-sm overflow-hidden',
{ hidden: active != i },
]"
> >
<Webview <Webview
ref="webviews" ref="webviews"
...@@ -347,7 +348,8 @@ function handlePointerLeave() { ...@@ -347,7 +348,8 @@ function handlePointerLeave() {
:ua="defaultUA" :ua="defaultUA"
:preload-url="attr.preloadUrl" :preload-url="attr.preloadUrl"
:preload-candidates="attr.preloadCandidates" :preload-candidates="attr.preloadCandidates"
@load="(info) => handlePageLoad(i, info)" @load="handlePageLoad(i)"
@loaded="(info) => handlePageLoaded(i, info)"
/> />
</div> </div>
</div> </div>
......
import "@/assets/main.css"
import { createApp } from "vue"
import Chat from "./Chat.vue"
import { i18n } from "@/utils/i18n"
const app = createApp(Chat)
app.use(i18n)
app.mount("#app")
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment