@lobehub/chat 1.0.0 → 1.0.2

package/src/chains/summaryAgentName.ts

@@ -0,0 +1,35 @@
+import { globalHelpers } from '@/store/user/helpers';
+import { ChatStreamPayload } from '@/types/openai/chat';
+
+/**
+ * summary agent name for user prompt
+ * @param content
+ */
+export const chainSummaryAgentName = (content: string): Partial<ChatStreamPayload> => ({
+  messages: [
+    {
+      content: `你是一名擅长起名的起名大师，名字需要有文学内涵，注重精炼和赋子意境，你需要将用户的描述总结为 10 个字以内的角色，并翻译为目标语言。格式要求如下：\n输入: {文本作为JSON引用字符串} [locale]\n输出: {角色名}`,
+      role: 'system',
+    },
+    {
+      content: `输入: {你是一名文案大师，帮我为一些设计 / 艺术作品起名，名字需要有文学内涵，注重精炼和赋子意境，表达作品的情景氛国，使名称既简洁又富有诗意。} [zh-CN]`,
+      role: 'user',
+    },
+    {
+      content: `输入: {你是一名 UX Writer，擅长将平平无奇的描述转换为精妙的表达。接下来用户会输入一段文本，你需要转成更加棒的表述方式，长度不超过40个字。} [ru-RU]`,
+      role: 'user',
+    },
+    { content: 'Творческий редактор UX', role: 'assistant' },
+    {
+      content: `输入: {你是一名前端代码专家，请将下面的代码转成 ts，不要修改实现。如果原本 js 中没有定义的全局变量，需要补充 declare 的类型声明。} [en-US]`,
+      role: 'user',
+    },
+    { content: 'TS Transformer', role: 'assistant' },
+    {
+      content: `输入: {Improve my English language use by replacing basic A0-level expressions with more sophisticated, advanced-level phrases while maintaining the conversation's essence. Your responses should focus solely on corrections and enhancements, avoiding additional explanations.} [zh-CN]`,
+      role: 'user',
+    },
+    { content: '邮件优化助理', role: 'assistant' },
+    { content: `输入: {${content}} [${globalHelpers.getCurrentLanguage()}]`, role: 'user' },
+  ],
+});

package/src/chains/summaryDescription.ts

@@ -0,0 +1,49 @@
+import { globalHelpers } from '@/store/user/helpers';
+import { ChatStreamPayload } from '@/types/openai/chat';
+
+export const chainSummaryDescription = (content: string): Partial<ChatStreamPayload> => ({
+  messages: [
+    {
+      content: `你是一名擅长技能总结的助理，你需要将用户的输入的内容总结为一个角色技能简介，不超过 20 个字。内容需要确保信息清晰、逻辑清晰，并有效地传达角色的技能和经验，需要并翻译为目标语言:${globalHelpers.getCurrentLanguage()}。格式要求如下：\n输入: {文本作为JSON引用字符串} [locale]\n输出: {简介}`,
+      role: 'system',
+    },
+    {
+      content: `输入: {你是一名文案大师，帮我为一些设计 / 艺术作品起名，名字需要有文学内涵，注重精炼和赋子意境，表达作品的情景氛国，使名称既简洁又富有诗意。} [zh-CN]`,
+      role: 'user',
+    },
+    { content: '擅长文创艺术作品起名', role: 'assistant' },
+    {
+      content: `输入: {你是一名创业计划撰写专家，可以提供包括创意名称、简短的标语、目标用户画像、用户痛点、主要价值主张、销售/营销渠道、收入流、成本结构等计划生成。} [en-US]`,
+      role: 'user',
+    },
+    { content: 'Good at business plan writing and consulting', role: 'assistant' },
+    {
+      content: `输入: {You are a frontend expert. Please convert the code below to TS without modifying the implementation. If there are global variables not defined in the original JS, you need to add type declarations using declare.} [zh-CN]`,
+      role: 'user',
+    },
+    { content: '擅长 ts 转换和补充类型声明', role: 'assistant' },
+    {
+      content: `输入: {
+用户正常书写面向开发者的 API 用户使用文档。你需要从用户的视角来提供比较易用易读的文档内容。\n\n一个标准的 API 文档示例如下：\n\n\`\`\`markdown
+---
+title: useWatchPluginMessage
+description: 监听获取 LobeChat 发过来的插件消息
+nav: API
+---\n\n\`useWatchPluginMessage\` 是 Chat Plugin SDK 封装一个的 React Hook，用于监听从 LobeChat 发过来的插件消息。
+} [ru-RU]`,
+      role: 'user',
+    },
+    {
+      content:
+        'Специализируется на создании хорошо структурированной и профессиональной документации README для GitHub с точными техническими терминами',
+      role: 'assistant',
+    },
+    {
+      content: `输入: {你是一名创业计划撰写专家，可以提供包括创意名称、简短的标语、目标用户画像、用户痛点、主要价值主张、销售/营销渠道、收入流、成本结构等计划生成。} [zh-CN]`,
+      role: 'user',
+    },
+    { content: '擅长创业计划撰写与咨询', role: 'assistant' },
+    { content: `输入: {${content}} [${globalHelpers.getCurrentLanguage()}]`, role: 'user' },
+  ],
+  temperature: 0,
+});

package/src/chains/summaryTags.ts

@@ -0,0 +1,28 @@
+import { globalHelpers } from '@/store/user/helpers';
+import { ChatStreamPayload } from '@/types/openai/chat';
+
+export const chainSummaryTags = (content: string): Partial<ChatStreamPayload> => ({
+  messages: [
+    {
+      content:
+        '你是一名擅长会话标签总结的助理，你需要将用户的输入的内容提炼出分类标签，使用`,`分隔，不超过 5 个标签，并翻译为目标语言。 格式要求如下：\n输入: {文本作为JSON引用字符串} [locale]\n输出: {标签}',
+      role: 'system',
+    },
+    {
+      content: `输入: {你是一名文案大师，帮我为一些设计 / 艺术作品起名，名字需要有文学内涵，注重精炼和赋子意境，表达作品的情景氛国，使名称既简洁又富有诗意。} [zh-CN]`,
+      role: 'user',
+    },
+    { content: '起名,写作,创意', role: 'assistant' },
+    {
+      content: `输入: {You are a professional translator proficient in Simplified Chinese, and have participated in the translation work of the Chinese versions of The New York Times and The Economist. Therefore, you have a deep understanding of translating news and current affairs articles. I hope you can help me translate the following English news paragraphs into Chinese, with a style similar to the Chinese versions of the aforementioned magazines.} [zh-CN]`,
+      role: 'user',
+    },
+    { content: '翻译,写作,文案', role: 'assistant' },
+    {
+      content: `输入: {你是一名创业计划撰写专家，可以提供包括创意名称、简短的标语、目标用户画像、用户痛点、主要价值主张、销售/营销渠道、收入流、成本结构等计划生成。} [en-US]`,
+      role: 'user',
+    },
+    { content: 'entrepreneurship,planning,consulting', role: 'assistant' },
+    { content: `输入: {${content}} [${globalHelpers.getCurrentLanguage()}]`, role: 'user' },
+  ],
+});

package/src/chains/summaryTitle.ts

@@ -0,0 +1,21 @@
+import { globalHelpers } from '@/store/user/helpers';
+import { ChatStreamPayload, OpenAIChatMessage } from '@/types/openai/chat';
+
+export const chainSummaryTitle = (messages: OpenAIChatMessage[]): Partial<ChatStreamPayload> => {
+  const lang = globalHelpers.getCurrentLanguage();
+
+  return {
+    messages: [
+      {
+        content: '你是一名擅长会话的助理，你需要将用户的会话总结为 10 个字以内的标题',
+        role: 'system',
+      },
+      {
+        content: `${messages.map((message) => `${message.role}: ${message.content}`).join('\n')}
+
+请总结上述对话为10个字以内的标题，不需要包含标点符号，输出语言语种为：${lang}`,
+        role: 'user',
+      },
+    ],
+  };
+};

package/src/chains/translate.ts

@@ -0,0 +1,17 @@
+import { ChatStreamPayload } from '@/types/openai/chat';
+
+export const chainTranslate = (
+  content: string,
+  targetLang: string,
+): Partial<ChatStreamPayload> => ({
+  messages: [
+    {
+      content: '你是一名擅长翻译的助理，你需要将输入的语言翻译为目标语言',
+      role: 'system',
+    },
+    {
+      content: `请将以下内容 ${content}，翻译为 ${targetLang} `,
+      role: 'user',
+    },
+  ],
+});

package/src/components/404/index.tsx

@@ -0,0 +1,43 @@
+'use client';
+
+import { FluentEmoji } from '@lobehub/ui';
+import { Button } from 'antd';
+import Link from 'next/link';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { MAX_WIDTH } from '@/const/layoutTokens';
+
+const NotFound = memo(() => {
+  const { t } = useTranslation('error');
+  return (
+    <Flexbox align={'center'} justify={'center'} style={{ minHeight: '100%', width: '100%' }}>
+      <h1
+        style={{
+          filter: 'blur(8px)',
+          fontSize: `min(${MAX_WIDTH / 3}px, 50vw)`,
+          fontWeight: 'bolder',
+          margin: 0,
+          opacity: 0.12,
+          position: 'absolute',
+          zIndex: 0,
+        }}
+      >
+        404
+      </h1>
+      <FluentEmoji emoji={'👀'} size={64} />
+      <h2 style={{ fontWeight: 'bold', marginTop: '1em', textAlign: 'center' }}>
+        {t('notFound.title')}
+      </h2>
+      <p style={{ marginBottom: '2em' }}>{t('notFound.desc')}</p>
+      <Link href="/">
+        <Button type={'primary'}>{t('notFound.backHome')}</Button>
+      </Link>
+    </Flexbox>
+  );
+});
+
+NotFound.displayName = 'NotFound';
+
+export default NotFound;

package/src/components/Analytics/Clarity.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import Script from 'next/script';
+import { memo } from 'react';
+
+interface ClarityProps {
+  projectId?: string;
+}
+
+const Clarity = memo<ClarityProps>(
+  ({ projectId }) =>
+    projectId && (
+      <Script
+        dangerouslySetInnerHTML={{
+          __html: `
+              (function(c,l,a,r,i,t,y){
+                  c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+                  t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+                  y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+              })(window, document, "clarity", "script", "${projectId}");
+            `,
+        }}
+        id="clarity-script"
+      />
+    ),
+);
+
+export default Clarity;

package/src/components/Analytics/Google.tsx

@@ -0,0 +1,7 @@
+import { GoogleAnalytics as GA } from '@next/third-parties/google';
+
+import { analyticsEnv } from '@/config/analytics';
+
+const GoogleAnalytics = () => <GA gaId={analyticsEnv.GOOGLE_ANALYTICS_MEASUREMENT_ID!} />;
+
+export default GoogleAnalytics;

package/src/components/Analytics/Plausible.tsx

@@ -0,0 +1,16 @@
+'use client';
+
+import Script from 'next/script';
+import { memo } from 'react';
+
+interface PlausibleAnalyticsProps {
+  domain?: string;
+  scriptBaseUrl: string;
+}
+
+const PlausibleAnalytics = memo<PlausibleAnalyticsProps>(
+  ({ domain, scriptBaseUrl }) =>
+    domain && <Script data-domain={domain} defer src={`${scriptBaseUrl}/js/script.js`} />,
+);
+
+export default PlausibleAnalytics;

package/src/components/Analytics/Posthog.tsx

@@ -0,0 +1,22 @@
+'use client';
+
+import posthog from 'posthog-js';
+import { memo, useEffect } from 'react';
+
+interface PostHogProps {
+  debug: boolean;
+  host: string;
+  token?: string;
+}
+
+const PostHog = memo<PostHogProps>(({ token, host, debug }) => {
+  useEffect(() => {
+    if (!token) return;
+
+    posthog.init(token, { api_host: host, debug });
+  }, []);
+
+  return null;
+});
+
+export default PostHog;

package/src/components/Analytics/Umami.tsx

@@ -0,0 +1,16 @@
+'use client';
+
+import Script from 'next/script';
+import { memo } from 'react';
+
+interface UmamiAnalyticsProps {
+  scriptUrl: string;
+  websiteId?: string;
+}
+
+const UmamiAnalytics = memo<UmamiAnalyticsProps>(
+  ({ scriptUrl, websiteId }) =>
+    websiteId && <Script data-website-id={websiteId} defer src={scriptUrl} />,
+);
+
+export default UmamiAnalytics;

package/src/components/Analytics/Vercel.tsx

@@ -0,0 +1,8 @@
+import { Analytics } from '@vercel/analytics/react';
+import { memo } from 'react';
+
+import { analyticsEnv } from '@/config/analytics';
+
+const VercelAnalytics = memo(() => <Analytics debug={analyticsEnv.DEBUG_VERCEL_ANALYTICS} />);
+
+export default VercelAnalytics;

package/src/components/Analytics/index.tsx

@@ -0,0 +1,44 @@
+import dynamic from 'next/dynamic';
+
+import { analyticsEnv } from '@/config/analytics';
+
+import Google from './Google';
+import Vercel from './Vercel';
+
+const Plausible = dynamic(() => import('./Plausible'));
+const Posthog = dynamic(() => import('./Posthog'));
+const Umami = dynamic(() => import('./Umami'));
+const Clarity = dynamic(() => import('./Clarity'));
+
+const Analytics = () => {
+  return (
+    <>
+      {analyticsEnv.ENABLE_VERCEL_ANALYTICS && <Vercel />}
+      {analyticsEnv.ENABLE_GOOGLE_ANALYTICS && <Google />}
+      {analyticsEnv.ENABLED_PLAUSIBLE_ANALYTICS && (
+        <Plausible
+          domain={analyticsEnv.PLAUSIBLE_DOMAIN}
+          scriptBaseUrl={analyticsEnv.PLAUSIBLE_SCRIPT_BASE_URL}
+        />
+      )}
+      {analyticsEnv.ENABLED_POSTHOG_ANALYTICS && (
+        <Posthog
+          debug={analyticsEnv.DEBUG_POSTHOG_ANALYTICS}
+          host={analyticsEnv.POSTHOG_HOST!}
+          token={analyticsEnv.POSTHOG_KEY}
+        />
+      )}
+      {analyticsEnv.ENABLED_UMAMI_ANALYTICS && (
+        <Umami
+          scriptUrl={analyticsEnv.UMAMI_SCRIPT_URL}
+          websiteId={analyticsEnv.UMAMI_WEBSITE_ID}
+        />
+      )}
+      {analyticsEnv.ENABLED_CLARITY_ANALYTICS && (
+        <Clarity projectId={analyticsEnv.CLARITY_PROJECT_ID} />
+      )}
+    </>
+  );
+};
+
+export default Analytics;

package/src/components/AntdStaticMethods/index.test.tsx

@@ -0,0 +1,43 @@
+// EntryComponent.test.tsx
+import { render } from '@testing-library/react';
+import { App } from 'antd';
+import { describe, expect, it, vi } from 'vitest';
+
+import EntryComponent, { message, modal, notification } from './index';
+
+// 模拟 App.useApp 方法返回的对象
+const mockUseApp = {
+  message: { success: vi.fn() },
+  modal: { confirm: vi.fn() },
+  notification: { open: vi.fn() },
+};
+
+vi.mock('antd', () => ({
+  App: {
+    useApp: vi.fn(() => mockUseApp),
+  },
+}));
+
+describe('EntryComponent', () => {
+  it('should correctly initialize message, modal, and notification', () => {
+    render(<EntryComponent />);
+
+    // 验证 App.useApp 是否被调用
+    expect(App.useApp).toHaveBeenCalled();
+
+    // 验证 message, modal, 和 notification 是否被正确赋值
+    expect(message).toBeDefined();
+    expect(modal).toBeDefined();
+    expect(notification).toBeDefined();
+
+    // 验证是否赋值的对象与模拟的对象匹配
+    expect(message).toEqual(mockUseApp.message);
+    expect(modal).toEqual(mockUseApp.modal);
+    expect(notification).toEqual(mockUseApp.notification);
+  });
+
+  it('should render without crashing', () => {
+    const { container } = render(<EntryComponent />);
+    expect(container).toBeDefined();
+  });
+});

package/src/components/AntdStaticMethods/index.tsx

@@ -0,0 +1,20 @@
+// Entry component
+import { App } from 'antd';
+import type { MessageInstance } from 'antd/es/message/interface';
+import type { ModalStaticFunctions } from 'antd/es/modal/confirm';
+import type { NotificationInstance } from 'antd/es/notification/interface';
+import { memo } from 'react';
+
+let message: MessageInstance;
+let notification: NotificationInstance;
+let modal: Omit<ModalStaticFunctions, 'warn'>;
+
+export default memo(() => {
+  const staticFunction = App.useApp();
+  message = staticFunction.message;
+  modal = staticFunction.modal;
+  notification = staticFunction.notification;
+  return null;
+});
+
+export { message, modal, notification };

package/src/components/BrandWatermark/index.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import { Logo } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import Link from 'next/link';
+import { memo } from 'react';
+import { Flexbox, FlexboxProps } from 'react-layout-kit';
+
+const useStyles = createStyles(({ token, css }) => ({
+  logoLink: css`
+    height: 20px;
+    color: inherit;
+
+    &:hover {
+      color: ${token.colorLink};
+    }
+  `,
+}));
+
+const BrandWatermark = memo<Omit<FlexboxProps, 'children'>>(({ style, ...rest }) => {
+  const { styles, theme } = useStyles();
+  return (
+    <Flexbox
+      align={'center'}
+      flex={'none'}
+      gap={4}
+      horizontal
+      style={{ color: theme.colorTextDescription, fontSize: 12, ...style }}
+      {...rest}
+    >
+      <span>Powered by</span>
+      <Link className={styles.logoLink} href={'https://lobehub.com'} target={'_blank'}>
+        <Logo size={20} type={'text'} />
+      </Link>
+    </Flexbox>
+  );
+});
+
+export default BrandWatermark;

package/src/components/BrowserIcon/components/Brave.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+
+import { SVGComponent } from '../types';
+
+export default ({ ...props }: SVGComponent) => {
+  return (
+    <svg viewBox="0 0 112.4 131.9" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <defs>
+        <linearGradient
+          gradientTransform="matrix(112.31 0 0 -131.86 53355.92 89180.8)"
+          gradientUnits="userSpaceOnUse"
+          id="prefix__a"
+          x1={-475.07}
+          x2={-474.07}
+          y1={675.83}
+          y2={675.83}
+        >
+          <stop offset={0} stopColor="#f50" />
+          <stop offset={0.41} stopColor="#f50" />
+          <stop offset={0.58} stopColor="#ff2000" />
+          <stop offset={1} stopColor="#ff2000" />
+        </linearGradient>
+        <linearGradient
+          gradientTransform="matrix(93.22 0 0 -23.76 44217.1 15672.73)"
+          gradientUnits="userSpaceOnUse"
+          id="prefix__b"
+          x1={-474.21}
+          x2={-473.23}
+          y1={659.13}
+          y2={659.13}
+        >
+          <stop offset={0} stopColor="#ff452a" />
+          <stop offset={1} stopColor="#ff2000" />
+        </linearGradient>
+      </defs>
+      <g data-name="Calque 2">
+        <g data-name="Layer 1">
+          <g data-name="build-icons/Stable">
+            <path
+              d="M108.4 31.6l3.1-7.6s-3.9-4.2-8.7-9-14.9-2-14.9-2L76.4 0H35.9L24.4 13.1s-10.1-2.8-14.9 2-8.7 9-8.7 9l3.1 7.6L0 42.9s11.6 43.8 12.9 49.2c2.7 10.5 4.5 14.6 12.1 20s21.3 14.6 23.6 16 5.1 3.8 7.6 3.8 5.3-2.4 7.6-3.8 16-10.7 23.6-16 9.4-9.4 12.1-20c1.4-5.4 12.9-49.2 12.9-49.2z"
+              fill="url(#prefix__a)"
+            />
+            <path
+              d="M84.7 21.4s14.8 17.9 14.8 21.8-1.9 4.8-3.8 6.8-10.1 10.7-11.1 11.8-3.2 2.8-2 5.9 3.2 6.9 1.1 10.9-5.7 6.6-8 6.1-7.8-3.3-9.8-4.6-8.3-6.5-8.3-8.5 6.6-5.6 7.8-6.4 6.7-4 6.8-5.2.1-1.6-1.6-4.7-4.6-7.2-4.1-9.9 5.2-4.1 8.6-5.4 9.9-3.7 10.7-4.1.6-.7-1.9-1-9.4-1.2-12.6-.3-8.5 2.2-9 2.9-.8.7-.4 3.2 2.8 14.2 3 16.3.7 3.5-1.6 4a56.78 56.78 0 01-7.3 1.4 56.78 56.78 0 01-7.3-1.4c-2.2-.5-1.8-1.9-1.6-4s2.5-13.8 3-16.3.1-2.5-.4-3.2-5.8-2-9-2.9-10.1 0-12.6.3-2.7.6-1.9 1 7.3 2.8 10.7 4.1 8.1 2.7 8.6 5.4-2.4 6.8-4.1 9.9-1.7 3.4-1.6 4.7 5.6 4.4 6.8 5.2 7.8 4.4 7.8 6.4-6.3 7.2-8.3 8.5-7.4 4.1-9.8 4.6-5.9-2.2-8-6.1-.2-7.8 1.1-10.9-.9-4.7-2-5.9c-.8-1.2-8.9-9.9-10.8-11.8s-3.7-3-3.7-6.8 14.8-21.8 14.8-21.8 12.5 2.4 14.2 2.4 5.3-1.4 8.7-2.5a20.16 20.16 0 015.6-1.1 20.16 20.16 0 015.6 1.1c3.4 1.1 7 2.5 8.7 2.5s14.2-2.4 14.2-2.4zM73.6 89.9c.9.6.4 1.7-.5 2.2S61 101.4 60 102.4s-2.7 2.5-3.8 2.5-2.7-1.6-3.8-2.5-12.3-9.7-13.1-10.3-1.4-1.7-.5-2.2 3.8-2 7.7-4.1 8.9-3.8 9.7-3.8 5.7 1.7 9.7 3.8 6.7 3.6 7.7 4.1z"
+              fill="#fff"
+            />
+            <path
+              d="M87.9 13.1L76.4 0H35.9L24.4 13.1s-10.1-2.8-14.9 2c0 0 13.5-1.2 18.1 6.3 0 0 12.5 2.4 14.2 2.4s5.3-1.4 8.7-2.5a20.16 20.16 0 015.6-1.1 20.16 20.16 0 015.6 1.1c3.4 1.1 7 2.5 8.7 2.5s14.2-2.4 14.2-2.4c4.6-7.5 18.1-6.3 18.1-6.3-4.7-4.8-14.8-2-14.8-2"
+              fill="url(#prefix__b)"
+            />
+          </g>
+        </g>
+      </g>
+    </svg>
+  );
+};

package/src/components/BrowserIcon/components/Chrome.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import { SVGComponent } from '../types';
+
+export default ({ ...props }: SVGComponent) => {
+  return (
+    <svg aria-label="Chrome" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path d="M256 140h228a256 256 0 01-240 371.7" fill="#fc4" />
+      <path d="M357 314L244 511.7A256 256 0 0140 118" fill="#0f9d58" />
+      <path d="M256 140h228a256 256 1 00-444-22l115 196" fill="#db4437" />
+      <circle cx={256} cy={256} fill="#4285f4" r={105} stroke="#f1f1f1" strokeWidth={24} />
+    </svg>
+  );
+};

package/src/components/BrowserIcon/components/Chromium.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import { SVGComponent } from '../types';
+
+export default ({ ...props }: SVGComponent) => {
+  return (
+    <svg aria-label="Chromium" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path d="M256 140h228a256 256 0 01-240 371.7" fill="#a2c2fa" />
+      <path d="M357 314L244 511.7A256 256 0 0140 118" fill="#6199f6" />
+      <path d="M256 140h228a256 256 1 00-444-22l115 196" fill="#396bd7" />
+      <circle cx={256} cy={256} fill="#4687f4" r={105} stroke="#f1f1f1" strokeWidth={24} />
+    </svg>
+  );
+};

package/src/components/BrowserIcon/components/Edge.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+
+import { SVGComponent } from '../types';
+
+export default ({ ...props }: SVGComponent) => {
+  return (
+    <svg aria-label="Edge" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <rect fill="#fff" height={512} rx="15%" width={512} />
+      <radialGradient cx={0.6} cy={0.5} id="prefix__a">
+        <stop offset={0.8} stopColor="#148" />
+        <stop offset={1} stopColor="#137" />
+      </radialGradient>
+      <radialGradient cx={0.5} cy={0.6} fx={0.2} fy={0.6} id="prefix__b">
+        <stop offset={0.8} stopColor="#38c" />
+        <stop offset={1} stopColor="#269" />
+      </radialGradient>
+      <linearGradient id="prefix__c" y1={0.5} y2={1}>
+        <stop offset={0.1} stopColor="#5ad" />
+        <stop offset={0.6} stopColor="#5c8" />
+        <stop offset={0.8} stopColor="#7d5" />
+      </linearGradient>
+      <path
+        d="M439 374c-50 77-131 98-163 96-191-9-162-262-47-261-82 52 30 224 195 157 17-12 20 3 15 8"
+        fill="url(#prefix__a)"
+      />
+      <path
+        d="M311 255c18-82-31-135-129-135S38 212 38 259c0 124 125 253 287 203-134 39-214-116-146-210 46-66 123-68 132 3M411 99h1"
+        fill="url(#prefix__b)"
+      />
+      <path
+        d="M39 253C51-15 419-30 472 202c14 107-86 149-166 115-42-26 26-20-3-99-48-112-251-103-264 35"
+        fill="url(#prefix__c)"
+      />
+    </svg>
+  );
+};

package/src/components/BrowserIcon/components/Firefox.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+
+import { SVGComponent } from '../types';
+
+export default ({ ...props }: SVGComponent) => {
+  return (
+    <svg aria-label="Firefox" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <linearGradient id="prefix__a" x1={0.7} x2={0.3} y2={0.8}>
+        <stop offset={0.3} stopColor="#fd5" />
+        <stop offset={0.6} stopColor="#f85" />
+        <stop offset={1} stopColor="#d06" />
+      </linearGradient>
+      <radialGradient cx={0.4} cy={0.7} id="prefix__b">
+        <stop offset={0.4} stopColor="#74d" />
+        <stop offset={1} stopColor="#a2d" />
+      </radialGradient>
+      <linearGradient id="prefix__c" x1={0.8} x2={0.4} y1={0.2} y2={0.8}>
+        <stop offset={0.2} stopColor="#fd5" />
+        <stop offset={1} stopColor="#f33" />
+      </linearGradient>
+      <g transform="scale(4)">
+        <path
+          d="M48 49s-3-9-1-16c-9 2-33 35-33 35a51 48 0 1087-32s5 9 5 15c-3-9-20-25-26-37-24 13-16 39-16 39"
+          fill="url(#prefix__a)"
+        />
+        <circle cx={64} cy={67} fill="url(#prefix__b)" r={26} />
+        <path
+          d="M21 45l43 12c-6 11-16 3-23 14a22 22 0 1034-20s33 3 17 42H28m36 25h1"
+          fill="url(#prefix__a)"
+        />
+        <path
+          d="M35 43c16 0 12 7 29 14-18 6-23-9-38 0 5 9 12 8 12 8 1 43 72 29 67-17a50 46.6 47 01-88 33c-9-18-1-40 16-51"
+          fill="url(#prefix__c)"
+        />
+      </g>
+    </svg>
+  );
+};

package/src/components/BrowserIcon/components/Opera.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import { SVGComponent } from '../types';
+
+export default ({ ...props }: SVGComponent) => {
+  return (
+    <svg aria-label="Opera" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <rect fill="#fff" height={512} rx="15%" width={512} />
+      <path
+        d="M185.2 377.2c-23.7-28-39.1-69.6-40.2-116.1v-10.2c1-46.5 16.5-88 40.2-116 30.9-40.1 76.7-65.5 128-65.5 31.4 0 60.9 9.6 86 26.3A214.2 214.2 0 00256.9 41h-.8a215 215 0 10143.3 375.3 155.1 155.1 0 01-86.2 26.3c-51.2 0-97-25.4-127.9-65.4"
+        fill="#ff1b2d"
+      />
+      <path
+        d="M185.2 134.8c19.7-23.2 45.2-37.3 73-37.3 62.7 0 113.4 71 113.4 158.5s-50.7 158.5-113.3 158.5c-27.9 0-53.3-14-73-37.3 30.8 40 76.6 65.4 127.8 65.4 31.5 0 61-9.6 86.2-26.3 44-39.4 71.7-96.6 71.7-160.3 0-63.7-27.7-121-71.7-160.3A155.1 155.1 0 00313 69.4c-51.2 0-97 25.4-127.9 65.4"
+        fill="#a70014"
+      />
+    </svg>
+  );
+};