Allow svg icon to customize color according to theme

isthaison · Dec 3, 2024 · d661f1f · d661f1f
1 parent ea4e1f8
commit d661f1f
Show file tree

Hide file tree

Showing 11 changed files with 122 additions and 241 deletions.
diff --git a/web/src/assets/icon/Icon.tsx b/web/src/assets/icon/Icon.tsx
@@ -144,6 +144,66 @@ const PromptSvg = () => (
     ></path>
   </svg>
 );
+const WikipediaSvg = () => (
+  <svg
+    viewBox="0 0 1024 1024"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    width="200"
+    height="200"
+  >
+    <path
+      d="M515.84 559.744c-39.936 82.432-94.592 194.048-121.728 244.394667-26.282667 45.824-48.085333 39.722667-65.365333 1.237333-59.989333-141.696-183.168-390.144-241.109334-529.450667-10.709333-25.642667-18.816-42.112-26.410666-48.597333-7.722667-6.4-23.637333-10.24-47.872-11.562667C4.394667 214.741333 0 212.565333 0 208.981333v-19.413333l2.218667-1.92c39.424-0.213333 230.442667 0 230.442666 0l2.176 1.92v18.517333c0 5.077333-3.2 7.509333-9.6 7.509334l-24.064 1.322666c-20.693333 1.237333-31.018667 6.997333-31.018666 18.602667 0 5.76 2.261333 14.08 7.082666 25.642667 46.165333 112.896 205.568 448.896 205.568 448.896l5.802667 1.962666 102.869333-205.226666-20.565333-45.525334-70.741333-139.264s-13.568-27.904-18.261334-37.205333c-31.061333-61.568-30.378667-64.768-61.738666-68.992-8.832-0.981333-13.354667-2.133333-13.354667-6.357333v-19.968l2.56-1.92h183.125333l4.821334 1.578666v19.242667c0 4.48-3.242667 6.4-9.685334 6.4l-13.141333 2.005333c-33.792 2.602667-28.202667 16.256-5.802667 60.672l67.498667 138.752 75.008-149.504c12.501333-27.306667 9.941333-34.176 4.736-40.405333-2.986667-3.584-13.013333-9.386667-34.645333-10.24l-8.576-0.896a9.728 9.728 0 0 1-6.186667-2.176 6.4 6.4 0 0 1-2.858667-5.504v-18.218667l2.602667-1.92c53.205333-0.341333 172.501333 0 172.501333 0l2.517334 1.92v18.602667c0 5.162667-2.517333 7.594667-8.234667 7.594667-27.562667 1.28-33.365333 4.053333-43.648 18.730666-5.12 7.936-16 25.130667-27.562667 44.330667l-98.176 182.314667-2.773333 5.76 119.125333 243.712 7.253334 2.048 187.562666-445.354667c6.570667-18.005333 5.504-30.805333-2.730666-38.186667-8.405333-7.338667-14.762667-11.648-36.565334-12.586666l-17.92-0.682667a10.88 10.88 0 0 1-6.485333-1.92c-1.834667-1.237333-3.072-3.2-3.072-5.077333v-18.602667l2.517333-1.92h211.669334l1.749333 1.92v18.645333c0 5.077333-3.157333 7.68-8.917333 7.68-27.648 1.28-48.085333 7.68-61.568 17.962667-13.397333 10.88-23.765333 26.282667-31.402667 45.525333 0 0-172.501333 395.008-231.509333 526.464-22.4 42.965333-44.928 39.125333-64.128-1.322666-24.362667-49.962667-75.648-161.536-112.896-243.626667l2.261333-1.536z"
+      fill={currentColor}
+    ></path>
+  </svg>
+);
+const KeywordSvg = () => (
+  <svg
+    viewBox="0 0 1024 1024"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    width="200"
+    height="200"
+  >
+    <path
+      d="M419.999992 631.999988v-136.699998c74.443999-50.009999 119.999998-134.033997 119.999997-223.299995C539.999989 123.113998 418.885992 0 269.999995 0S0 123.113998 0 271.999995c0 89.267998 45.555999 173.291997 119.999998 223.299995V871.999983c0 7.968 3.164 15.586 8.789999 21.21l119.999998 121.999997A29.903999 29.903999 0 0 0 269.999995 1023.99998a29.899999 29.899999 0 0 0 21.209999-8.79l119.999998-121.999997c11.718-11.718 11.718-30.703999 0-42.422L372.421993 811.999984l38.789999-38.789999c11.718-11.718 11.718-30.703999 0-42.421999L372.421993 691.999986l38.789999-38.789999A29.979999 29.979999 0 0 0 419.999992 631.999988z m-149.999997-329.999994c-49.627999 0-89.999998-40.371999-89.999999-89.999998s40.371999-89.999998 89.999999-89.999998 89.999998 40.371999 89.999998 89.999998-40.371999 89.999998-89.999998 89.999998z"
+      fill={currentColor}
+    ></path>
+    <path
+      d="M933.999982 361.999993c-39.059999 0-72.047999 25.156-84.473999 59.999999H753.999985a30.011999 30.011999 0 0 0-26.835999 16.581999L675.455987 541.999989H509.99999c-16.582 0-29.999999 13.418-29.999999 30s13.418 29.999999 29.999999 29.999999h183.999996a30.011999 30.011999 0 0 0 26.836-16.581999L772.543985 481.999991h76.981998c12.426 34.843999 45.413999 59.999999 84.473999 59.999998 49.627999 0 89.999998-40.371999 89.999998-89.999998s-40.371999-89.999998-89.999998-89.999998zM933.999982 601.999988c-39.059999 0-72.047999 25.156-84.473999 59.999999H509.99999c-16.582 0-29.999999 13.418-29.999999 29.999999s13.418 29.999999 29.999999 30h339.525993c12.426 34.843999 45.413999 59.999999 84.473999 59.999999 49.627999 0 89.999998-40.371999 89.999998-89.999999s-40.371999-89.999998-89.999998-89.999998zM933.999982 841.999984c-39.059999 0-72.047999 25.156-84.473999 59.999998h-76.981998l-51.707999-103.417998A30.011999 30.011999 0 0 0 693.999986 781.999985h-183.999996c-16.582 0-29.999999 13.418-29.999999 29.999999s13.418 29.999999 29.999999 30h165.455997l51.707999 103.417998C732.261986 955.583981 742.631985 963.999981 753.999985 963.999981h95.525998c12.426 34.843999 45.413999 59.999999 84.473999 59.999999 49.627999 0 89.999998-42.371999 89.999998-91.999998s-40.371999-89.999998-89.999998-89.999998zM933.999982 121.999998c-39.059999 0-72.047999 25.156-84.473999 59.999998H753.999985c-10.02 0-19.394 5.01-24.959999 13.36L617.945988 361.999993H569.999989c-16.582 0-29.999999 13.418-30 29.999999s13.418 29.999999 30 30h63.999999c10.02 0 19.394-5.01 24.959999-13.36L770.053985 241.999995h79.471998c12.426 34.843999 45.413999 59.999999 84.473999 59.999999 49.627999 0 89.999998-40.371999 89.999998-89.999998s-40.371999-89.999998-89.999998-89.999998z"
+      fill={currentColor}
+    ></path>
+  </svg>
+);
+const GitHubSvg = () => (
+  <svg
+    viewBox="0 0 1024 1024"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    width="200"
+    height="200"
+  >
+    <path
+      fill={currentColor}
+      d="M938.666667 512a426.666667 426.666667 0 0 1-291.84 404.48 22.186667 22.186667 0 0 1-19.2-2.986667 21.76 21.76 0 0 1-8.96-17.493333v-113.92a170.666667 170.666667 0 0 0-21.333334-87.893333 10.666667 10.666667 0 0 1 0-11.52 11.52 11.52 0 0 1 8.533334-5.973334c104.106667-10.666667 162.133333-52.053333 162.133333-164.693333a200.96 200.96 0 0 0-50.773333-143.36 183.466667 183.466667 0 0 0 8.106666-51.2 184.746667 184.746667 0 0 0-6.4-46.08 20.906667 20.906667 0 0 0-22.613333-15.36 189.866667 189.866667 0 0 0-104.106667 50.346667 422.826667 422.826667 0 0 0-160.426666 0A189.866667 189.866667 0 0 0 327.68 256a20.906667 20.906667 0 0 0-22.613333 15.36A184.746667 184.746667 0 0 0 298.666667 317.44a183.466667 183.466667 0 0 0 8.106666 51.2A200.96 200.96 0 0 0 256 512c0 118.613333 64.426667 158.293333 182.613333 168.106667a158.293333 158.293333 0 0 0-29.44 65.28v5.12a29.013333 29.013333 0 0 0 0 5.973333 25.173333 25.173333 0 0 1-27.306666 21.76 42.666667 42.666667 0 0 1-18.346667-5.12 227.84 227.84 0 0 1-60.586667-53.76 430.506667 430.506667 0 0 0-34.133333-34.56 116.906667 116.906667 0 0 0-25.173333-16.64 20.906667 20.906667 0 0 0-20.48 0 21.333333 21.333333 0 0 0-9.813334 17.92v2.56a21.333333 21.333333 0 0 0 9.813334 17.92 193.706667 193.706667 0 0 1 39.253333 44.8 282.026667 282.026667 0 0 0 67.84 73.386667 105.813333 105.813333 0 0 0 59.733333 17.92h15.36V896a21.76 21.76 0 0 1-8.96 17.493333 22.186667 22.186667 0 0 1-19.2 2.986667A426.666667 426.666667 0 1 1 938.666667 512z"
+    ></path>
+  </svg>
+);
+const QWeatherSvg = () => (
+  <svg
+    viewBox="0 0 1024 1024"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    width="200"
+    height="200"
+  >
+    <path
+      fill={currentColor}
+      d="M953.6 736c-57.6 51.2-89.6 89.6-166.4 102.4 166.4-160 185.6-422.4 44.8-608-64-89.6-166.4-147.2-275.2-172.8-108.8-19.2-224 0-326.4 57.6-96 57.6-172.8 147.2-204.8 256-32 108.8-32 224 19.2 326.4 44.8 102.4 128 185.6 230.4 236.8 102.4 44.8 217.6 57.6 326.4 25.6 96 6.4 192-12.8 275.2-57.6 70.4-38.4 102.4-96 147.2-160l-70.4-6.4z m-537.6 172.8c-83.2-12.8-166.4-51.2-224-108.8-121.6-128-140.8-326.4-32-467.2 51.2-70.4 128-121.6 211.2-140.8 76.8-19.2 166.4-12.8 243.2 25.6 76.8 38.4 140.8 102.4 172.8 185.6 32 76.8 38.4 166.4 12.8 249.6-25.6 83.2-83.2 153.6-153.6 198.4-25.6 0-44.8-6.4-70.4-6.4-83.2-19.2-153.6-70.4-204.8-134.4-25.6-32-44.8-76.8-44.8-121.6 0-38.4 12.8-70.4 32-96 32-38.4 76.8-57.6 121.6-57.6 12.8 0 25.6 0 38.4 6.4 6.4 0 12.8 0 12.8 6.4 25.6 0 44.8 19.2 57.6 38.4 25.6 44.8 12.8 96-25.6 128-32 12.8-64 19.2-89.6 6.4h-12.8c0 6.4-6.4 6.4 0 12.8 19.2 32 51.2 51.2 89.6 51.2 25.6 0 51.2-6.4 76.8-19.2 57.6-32 96-89.6 96-153.6 0-38.4-12.8-70.4-32-102.4 0 0 0-6.4-6.4-6.4 0 0 0-6.4-6.4-6.4-51.2-64-128-102.4-217.6-102.4-83.2 0-153.6 32-211.2 89.6-83.2 83.2-102.4 211.2-44.8 320 51.2 89.6 128 160 217.6 204.8h-6.4z"
+    ></path>
+  </svg>
+);
 
 export const ApiIcon = (props: Partial<IconComponentProps>) => (
   <Icon component={ApiSvg} {...props} />
@@ -166,3 +226,15 @@ export const ModelProviderIcon = (props: Partial<IconComponentProps>) => (
 export const PromptIcon = (props: Partial<IconComponentProps>) => (
   <Icon component={PromptSvg} {...props} />
 );
+export const WikipediaIcon = (props: Partial<IconComponentProps>) => (
+  <Icon component={WikipediaSvg} {...props} />
+);
+export const KeywordIcon = (props: Partial<IconComponentProps>) => (
+  <Icon component={KeywordSvg} {...props} />
+);
+export const GitHubIcon = (props: Partial<IconComponentProps>) => (
+  <Icon component={GitHubSvg} {...props} />
+);
+export const QWeatherIcon = (props: Partial<IconComponentProps>) => (
+  <Icon component={QWeatherSvg} {...props} />
+);
diff --git a/web/src/components/llm-setting-items/index.tsx b/web/src/components/llm-setting-items/index.tsx
@@ -269,7 +269,7 @@ const LlmSettingItems = ({ prefix, formItemLayout = {} }: IProps) => {
                     >
                       <Slider
                         className={styles.variableSlider}
-                        max={8192}
+                        max={128000}
                         disabled={disabled}
                       />
                     </Form.Item>
@@ -278,7 +278,7 @@ const LlmSettingItems = ({ prefix, formItemLayout = {} }: IProps) => {
                     <InputNumber
                       disabled={disabled}
                       className={styles.sliderInputNumber}
-                      max={8192}
+                      max={128000}
                       min={0}
                     />
                   </Form.Item>

diff --git a/web/src/components/message-item/index.less b/web/src/components/message-item/index.less
@@ -35,7 +35,7 @@
   .messageTextDark {
     .chunkText();
     .messageTextBase();
-    background-color: rgba(36, 50, 252, 0.3);
+    background-color: #1668dc;
     word-break: break-all;
   }
 

diff --git a/web/src/locales/vi.ts b/web/src/locales/vi.ts
@@ -76,6 +76,7 @@ export default {
       namePlaceholder: 'Vui lòng nhập tên!',
       doc: 'Tài liệu',
       searchKnowledgePlaceholder: 'Tìm kiếm',
+      noMoreData: 'Tất cả chỉ có thế, không còn gì nữa',
     },
     knowledgeDetails: {
       dataset: 'Dữ liệu',

diff --git a/web/src/pages/chat/chat-configuration-modal/model-setting.tsx b/web/src/pages/chat/chat-configuration-modal/model-setting.tsx
@@ -42,224 +42,6 @@ const ModelSetting = ({
       })}
     >
       {visible && <LlmSettingItems prefix="llm_setting"></LlmSettingItems>}
-      {/* <Form.Item
-        label={t('model')}
-        name="llm_id"
-        tooltip={t('modelTip')}
-        rules={[{ required: true, message: t('modelMessage') }]}
-      >
-        <Select options={modelOptions[LlmModelType.Chat]} showSearch />
-      </Form.Item>
-      <Divider></Divider>
-      <Form.Item
-        label={t('freedom')}
-        name="parameters"
-        tooltip={t('freedomTip')}
-        initialValue={ModelVariableType.Precise}
-      >
-        <Select<ModelVariableType>
-          options={parameterOptions}
-          onChange={handleParametersChange}
-        />
-      </Form.Item>
-      <Form.Item label={t('temperature')} tooltip={t('temperatureTip')}>
-        <Flex gap={20} align="center">
-          <Form.Item
-            name={'temperatureEnabled'}
-            valuePropName="checked"
-            noStyle
-          >
-            <Switch size="small" />
-          </Form.Item>
-          <Form.Item noStyle dependencies={['temperatureEnabled']}>
-            {({ getFieldValue }) => {
-              const disabled = !getFieldValue('temperatureEnabled');
-              return (
-                <>
-                  <Flex flex={1}>
-                    <Form.Item name={['llm_setting', 'temperature']} noStyle>
-                      <Slider
-                        className={styles.variableSlider}
-                        max={1}
-                        step={0.01}
-                        disabled={disabled}
-                      />
-                    </Form.Item>
-                  </Flex>
-                  <Form.Item name={['llm_setting', 'temperature']} noStyle>
-                    <InputNumber
-                      className={styles.sliderInputNumber}
-                      max={1}
-                      min={0}
-                      step={0.01}
-                      disabled={disabled}
-                    />
-                  </Form.Item>
-                </>
-              );
-            }}
-          </Form.Item>
-        </Flex>
-      </Form.Item>
-      <Form.Item label={t('topP')} tooltip={t('topPTip')}>
-        <Flex gap={20} align="center">
-          <Form.Item name={'topPEnabled'} valuePropName="checked" noStyle>
-            <Switch size="small" />
-          </Form.Item>
-          <Form.Item noStyle dependencies={['topPEnabled']}>
-            {({ getFieldValue }) => {
-              const disabled = !getFieldValue('topPEnabled');
-              return (
-                <>
-                  <Flex flex={1}>
-                    <Form.Item name={['llm_setting', 'top_p']} noStyle>
-                      <Slider
-                        className={styles.variableSlider}
-                        max={1}
-                        step={0.01}
-                        disabled={disabled}
-                      />
-                    </Form.Item>
-                  </Flex>
-                  <Form.Item name={['llm_setting', 'top_p']} noStyle>
-                    <InputNumber
-                      className={styles.sliderInputNumber}
-                      max={1}
-                      min={0}
-                      step={0.01}
-                      disabled={disabled}
-                    />
-                  </Form.Item>
-                </>
-              );
-            }}
-          </Form.Item>
-        </Flex>
-      </Form.Item>
-      <Form.Item label={t('presencePenalty')} tooltip={t('presencePenaltyTip')}>
-        <Flex gap={20} align="center">
-          <Form.Item
-            name={'presencePenaltyEnabled'}
-            valuePropName="checked"
-            noStyle
-          >
-            <Switch size="small" />
-          </Form.Item>
-          <Form.Item noStyle dependencies={['presencePenaltyEnabled']}>
-            {({ getFieldValue }) => {
-              const disabled = !getFieldValue('presencePenaltyEnabled');
-              return (
-                <>
-                  <Flex flex={1}>
-                    <Form.Item
-                      name={['llm_setting', 'presence_penalty']}
-                      noStyle
-                    >
-                      <Slider
-                        className={styles.variableSlider}
-                        max={1}
-                        step={0.01}
-                        disabled={disabled}
-                      />
-                    </Form.Item>
-                  </Flex>
-                  <Form.Item name={['llm_setting', 'presence_penalty']} noStyle>
-                    <InputNumber
-                      className={styles.sliderInputNumber}
-                      max={1}
-                      min={0}
-                      step={0.01}
-                      disabled={disabled}
-                    />
-                  </Form.Item>
-                </>
-              );
-            }}
-          </Form.Item>
-        </Flex>
-      </Form.Item>
-      <Form.Item
-        label={t('frequencyPenalty')}
-        tooltip={t('frequencyPenaltyTip')}
-      >
-        <Flex gap={20} align="center">
-          <Form.Item
-            name={'frequencyPenaltyEnabled'}
-            valuePropName="checked"
-            noStyle
-          >
-            <Switch size="small" />
-          </Form.Item>
-          <Form.Item noStyle dependencies={['frequencyPenaltyEnabled']}>
-            {({ getFieldValue }) => {
-              const disabled = !getFieldValue('frequencyPenaltyEnabled');
-              return (
-                <>
-                  <Flex flex={1}>
-                    <Form.Item
-                      name={['llm_setting', 'frequency_penalty']}
-                      noStyle
-                    >
-                      <Slider
-                        className={styles.variableSlider}
-                        max={1}
-                        step={0.01}
-                        disabled={disabled}
-                      />
-                    </Form.Item>
-                  </Flex>
-                  <Form.Item
-                    name={['llm_setting', 'frequency_penalty']}
-                    noStyle
-                  >
-                    <InputNumber
-                      className={styles.sliderInputNumber}
-                      max={1}
-                      min={0}
-                      step={0.01}
-                      disabled={disabled}
-                    />
-                  </Form.Item>
-                </>
-              );
-            }}
-          </Form.Item>
-        </Flex>
-      </Form.Item>
-      <Form.Item label={t('maxTokens')} tooltip={t('maxTokensTip')}>
-        <Flex gap={20} align="center">
-          <Form.Item name={'maxTokensEnabled'} valuePropName="checked" noStyle>
-            <Switch size="small" />
-          </Form.Item>
-          <Form.Item noStyle dependencies={['maxTokensEnabled']}>
-            {({ getFieldValue }) => {
-              const disabled = !getFieldValue('maxTokensEnabled');
-
-              return (
-                <>
-                  <Flex flex={1}>
-                    <Form.Item name={['llm_setting', 'max_tokens']} noStyle>
-                      <Slider
-                        className={styles.variableSlider}
-                        max={2048}
-                        disabled={disabled}
-                      />
-                    </Form.Item>
-                  </Flex>
-                  <Form.Item name={['llm_setting', 'max_tokens']} noStyle>
-                    <InputNumber
-                      disabled={disabled}
-                      className={styles.sliderInputNumber}
-                      max={2048}
-                      min={0}
-                    />
-                  </Form.Item>
-                </>
-              );
-            }}
-          </Form.Item>
-        </Flex>
-      </Form.Item> */}
     </section>
   );
 };

diff --git a/web/src/pages/flow/canvas/edge/index.less b/web/src/pages/flow/canvas/edge/index.less
@@ -13,3 +13,19 @@
 .edgeButton:hover {
   box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.08);
 }
+
+.edgeButtonDark {
+  width: 14px;
+  height: 14px;
+  background: #0e0c0c;
+  border: 1px solid #fff;
+  padding: 0;
+  cursor: pointer;
+  border-radius: 50%;
+  font-size: 10px;
+  line-height: 1;
+}
+
+.edgeButtonDark:hover {
+  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.08);
+}
diff --git a/web/src/pages/flow/canvas/edge/index.tsx b/web/src/pages/flow/canvas/edge/index.tsx
@@ -6,6 +6,7 @@ import {
 } from 'reactflow';
 import useGraphStore from '../../store';
 
+import { useTheme } from '@/components/theme-provider';
 import { useFetchFlow } from '@/hooks/flow-hooks';
 import { useMemo } from 'react';
 import styles from './index.less';
@@ -33,7 +34,7 @@ export function ButtonEdge({
     targetY,
     targetPosition,
   });
-
+  const { theme } = useTheme();
   const selectedStyle = useMemo(() => {
     return selected ? { strokeWidth: 2, stroke: '#1677ff' } : {};
   }, [selected]);
@@ -93,7 +94,9 @@ export function ButtonEdge({
           className="nodrag nopan"
         >
           <button
-            className={styles.edgeButton}
+            className={
+              theme === 'dark' ? styles.edgeButtonDark : styles.edgeButton
+            }
             type="button"
             onClick={onEdgeClick}
           >