chore: add english comment

src/components/markdown-viewer/index.tsx

@@ -0,0 +1,28 @@
+import { marked, Tokens } from 'marked';
+import React from 'react';
+
+interface MarkdownViewerProps {
+  content: string;
+  height?: string;
+}
+
+const MarkdownViewer: React.FC<MarkdownViewerProps> = ({
+  content,
+  height = 'auto'
+}) => {
+  const renderer = new marked.Renderer();
+
+  renderer.link = ({ href, title, text }: Tokens.Link) => {
+    return `<a href="${href}" title="${title || ''}" target="_blank" rel="noopener noreferrer">${text}</a>`;
+  };
+
+  return (
+    <div style={{ height, overflow: 'auto' }}>
+      <div
+        dangerouslySetInnerHTML={{ __html: marked(content, { renderer }) }}
+      />
+    </div>
+  );
+};
+
+export default React.memo(MarkdownViewer);

src/components/short-cuts/index.tsx

@@ -1,75 +1,27 @@
-import { platformCall } from '@/utils';
 import { SearchOutlined } from '@ant-design/icons';
 import { Input, Table, Tag } from 'antd';
 import _ from 'lodash';
 import React from 'react';
-import IconFont from '../icon-font';
 import './index.less';
-
-const dataSource = [
-  {
-    scope: 'playground',
-    command: 'New Message',
-    keybindingWin: 'Ctrl + N',
-    keybindingMac: 'N'
-  },
-  {
-    scope: 'models',
-    span: {
-      rowSpan: 3,
-      colSpan: 1
-    },
-    command: 'deploy model from Hugging Face',
-    keybindingWin: 'Ctrl + 1',
-    keybindingMac: '1'
-  },
-  {
-    scope: 'models',
-    command: 'deploy model from Ollama Library',
-    keybindingWin: 'Ctrl + 2',
-    keybindingMac: '2',
-    span: {
-      rowSpan: 0,
-      colSpan: 0
-    }
-  },
-  {
-    scope: 'models',
-    command: '从 Hugging Face 搜索模型',
-    keybindingWin: 'Ctrl + K',
-    keybindingMac: 'K',
-    span: {
-      rowSpan: 0,
-      colSpan: 0
-    }
-  }
-];
+import KeyMapConfig from './keymap';
 
 const ShortCuts: React.FC<{ intl: any }> = ({ intl }) => {
-  const platform = platformCall();
-
-  const [dataList, setDataList] = React.useState<any[]>(dataSource);
+  const [dataList, setDataList] = React.useState<any[]>(KeyMapConfig);
 
   const columns = [
     {
       title: 'Scope',
       dataIndex: 'scope',
       key: 'scope',
-      width: 120,
-      onCell: (row: any, index: number) => {
-        if (row.span) {
-          return row.span;
-        }
-        return {
-          rowSpan: 1,
-          colSpan: 1
-        };
-      }
+      width: 160
     },
     {
-      title: 'Command',
+      title: 'Action',
       dataIndex: 'command',
-      key: 'command'
+      key: 'command',
+      render: (text: string, row: any) => {
+        return <span>{intl.formatMessage({ id: text })}</span>;
+      }
     },
     {
       title: 'Keybinding',
@@ -77,21 +29,14 @@ const ShortCuts: React.FC<{ intl: any }> = ({ intl }) => {
       key: 'keybinding',
       width: 180,
       render: (text: string, row: any) => {
-        if (platform.isMac) {
-          return (
-            <Tag>
-              <IconFont type="icon-command"></IconFont> + {row.keybindingMac}
-            </Tag>
-          );
-        }
-        return <Tag>{row.keybindingWin}</Tag>;
+        return <Tag>{row.keybinding}</Tag>;
       }
     }
   ];
 
   const handleInputChange = (e: any) => {
     const value = e.target.value;
-    const list = _.filter(dataSource, (item: any) => {
+    const list = _.filter(KeyMapConfig, (item: any) => {
       return (
         item.command.toLowerCase().includes(value.toLowerCase()) ||
         item.scope.toLowerCase().includes(value.toLowerCase())
@@ -103,10 +48,12 @@ const ShortCuts: React.FC<{ intl: any }> = ({ intl }) => {
   const debounceHandleInputChange = _.debounce(handleInputChange, 300);
   return (
     <div className="short-cuts">
-      <h3 style={{ marginBottom: 20 }}>GPUStack 快捷方式</h3>
+      <h3 style={{ marginBottom: 20, fontWeight: 'var(--font-weight-bold)' }}>
+        {intl.formatMessage({ id: 'shortcuts.title' })}
+      </h3>
       <Input
         allowClear
-        placeholder="Search keybindings"
+        placeholder={intl.formatMessage({ id: 'shortcuts.search.placeholder' })}
         style={{ marginBottom: 16 }}
         onChange={debounceHandleInputChange}
         prefix={
@@ -125,6 +72,7 @@ const ShortCuts: React.FC<{ intl: any }> = ({ intl }) => {
         columns={columns}
         dataSource={dataList}
         pagination={false}
+        scroll={{ y: 450 }}
       ></Table>
     </div>
   );
@@ -138,7 +86,7 @@ export const modalConfig = {
   style: {
     top: '10%'
   },
-  width: 660
+  width: 700
 };
 
 export default React.memo(ShortCuts);

src/components/short-cuts/keymap.ts

@@ -0,0 +1,60 @@
+import { KeyMap } from '@/config/hotkeys';
+export default [
+  {
+    scope: 'playground',
+    command: 'shortcuts.playground.newmessage',
+    keybinding: KeyMap.CREATE.iconKeybinding
+  },
+  {
+    scope: 'playground',
+    command: 'shortcuts.playground.clearmessage',
+    keybinding: KeyMap.CLEAR.iconKeybinding
+  },
+  {
+    scope: 'playground',
+    command: 'shortcuts.playground.toggleparams',
+    keybinding: KeyMap.RIGHT.iconKeybinding
+  },
+  {
+    scope: 'models',
+    // span: {
+    //   rowSpan: 3,
+    //   colSpan: 1
+    // },
+    command: 'shortcuts.models.newmodelHF',
+    keybinding: KeyMap.NEW1.iconKeybinding
+  },
+  {
+    scope: 'models',
+    command: 'shortcuts.models.newmodelLM',
+    keybinding: KeyMap.NEW2.iconKeybinding
+    // span: {
+    //   rowSpan: 0,
+    //   colSpan: 0
+    // }
+  },
+  {
+    scope: 'models',
+    command: 'shortcuts.models.search',
+    keybinding: KeyMap.SEARCH.iconKeybinding
+    // span: {
+    //   rowSpan: 0,
+    //   colSpan: 0
+    // }
+  },
+  {
+    scope: 'resources',
+    command: 'shortcuts.resources.addworker',
+    keybinding: KeyMap.CREATE.iconKeybinding
+  },
+  {
+    scope: 'API keys',
+    command: 'shortcuts.apikeys.new',
+    keybinding: KeyMap.CREATE.iconKeybinding
+  },
+  {
+    scope: 'users',
+    command: 'shortcuts.users.new',
+    keybinding: KeyMap.CREATE.iconKeybinding
+  }
+];