feat: Add Chrome AI support

src/components/Common/Markdown.tsx

@@ -6,11 +6,17 @@ import "property-information"
 import React from "react"
 import { CodeBlock } from "./CodeBlock"
 
-export default function Markdown({ message }: { message: string }) {
+export default function Markdown({
+  message,
+  className = "prose break-words dark:prose-invert prose-p:leading-relaxed prose-pre:p-0 dark:prose-dark"
+}: {
+  message: string
+  className?: string
+}) {
   return (
     <React.Fragment>
       <ReactMarkdown
-        className="prose break-words dark:prose-invert prose-p:leading-relaxed prose-pre:p-0 dark:prose-dark"
+        className={className}
         remarkPlugins={[remarkGfm, remarkMath]}
         components={{
           code({ node, inline, className, children, ...props }) {

src/components/Common/ModelSelect.tsx

@@ -3,9 +3,9 @@ import { Dropdown, Tooltip } from "antd"
 import { LucideBrain } from "lucide-react"
 import React from "react"
 import { useTranslation } from "react-i18next"
-import { OllamaIcon } from "../Icons/Ollama"
 import { fetchChatModels } from "@/services/ollama"
 import { useMessage } from "@/hooks/useMessage"
+import { ProviderIcons } from "./ProviderIcon"
 
 export const ModelSelect: React.FC = () => {
   const { t } = useTranslation("common")
@@ -29,7 +29,10 @@ export const ModelSelect: React.FC = () => {
                 label: (
                   <div className="w-52 gap-2 text-lg truncate inline-flex line-clamp-3  items-center  dark:border-gray-700">
                     <div>
-                      <OllamaIcon className="h-6 w-6 text-gray-400" />
+                      <ProviderIcons
+                        provider={d?.provider}
+                        className="h-6 w-6 text-gray-400"
+                      />
                     </div>
                     {d.name}
                   </div>
@@ -53,7 +56,7 @@ export const ModelSelect: React.FC = () => {
           trigger={["click"]}>
           <Tooltip title={t("selectAModel")}>
             <button type="button" className="dark:text-gray-300">
-              <LucideBrain className="h-5 w-5"/>
+              <LucideBrain className="h-5 w-5" />
             </button>
           </Tooltip>
         </Dropdown>

src/components/Common/Playground/Message.tsx

@@ -64,7 +64,11 @@ export const PlaygroundMessage = (props: Props) => {
           </div>
           <div className="flex w-[calc(100%-50px)] flex-col gap-3 lg:w-[calc(100%-115px)]">
             <span className="text-xs font-bold text-gray-800 dark:text-white">
-              {props.isBot ? props.name : "You"}
+              {props.isBot
+                ? props.name === "chrome::gemini-nano::page-assist"
+                  ? "Gemini Nano"
+                  : props.name
+                : "You"}
             </span>
 
             {props.isBot &&

src/components/Common/ProviderIcon.tsx

@@ -0,0 +1,17 @@
+import { ChromeIcon } from "lucide-react"
+import { OllamaIcon } from "../Icons/Ollama"
+
+export const ProviderIcons = ({
+  provider,
+  className
+}: {
+  provider: string
+  className?: string
+}) => {
+  switch (provider) {
+    case "chrome":
+      return <ChromeIcon className={className} />
+    default:
+      return <OllamaIcon className={className} />
+  }
+}