Merge pull request #276 from n4ze3m/next

v1.3.9

Author: n4ze3m

README.md

@@ -82,7 +82,7 @@ bun build:firefox
 
 Once the extension is installed, you can open the sidebar via context menu or keyboard shortcut.
 
-Default Keyboard Shortcut: `Ctrl+Shift+P`
+Default Keyboard Shortcut: `Ctrl+Shift+Y`
 
 ### Web UI
 

src/assets/locale/en/settings.json

@@ -74,6 +74,9 @@
       "braveApi": {
         "label":  "Brave API Key",
         "placeholder": "Enter your Brave API key"
+      },
+      "googleDomain": {
+        "label": "Google Domain"
       }
     },
     "system": {

src/components/Common/Playground/Message.tsx

@@ -68,7 +68,7 @@ export const PlaygroundMessage = (props: Props) => {
               )}
             </div>
           </div>
-          <div className="flex w-[calc(100%-50px)] flex-col gap-3 lg:w-[calc(100%-115px)]">
+          <div className="flex w-[calc(100%-50px)] flex-col gap-2 lg:w-[calc(100%-115px)]">
             <span className="text-xs font-bold text-gray-800 dark:text-white">
               {props.isBot
                 ? props.name === "chrome::gemini-nano::page-assist"
@@ -212,7 +212,9 @@ export const PlaygroundMessage = (props: Props) => {
                     {props.generationInfo && (
                       <Popover
                         content={
-                         <GenerationInfo generationInfo={props.generationInfo} />
+                          <GenerationInfo
+                            generationInfo={props.generationInfo}
+                          />
                         }
                         title={t("generationInfo")}>
                         <button className="flex items-center justify-center w-6 h-6 rounded-full bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">

src/components/Common/ProviderIcon.tsx

@@ -7,6 +7,7 @@ import { OpenAiIcon } from "../Icons/OpenAI"
 import { TogtherMonoIcon } from "../Icons/Togther"
 import { OpenRouterIcon } from "../Icons/OpenRouter"
 import { LLamaFile } from "../Icons/Llamafile"
+import { GeminiIcon } from "../Icons/GeminiIcon"
 
 export const ProviderIcons = ({
   provider,
@@ -34,6 +35,8 @@ export const ProviderIcons = ({
       return <OpenRouterIcon className={className} />
     case "llamafile":
       return <LLamaFile className={className} />
+    case "gemini":
+      return <GeminiIcon className={className} />
     default:
       return <OllamaIcon className={className} />
   }

src/components/Icons/GeminiIcon.tsx

@@ -0,0 +1,18 @@
+import React from "react"
+
+export const GeminiIcon = React.forwardRef<
+  SVGSVGElement,
+  React.SVGProps<SVGSVGElement>
+>((props, ref) => {
+  return (
+    <svg
+      fill="currentColor"
+      fillRule="evenodd"
+      ref={ref}
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}>
+      <path d="M12 24A14.304 14.304 0 000 12 14.304 14.304 0 0012 0a14.305 14.305 0 0012 12 14.305 14.305 0 00-12 12"></path>
+    </svg>
+  )
+})

src/components/Option/Playground/PlaygroundChat.tsx

@@ -58,7 +58,7 @@ export const PlaygroundChat = () => {
           />
         ))}
         {messages.length > 0 && (
-          <div className="w-full h-16 flex-shrink-0"></div>
+          <div className="w-full h-10 flex-shrink-0"></div>
         )}
       </div>
       {!isAtBottom && (

src/components/Option/Playground/PlaygroundForm.tsx

@@ -192,7 +192,7 @@ export const PlaygroundForm = ({ dropedFile }: Props) => {
 
   return (
     <div
-      className={`px-3 pt-3 md:px-4 md:pt-4 bg-gray-100 dark:bg-[#262626] border rounded-t-xl  dark:border-gray-600
+      className={`px-3 pt-3 bg-gray-100 dark:bg-[#262626] border rounded-t-xl  dark:border-gray-600
     ${temporaryChat && "!bg-gray-300 dark:!bg-black "}
     `}>
       <div
@@ -217,9 +217,10 @@ export const PlaygroundForm = ({ dropedFile }: Props) => {
         </div>
       </div>
       <div>
-        <div className={`flex rounded-t-xl bg-white dark:bg-transparent ${
-          temporaryChat && "!bg-gray-300 dark:!bg-black"
-        }`}>
+        <div
+          className={`flex rounded-t-xl bg-white dark:bg-transparent ${
+            temporaryChat && "!bg-gray-300 dark:!bg-black"
+          }`}>
           <form
             onSubmit={form.onSubmit(async (value) => {
               stopListening()
@@ -275,17 +276,17 @@ export const PlaygroundForm = ({ dropedFile }: Props) => {
                 className="px-2 py-2 w-full resize-none bg-transparent focus-within:outline-none focus:ring-0 focus-visible:ring-0 ring-0 dark:ring-0 border-0 dark:text-gray-100"
                 onPaste={handlePaste}
                 rows={1}
-                style={{ minHeight: "40px" }}
+                style={{ minHeight: "30px" }}
                 tabIndex={0}
                 placeholder={t("form.textarea.placeholder")}
                 {...form.getInputProps("message")}
               />
-              <div className="mt-4 flex justify-between items-center">
+              <div className="mt-2 flex justify-between items-center">
                 <div className="flex">
                   {!selectedKnowledge && (
                     <Tooltip title={t("tooltip.searchInternet")}>
                       <div className="inline-flex items-center gap-2">
-                        <PiGlobe className="h-5 w-5 dark:text-gray-300" />
+                        <PiGlobe className={`h-5 w-5 dark:text-gray-300 `} />
                         <Switch
                           value={webSearch}
                           onChange={(e) => setWebSearch(e)}

src/components/Option/Settings/search-mode.tsx

@@ -1,5 +1,6 @@
 import { SaveButton } from "@/components/Common/SaveButton"
 import { getSearchSettings, setSearchSettings } from "@/services/search"
+import { ALL_GOOGLE_DOMAINS } from "@/utils/google-domains"
 import { SUPPORTED_SERACH_PROVIDERS } from "@/utils/search-provider"
 import { useForm } from "@mantine/form"
 import { useQuery } from "@tanstack/react-query"
@@ -18,6 +19,7 @@ export const SearchModeSettings = () => {
       searxngURL: "",
       searxngJSONMode: false,
       braveApiKey: "",
+      googleDomain: ""
     }
   })
 
@@ -82,6 +84,32 @@ export const SearchModeSettings = () => {
             </div>
           </>
         )}
+        {form.values.searchProvider === "google" && (
+          <>
+            <div className="flex sm:flex-row flex-col space-y-4 sm:space-y-0 sm:justify-between">
+              <span className="text-gray-700 dark:text-neutral-50">
+                {t("generalSettings.webSearch.googleDomain.label")}
+              </span>
+              <div>
+                <Select
+                  showSearch
+                  className="w-full mt-4 sm:mt-0 sm:w-[200px]"
+                  options={ALL_GOOGLE_DOMAINS.map((e) => ({
+                    label: e,
+                    value: e
+                  }))}
+                  filterOption={(input, option) =>
+                    option!.label.toLowerCase().indexOf(input.toLowerCase()) >=
+                      0 ||
+                    option!.value.toLowerCase().indexOf(input.toLowerCase()) >=
+                      0
+                  }
+                  {...form.getInputProps("googleDomain")}
+                />
+              </div>
+            </div>
+          </>
+        )}
         {form.values.searchProvider === "brave-api" && (
           <>
             <div className="flex sm:flex-row flex-col space-y-4 sm:space-y-0 sm:justify-between">

src/models/ChatGoogleAI.ts

@@ -0,0 +1,11 @@
+import { ChatOpenAI } from "@langchain/openai";
+
+export class ChatGoogleAI extends ChatOpenAI {
+
+    frequencyPenalty: number = undefined;
+    presencePenalty: number = undefined;
+
+    static lc_name() {
+        return "ChatGoogleAI";
+    }
+}

src/models/index.ts

@@ -4,6 +4,7 @@ import { ChatOllama } from "./ChatOllama"
 import { getOpenAIConfigById } from "@/db/openai"
 import { ChatOpenAI } from "@langchain/openai"
 import { urlRewriteRuntime } from "@/libs/runtime"
+import { ChatGoogleAI } from "./ChatGoogleAI"
 
 export const pageAssistModel = async ({
   model,
@@ -30,18 +31,15 @@ export const pageAssistModel = async ({
   numPredict?: number
   useMMap?: boolean
 }) => {
-
   if (model === "chrome::gemini-nano::page-assist") {
     return new ChatChromeAI({
       temperature,
-      topK,
+      topK
     })
   }
 
-
   const isCustom = isCustomModel(model)
 
-
   if (isCustom) {
     const modelInfo = await getModelInfo(model)
     const providerInfo = await getOpenAIConfigById(modelInfo.provider_id)
@@ -50,6 +48,20 @@ export const pageAssistModel = async ({
       await urlRewriteRuntime(providerInfo.baseUrl || "")
     }
 
+    if (providerInfo.provider === "gemini") {
+      return new ChatGoogleAI({
+        modelName: modelInfo.model_id,
+        openAIApiKey: providerInfo.apiKey || "temp",
+        temperature,
+        topP,
+        maxTokens: numPredict,
+        configuration: {
+          apiKey: providerInfo.apiKey || "temp",
+          baseURL: providerInfo.baseUrl || ""
+        }
+      }) as any
+    }
+
     return new ChatOpenAI({
       modelName: modelInfo.model_id,
       openAIApiKey: providerInfo.apiKey || "temp",
@@ -58,13 +70,11 @@ export const pageAssistModel = async ({
       maxTokens: numPredict,
       configuration: {
         apiKey: providerInfo.apiKey || "temp",
-        baseURL: providerInfo.baseUrl || "",
-      },
+        baseURL: providerInfo.baseUrl || ""
+      }
     }) as any
   }
 
-
-
   return new ChatOllama({
     baseUrl,
     keepAlive,
@@ -76,9 +86,6 @@ export const pageAssistModel = async ({
     model,
     numGpu,
     numPredict,
-    useMMap,
+    useMMap
   })
-
-
-
 }