diff --git a/web/app/components/base/icons/assets/public/common/docker-mark-white.svg b/web/app/components/base/icons/assets/public/common/docker-mark-white.svg
new file mode 100644
index 0000000000..4199fbb2b0
--- /dev/null
+++ b/web/app/components/base/icons/assets/public/common/docker-mark-white.svg
@@ -0,0 +1,3 @@
+
diff --git a/web/app/components/base/icons/assets/public/common/e2b.png b/web/app/components/base/icons/assets/public/common/e2b.png
new file mode 100644
index 0000000000..f6100bef3e
Binary files /dev/null and b/web/app/components/base/icons/assets/public/common/e2b.png differ
diff --git a/web/app/components/base/icons/assets/public/common/sandbox-local.svg b/web/app/components/base/icons/assets/public/common/sandbox-local.svg
new file mode 100644
index 0000000000..f62ddd32ab
--- /dev/null
+++ b/web/app/components/base/icons/assets/public/common/sandbox-local.svg
@@ -0,0 +1,28 @@
+
diff --git a/web/app/components/base/icons/src/public/common/DockerMarkWhite.json b/web/app/components/base/icons/src/public/common/DockerMarkWhite.json
new file mode 100644
index 0000000000..f8c2e6344a
--- /dev/null
+++ b/web/app/components/base/icons/src/public/common/DockerMarkWhite.json
@@ -0,0 +1,26 @@
+{
+ "icon": {
+ "type": "element",
+ "isRootNode": true,
+ "name": "svg",
+ "attributes": {
+ "width": "24",
+ "height": "24",
+ "viewBox": "0 0 756.26 596.9",
+ "fill": "none",
+ "xmlns": "http://www.w3.org/2000/svg"
+ },
+ "children": [
+ {
+ "type": "element",
+ "name": "path",
+ "attributes": {
+ "fill": "#fff",
+ "d": "M743.96,245.25c-18.54-12.48-67.26-17.81-102.68-8.27-1.91-35.28-20.1-65.01-53.38-90.95l-12.32-8.27-8.21,12.4c-16.14,24.5-22.94,57.14-20.53,86.81,1.9,18.28,8.26,38.83,20.53,53.74-46.1,26.74-88.59,20.67-276.77,20.67H.06c-.85,42.49,5.98,124.23,57.96,190.77,5.74,7.35,12.04,14.46,18.87,21.31,42.26,42.32,106.11,73.35,201.59,73.44,145.66.13,270.46-78.6,346.37-268.97,24.98.41,90.92,4.48,123.19-57.88.79-1.05,8.21-16.54,8.21-16.54l-12.3-8.27ZM189.67,206.39h-81.7v81.7h81.7v-81.7ZM295.22,206.39h-81.7v81.7h81.7v-81.7ZM400.77,206.39h-81.7v81.7h81.7v-81.7ZM506.32,206.39h-81.7v81.7h81.7v-81.7ZM84.12,206.39H2.42v81.7h81.7v-81.7ZM189.67,103.2h-81.7v81.7h81.7v-81.7ZM295.22,103.2h-81.7v81.7h81.7v-81.7ZM400.77,103.2h-81.7v81.7h81.7v-81.7ZM400.77,0h-81.7v81.7h81.7V0Z"
+ },
+ "children": []
+ }
+ ]
+ },
+ "name": "DockerMarkWhite"
+}
diff --git a/web/app/components/base/icons/src/public/common/DockerMarkWhite.tsx b/web/app/components/base/icons/src/public/common/DockerMarkWhite.tsx
new file mode 100644
index 0000000000..325380a9e2
--- /dev/null
+++ b/web/app/components/base/icons/src/public/common/DockerMarkWhite.tsx
@@ -0,0 +1,20 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import type { IconData } from '@/app/components/base/icons/IconBase'
+import * as React from 'react'
+import IconBase from '@/app/components/base/icons/IconBase'
+import data from './DockerMarkWhite.json'
+
+const Icon = (
+ {
+ ref,
+ ...props
+ }: React.SVGProps & {
+ ref?: React.RefObject>
+ },
+) =>
+
+Icon.displayName = 'DockerMarkWhite'
+
+export default Icon
diff --git a/web/app/components/base/icons/src/public/common/E2B.module.css b/web/app/components/base/icons/src/public/common/E2B.module.css
new file mode 100644
index 0000000000..7377120f7a
--- /dev/null
+++ b/web/app/components/base/icons/src/public/common/E2B.module.css
@@ -0,0 +1,5 @@
+.wrapper {
+ display: inline-flex;
+ background: url(~@/app/components/base/icons/assets/public/common/e2b.png) center center no-repeat;
+ background-size: contain;
+}
diff --git a/web/app/components/base/icons/src/public/common/E2B.tsx b/web/app/components/base/icons/src/public/common/E2B.tsx
new file mode 100644
index 0000000000..504cf93117
--- /dev/null
+++ b/web/app/components/base/icons/src/public/common/E2B.tsx
@@ -0,0 +1,20 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import * as React from 'react'
+import { cn } from '@/utils/classnames'
+import s from './E2B.module.css'
+
+const Icon = (
+ {
+ ref,
+ className,
+ ...restProps
+ }: React.DetailedHTMLProps, HTMLSpanElement> & {
+ ref?: React.RefObject
+ },
+) =>
+
+Icon.displayName = 'E2B'
+
+export default Icon
diff --git a/web/app/components/base/icons/src/public/common/SandboxLocal.json b/web/app/components/base/icons/src/public/common/SandboxLocal.json
new file mode 100644
index 0000000000..84742b3c67
--- /dev/null
+++ b/web/app/components/base/icons/src/public/common/SandboxLocal.json
@@ -0,0 +1,226 @@
+{
+ "icon": {
+ "type": "element",
+ "isRootNode": true,
+ "name": "svg",
+ "attributes": {
+ "width": "40",
+ "height": "40",
+ "viewBox": "0 0 40 40",
+ "fill": "none",
+ "xmlns": "http://www.w3.org/2000/svg"
+ },
+ "children": [
+ {
+ "type": "element",
+ "name": "path",
+ "attributes": {
+ "d": "M0 16C0 10.3995 0 7.59921 1.08993 5.46009C2.04867 3.57847 3.57847 2.04867 5.46009 1.08993C7.59921 0 10.3995 0 16 0H24C29.6005 0 32.4008 0 34.5399 1.08993C36.4215 2.04867 37.9513 3.57847 38.9101 5.46009C40 7.59921 40 10.3995 40 16V24C40 29.6005 40 32.4008 38.9101 34.5399C37.9513 36.4215 36.4215 37.9513 34.5399 38.9101C32.4008 40 29.6005 40 24 40H16C10.3995 40 7.59921 40 5.46009 38.9101C3.57847 37.9513 2.04867 36.4215 1.08993 34.5399C0 32.4008 0 29.6005 0 24V16Z",
+ "fill": "#828DAD"
+ },
+ "children": []
+ },
+ {
+ "type": "element",
+ "name": "path",
+ "attributes": {
+ "d": "M0 16C0 10.3995 0 7.59921 1.08993 5.46009C2.04867 3.57847 3.57847 2.04867 5.46009 1.08993C7.59921 0 10.3995 0 16 0H24C29.6005 0 32.4008 0 34.5399 1.08993C36.4215 2.04867 37.9513 3.57847 38.9101 5.46009C40 7.59921 40 10.3995 40 16V24C40 29.6005 40 32.4008 38.9101 34.5399C37.9513 36.4215 36.4215 37.9513 34.5399 38.9101C32.4008 40 29.6005 40 24 40H16C10.3995 40 7.59921 40 5.46009 38.9101C3.57847 37.9513 2.04867 36.4215 1.08993 34.5399C0 32.4008 0 29.6005 0 24V16Z",
+ "fill": "url(#paint0_linear_515_28967)"
+ },
+ "children": []
+ },
+ {
+ "type": "element",
+ "name": "path",
+ "attributes": {
+ "d": "M16 0.5H24C26.8085 0.5 28.8849 0.500573 30.5273 0.634766C32.1637 0.768464 33.3253 1.03224 34.3125 1.53516C36.1 2.44595 37.554 3.89996 38.4648 5.6875C38.9678 6.67471 39.2315 7.83635 39.3652 9.47266C39.4994 11.1151 39.5 13.1915 39.5 16V24C39.5 26.8085 39.4994 28.8849 39.3652 30.5273C39.2315 32.1637 38.9678 33.3253 38.4648 34.3125C37.554 36.1 36.1 37.554 34.3125 38.4648C33.3253 38.9678 32.1637 39.2315 30.5273 39.3652C28.8849 39.4994 26.8085 39.5 24 39.5H16C13.1915 39.5 11.1151 39.4994 9.47266 39.3652C7.83635 39.2315 6.67471 38.9678 5.6875 38.4648C3.89996 37.554 2.44595 36.1 1.53516 34.3125C1.03224 33.3253 0.768464 32.1637 0.634766 30.5273C0.500573 28.8849 0.5 26.8085 0.5 24V16C0.5 13.1915 0.500573 11.1151 0.634766 9.47266C0.768464 7.83635 1.03224 6.67471 1.53516 5.6875C2.44595 3.89996 3.89996 2.44595 5.6875 1.53516C6.67471 1.03224 7.83635 0.768464 9.47266 0.634766C11.1151 0.500573 13.1915 0.5 16 0.5Z",
+ "stroke": "#101828",
+ "stroke-opacity": "0.08"
+ },
+ "children": []
+ },
+ {
+ "type": "element",
+ "name": "g",
+ "attributes": {
+ "filter": "url(#filter0_d_515_28967)"
+ },
+ "children": [
+ {
+ "type": "element",
+ "name": "path",
+ "attributes": {
+ "d": "M20 9L29.5 14.5V25.5L21 30.4211V19.4234L11.4979 13.9222L20 9ZM10.5 15.6555V25.5L19 30.4211V20.5765L10.5 15.6555Z",
+ "fill": "url(#paint1_linear_515_28967)",
+ "shape-rendering": "crispEdges"
+ },
+ "children": []
+ }
+ ]
+ },
+ {
+ "type": "element",
+ "name": "defs",
+ "attributes": {},
+ "children": [
+ {
+ "type": "element",
+ "name": "filter",
+ "attributes": {
+ "id": "filter0_d_515_28967",
+ "x": "10",
+ "y": "8.75",
+ "width": "20",
+ "height": "22.4211",
+ "filterUnits": "userSpaceOnUse",
+ "color-interpolation-filters": "sRGB"
+ },
+ "children": [
+ {
+ "type": "element",
+ "name": "feFlood",
+ "attributes": {
+ "flood-opacity": "0",
+ "result": "BackgroundImageFix"
+ },
+ "children": []
+ },
+ {
+ "type": "element",
+ "name": "feColorMatrix",
+ "attributes": {
+ "in": "SourceAlpha",
+ "type": "matrix",
+ "values": "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",
+ "result": "hardAlpha"
+ },
+ "children": []
+ },
+ {
+ "type": "element",
+ "name": "feOffset",
+ "attributes": {
+ "dy": "0.25"
+ },
+ "children": []
+ },
+ {
+ "type": "element",
+ "name": "feGaussianBlur",
+ "attributes": {
+ "stdDeviation": "0.25"
+ },
+ "children": []
+ },
+ {
+ "type": "element",
+ "name": "feComposite",
+ "attributes": {
+ "in2": "hardAlpha",
+ "operator": "out"
+ },
+ "children": []
+ },
+ {
+ "type": "element",
+ "name": "feColorMatrix",
+ "attributes": {
+ "type": "matrix",
+ "values": "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"
+ },
+ "children": []
+ },
+ {
+ "type": "element",
+ "name": "feBlend",
+ "attributes": {
+ "mode": "normal",
+ "in2": "BackgroundImageFix",
+ "result": "effect1_dropShadow_515_28967"
+ },
+ "children": []
+ },
+ {
+ "type": "element",
+ "name": "feBlend",
+ "attributes": {
+ "mode": "normal",
+ "in": "SourceGraphic",
+ "in2": "effect1_dropShadow_515_28967",
+ "result": "shape"
+ },
+ "children": []
+ }
+ ]
+ },
+ {
+ "type": "element",
+ "name": "linearGradient",
+ "attributes": {
+ "id": "paint0_linear_515_28967",
+ "x1": "0",
+ "y1": "0",
+ "x2": "40",
+ "y2": "40",
+ "gradientUnits": "userSpaceOnUse"
+ },
+ "children": [
+ {
+ "type": "element",
+ "name": "stop",
+ "attributes": {
+ "stop-color": "white",
+ "stop-opacity": "0.12"
+ },
+ "children": []
+ },
+ {
+ "type": "element",
+ "name": "stop",
+ "attributes": {
+ "offset": "1",
+ "stop-color": "white",
+ "stop-opacity": "0.08"
+ },
+ "children": []
+ }
+ ]
+ },
+ {
+ "type": "element",
+ "name": "linearGradient",
+ "attributes": {
+ "id": "paint1_linear_515_28967",
+ "x1": "20",
+ "y1": "9",
+ "x2": "20",
+ "y2": "30.4211",
+ "gradientUnits": "userSpaceOnUse"
+ },
+ "children": [
+ {
+ "type": "element",
+ "name": "stop",
+ "attributes": {
+ "stop-color": "white"
+ },
+ "children": []
+ },
+ {
+ "type": "element",
+ "name": "stop",
+ "attributes": {
+ "offset": "1",
+ "stop-color": "white",
+ "stop-opacity": "0.9"
+ },
+ "children": []
+ }
+ ]
+ }
+ ]
+ }
+ ]
+ },
+ "name": "SandboxLocal"
+}
diff --git a/web/app/components/base/icons/src/public/common/SandboxLocal.tsx b/web/app/components/base/icons/src/public/common/SandboxLocal.tsx
new file mode 100644
index 0000000000..40844bc548
--- /dev/null
+++ b/web/app/components/base/icons/src/public/common/SandboxLocal.tsx
@@ -0,0 +1,20 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import type { IconData } from '@/app/components/base/icons/IconBase'
+import * as React from 'react'
+import IconBase from '@/app/components/base/icons/IconBase'
+import data from './SandboxLocal.json'
+
+const Icon = (
+ {
+ ref,
+ ...props
+ }: React.SVGProps & {
+ ref?: React.RefObject>
+ },
+) =>
+
+Icon.displayName = 'SandboxLocal'
+
+export default Icon
diff --git a/web/app/components/base/icons/src/public/common/index.ts b/web/app/components/base/icons/src/public/common/index.ts
index 5708fa4dd6..11747913dd 100644
--- a/web/app/components/base/icons/src/public/common/index.ts
+++ b/web/app/components/base/icons/src/public/common/index.ts
@@ -1,6 +1,8 @@
export { default as D } from './D'
export { default as DiagonalDividingLine } from './DiagonalDividingLine'
export { default as Dify } from './Dify'
+export { default as DockerMarkWhite } from './DockerMarkWhite'
+export { default as E2B } from './E2B'
export { default as EnterKey } from './EnterKey'
export { default as Gdpr } from './Gdpr'
export { default as Github } from './Github'
@@ -12,6 +14,7 @@ export { default as MessageChatSquare } from './MessageChatSquare'
export { default as MultiPathRetrieval } from './MultiPathRetrieval'
export { default as Notion } from './Notion'
export { default as NTo1Retrieval } from './NTo1Retrieval'
+export { default as SandboxLocal } from './SandboxLocal'
export { default as Soc2 } from './Soc2'
export { default as SparklesSoft } from './SparklesSoft'
export { default as SparklesSoftAccent } from './SparklesSoftAccent'
diff --git a/web/app/components/header/account-setting/sandbox-provider-page/provider-icon.tsx b/web/app/components/header/account-setting/sandbox-provider-page/provider-icon.tsx
index d747acf5be..4bd6252f76 100644
--- a/web/app/components/header/account-setting/sandbox-provider-page/provider-icon.tsx
+++ b/web/app/components/header/account-setting/sandbox-provider-page/provider-icon.tsx
@@ -1,3 +1,6 @@
+import DockerMarkWhite from '@/app/components/base/icons/src/public/common/DockerMarkWhite'
+import E2B from '@/app/components/base/icons/src/public/common/E2B'
+import SandboxLocal from '@/app/components/base/icons/src/public/common/SandboxLocal'
import { cn } from '@/utils/classnames'
import { PROVIDER_ICONS } from './constants'
@@ -7,13 +10,88 @@ type ProviderIconProps = {
withBorder?: boolean
}
-const ProviderIcon = ({ providerType, size = 'md', withBorder = false }: ProviderIconProps) => {
- const iconSrc = PROVIDER_ICONS[providerType] || PROVIDER_ICONS.e2b
+const DOCKER_BRAND_BLUE = '#1D63ED'
+
+const ProviderIcon = ({
+ providerType,
+ size = 'md',
+ withBorder = false,
+}: ProviderIconProps) => {
const sizeClass = size === 'sm' ? 'h-4 w-4' : 'h-6 w-6'
+ if (providerType === 'docker') {
+ const inner = (
+
+
+
+ )
+ if (withBorder) {
+ return (
+
+ {inner}
+
+ )
+ }
+ return inner
+ }
+
+ if (providerType === 'e2b') {
+ const inner = (
+
+ )
+ if (withBorder) {
+ return (
+
+ {inner}
+
+ )
+ }
+ return inner
+ }
+
+ if (providerType === 'local') {
+ if (withBorder) {
+ return (
+
+
+
+ )
+ }
+ return
+ }
+
+ const iconSrc = PROVIDER_ICONS[providerType] || PROVIDER_ICONS.e2b
if (withBorder) {
return (
-
+
+
)
}