diff --git a/enjoy/src/renderer/components/widgets/index.ts b/enjoy/src/renderer/components/widgets/index.ts
index febfada0..2c08c43e 100644
--- a/enjoy/src/renderer/components/widgets/index.ts
+++ b/enjoy/src/renderer/components/widgets/index.ts
@@ -1,10 +1,2 @@
-export * from "./db-state";
-export * from "./layout";
-export * from "./loader-spin";
-export * from "./lookup-result";
-export * from "./login-form";
-export * from "./no-records-found";
-export * from "./page-placeholder";
-export * from "./selection-menu";
-export * from "./sidebar";
-export * from "./wavesurfer-player";
+export * from "./lookup-widget";
+export * from "./translate-widget";
diff --git a/enjoy/src/renderer/components/widgets/lookup-result.tsx b/enjoy/src/renderer/components/widgets/lookup-result.tsx
deleted file mode 100644
index c29a621e..00000000
--- a/enjoy/src/renderer/components/widgets/lookup-result.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import { useState, useEffect } from "react";
-import { LoaderSpin, MeaningCard } from "@renderer/components";
-import { Button, toast } from "@renderer/components/ui";
-import { t } from "i18next";
-import { XCircleIcon } from "lucide-react";
-import { useAiCommand } from "@renderer/hooks";
-
-export const LookupResult = (props: {
- word: string;
- context?: string;
- sourceId?: string;
- sourceType?: string;
- onResult?: (meaning: MeaningType) => void;
-}) => {
- const { word, context, sourceId, sourceType, onResult } = props;
- const [result, setResult] = useState
();
- const [loading, setLoading] = useState(false);
- if (!word) return null;
-
- const { lookupWord } = useAiCommand();
-
- const processLookup = async () => {
- if (!word) return;
- if (loading) return;
-
- setLoading(true);
- lookupWord({
- word,
- context,
- sourceId,
- sourceType,
- })
- .then((lookup) => {
- if (lookup?.meaning) {
- setResult(lookup);
- onResult && onResult(lookup.meaning);
- }
- })
- .catch((error) => {
- toast.error(error.message);
- })
- .finally(() => {
- setLoading(false);
- });
- };
-
- useEffect(() => {
- processLookup();
- }, [word, context]);
-
- if (result?.meaning) {
- return (
-
-
-
- );
- }
-
- if (loading) {
- return (
-
- );
- }
-
- if (result?.status === "failed") {
- return (
-
-
{word}
-
-
-
-
-
- {t("pleaseTryLater")}
-
-
-
-
{word}
-
-
-
-
+ {selected?.word}
+
+
+
+ )}
+
+
+ );
+};
+
+export const AiLookupResult = (props: {
+ word: string;
+ context?: string;
+ sourceType?: string;
+ sourceId?: string;
+}) => {
+ const { word, context = "", sourceType, sourceId } = props;
+ const { webApi } = useContext(AppSettingsProviderContext);
+
+ const [lookingUp, setLookingUp] = useState(false);
+ const [result, setResult] = useState();
+ const { lookupWord } = useAiCommand();
+
+ const handleLookup = async () => {
+ if (lookingUp) return;
+ if (!word) return;
+
+ setLookingUp(true);
+ lookupWord({
+ word,
+ context,
+ sourceId,
+ sourceType,
+ })
+ .then((lookup) => {
+ if (lookup?.meaning) {
+ setResult(lookup);
+ }
+ })
+ .catch((error) => {
+ toast.error(error.message);
+ })
+ .finally(() => {
+ setLookingUp(false);
+ });
+ };
+
+ /*
+ * Fetch cached lookup result.
+ */
+ useEffect(() => {
+ if (!word) return;
+
+ webApi
+ .lookup({
+ word,
+ context,
+ sourceId,
+ sourceType,
+ })
+ .then((res) => {
+ if (res?.meaning) {
+ setResult(res);
+ } else {
+ setResult(null);
+ }
+ });
+ }, [word, context]);
+
+ if (!word) return null;
+
+ return (
+ <>
+
+ {t("aiDictionary")}
+
+ {result ? (
+
+
{word}
+
+ {result.meaning?.pos && (
+
+ {result.meaning.pos}
+
+ )}
+ {result.meaning?.pronunciation && (
+
+ /{result.meaning.pronunciation.replaceAll("/", "")}/
+
+ )}
+ {result.meaning?.lemma &&
+ result.meaning.lemma !== result.meaning.word && (
+ ({result.meaning.lemma})
+ )}
+
+
{result.meaning.translation}
+
{result.meaning.definition}
+
+ {t("cambridgeDictionary")}
+
+ {result ? (
+
+
{word}
+ {result.posItems.map((posItem, index) => (
+
+
+
+ {posItem.type}
+
+
+ {posItem.pronunciations.map((pron, i) => (
+
+
+ [{pron.region}]
+
+
+ /{pron.pronunciation}/
+
+ {pron.audio && (
+
+
+
+
+ )}
+
+ ))}
+
+
+ {posItem.definitions.map((def, i) => (
+ -
+ {def.definition}
+
+ ))}
+
+
+ ))}
+
+ - {t("noResultsFound")} -
+
+ )}
+
+ );
+};
diff --git a/enjoy/src/renderer/components/widgets/selection-menu.tsx b/enjoy/src/renderer/components/widgets/selection-menu.tsx
deleted file mode 100644
index 708b91a4..00000000
--- a/enjoy/src/renderer/components/widgets/selection-menu.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { LanguagesIcon } from "lucide-react";
-import { Button } from "@renderer/components/ui";
-import { LookupResult } from "@renderer/components";
-import { useState } from "react";
-
-export const SelectionMenu = (props: {
- word: string;
- context?: string;
- sourceId?: string;
- sourceType?: string;
- onLookup?: (meaning: MeaningType) => void;
-}) => {
- const { word, context, sourceId, sourceType, onLookup } = props;
- const [translating, setTranslating] = useState(false);
-
- if (!word) return null;
-
- if (translating) {
- return (
-
- );
- }
-
- return (
-
-
-
- );
-};
diff --git a/enjoy/src/renderer/components/widgets/translate-widget.tsx b/enjoy/src/renderer/components/widgets/translate-widget.tsx
new file mode 100644
index 00000000..0b38f35a
--- /dev/null
+++ b/enjoy/src/renderer/components/widgets/translate-widget.tsx
@@ -0,0 +1,165 @@
+import { useEffect, useContext, useState } from "react";
+import { AppSettingsProviderContext } from "@renderer/context";
+import {
+ Button,
+ Popover,
+ PopoverAnchor,
+ PopoverContent,
+ ScrollArea,
+ toast,
+} from "@renderer/components/ui";
+import { useAiCommand } from "@renderer/hooks";
+import { LoaderIcon } from "lucide-react";
+import { t } from "i18next";
+import { md5 } from "js-md5";
+
+export const TranslateWidget = () => {
+ const { EnjoyApp } = useContext(AppSettingsProviderContext);
+ const [open, setOpen] = useState(false);
+ const [selected, setSelected] = useState<{
+ text: string;
+ position: {
+ x: number;
+ y: number;
+ };
+ }>();
+
+ const handleSelectionChanged = (position: { x: number; y: number }) => {
+ const selection = document.getSelection();
+ if (!selection?.anchorNode?.parentElement) return;
+
+ const text = selection.toString().trim();
+ if (!text) return;
+
+ // if text is a single word, then return
+ if (text.indexOf(" ") === -1) return;
+
+ setSelected({ text, position });
+ setOpen(true);
+ };
+
+ useEffect(() => {
+ EnjoyApp.onTranslate((_event, _selection, position) => {
+ handleSelectionChanged(position);
+ });
+
+ return () => EnjoyApp.offLookup();
+ }, []);
+
+ return (
+
+
+
+
+
+ {selected?.text}
+
+
+
+
+
+
+
+ );
+};
+
+export const TranslateResult = (props: {
+ text: string;
+ autoTranslate?: boolean;
+}) => {
+ const { text, autoTranslate = false } = props;
+ const { EnjoyApp } = useContext(AppSettingsProviderContext);
+ const [translation, setTranslation] = useState();
+ const [translating, setTranslating] = useState(false);
+ const { translate } = useAiCommand();
+
+ const handleTranslate = async () => {
+ if (translating) return;
+ if (!text) return;
+
+ setTranslating(true);
+ translate(text, `translate-${md5(text)}`)
+ .then((result) => {
+ if (result) {
+ setTranslation(result);
+ }
+ })
+ .catch((err) => toast.error(err.message))
+ .finally(() => {
+ setTranslating(false);
+ });
+ };
+
+ /*
+ * check if the translation is cached, then use it.
+ */
+ useEffect(() => {
+ if (!text) return;
+
+ EnjoyApp.cacheObjects.get(`translate-${md5(text)}`).then((cached) => {
+ if (cached) {
+ setTranslation(cached);
+ } else if (autoTranslate) {
+ handleTranslate();
+ } else {
+ setTranslation(undefined);
+ }
+ });
+ }, [text, autoTranslate]);
+
+ if (!text) return null;
+
+ return (
+ <>
+ {translation ? (
+
+ ) : (
+
+ )}
+
+ );
+};
diff --git a/enjoy/src/renderer/hooks/use-camdict.tsx b/enjoy/src/renderer/hooks/use-camdict.tsx
index 2fff55cc..58dff7ee 100644
--- a/enjoy/src/renderer/hooks/use-camdict.tsx
+++ b/enjoy/src/renderer/hooks/use-camdict.tsx
@@ -1,7 +1,5 @@
import { useEffect, useContext, useState } from "react";
-import {
- AppSettingsProviderContext,
-} from "@renderer/context";
+import { AppSettingsProviderContext } from "@renderer/context";
export const useCamdict = (word: string) => {
const { EnjoyApp } = useContext(AppSettingsProviderContext);
diff --git a/enjoy/src/types/enjoy-app.d.ts b/enjoy/src/types/enjoy-app.d.ts
index 78d7e517..de7ce63a 100644
--- a/enjoy/src/types/enjoy-app.d.ts
+++ b/enjoy/src/types/enjoy-app.d.ts
@@ -73,6 +73,21 @@ type EnjoyAppType = {
onNotification: (
callback: (event, notification: NotificationType) => void
) => void;
+ onLookup: (
+ callback: (
+ event,
+ selection: string,
+ position: { x: number; y: number }
+ ) => void
+ ) => void;
+ offLookup: () => void;
+ onTranslate: (
+ callback: (
+ event,
+ selection: string,
+ position: { x: number; y: number }
+ ) => void
+ ) => void;
shell: {
openExternal: (url: string) => Promise;
openPath: (path: string) => Promise;