fix: model list duplicate

config/config.ts

@@ -18,6 +18,12 @@ export default defineConfig({
   base: process.env.npm_config_base || '/',
   ...(isProduction
     ? {
+        jsMinifierOptions: {
+          compress: {
+            drop_console: true,
+            drop_debugger: true
+          }
+        },
         scripts: [
           {
             src: `/js/umi.${t}.js`

src/components/drop-down-buttons/index.tsx

@@ -31,11 +31,14 @@ const DropdownButtons: React.FC<DropdownButtonsProps> = ({
   return (
     <>
       {items?.length === 1 ? (
-        <Button
-          icon={_.get(items, '0.icon')}
-          size={size}
-          onClick={handleButtonClick}
-        ></Button>
+        <Tooltip title={_.head(items)?.label}>
+          <Button
+            {..._.head(items)}
+            icon={_.get(items, '0.icon')}
+            size={size}
+            onClick={handleButtonClick}
+          ></Button>
+        </Tooltip>
       ) : (
         <Dropdown.Button
           menu={{

src/components/footer/index.less

@@ -1,6 +1,5 @@
 // footer all styles
 .footer {
-  position: fixed;
   bottom: 0;
   width: 100%;
   background-color: transparent;

src/components/icon-font/index.tsx

@@ -1,7 +1,7 @@
 import { createFromIconfontCN } from '@ant-design/icons';
 
 const IconFont = createFromIconfontCN({
-  scriptUrl: '//at.alicdn.com/t/c/font_4613488_clxjnjvlf6m.js'
+  scriptUrl: '//at.alicdn.com/t/c/font_4613488_n8fe7jbl7n.js'
 });
 
 export default IconFont;

src/components/seal-table/components/table-row.tsx

@@ -17,6 +17,7 @@ const TableRow: React.FC<
     rowIndex,
     expandable,
     rowSelection,
+    expandedRowKeys,
     rowKey,
     columns,
     pollingChildren,
@@ -31,12 +32,14 @@ const TableRow: React.FC<
   const [checked, setChecked] = useState(false);
   const [childrenData, setChildrenData] = useState<any[]>([]);
   const [loading, setLoading] = useState(false);
+  const [firstLoad, setFirstLoad] = useState(true);
   const pollTimer = useRef<any>(null);
   const chunkRequestRef = useRef<any>(null);
 
   console.log('table row====');
   const { updateChunkedList } = useUpdateChunkedList(childrenData, {
-    setDataList: setChildrenData
+    setDataList: setChildrenData,
+    callback: (list) => renderChildren?.(list)
   });
 
   useEffect(() => {
@@ -50,6 +53,14 @@ const TableRow: React.FC<
     }
   }, [rowSelection]);
 
+  useEffect(() => {
+    if (expandedRowKeys?.includes(record[rowKey])) {
+      setExpanded(true);
+    } else {
+      setExpanded(false);
+    }
+  }, [expandedRowKeys]);
+
   useEffect(() => {
     return () => {
       if (pollTimer.current) {
@@ -75,6 +86,7 @@ const TableRow: React.FC<
   };
 
   const handleLoadChildren = async () => {
+    console.log('first load=====', firstLoad);
     try {
       setLoading(true);
       const data = await loadChildren?.(record);
@@ -83,6 +95,8 @@ const TableRow: React.FC<
     } catch (error) {
       setChildrenData([]);
       setLoading(false);
+    } finally {
+      setFirstLoad(false);
     }
   };
 
@@ -113,9 +127,9 @@ const TableRow: React.FC<
 
   const handleRowExpand = async () => {
     setExpanded(!expanded);
-    onExpand?.(!expanded, record);
+    onExpand?.(!expanded, record, record[rowKey]);
+    console.log('expanded=====', record);
 
-    chunkRequestRef.current?.current?.cancel?.();
     if (pollTimer.current) {
       clearInterval(pollTimer.current);
     }
@@ -149,10 +163,15 @@ const TableRow: React.FC<
   };
 
   useEffect(() => {
-    if (childrenData.length) {
+    if (!firstLoad && expanded) {
       createChunkRequest();
+    } else {
+      chunkRequestRef.current?.current?.cancel?.();
     }
-  }, [childrenData]);
+    return () => {
+      chunkRequestRef.current?.current?.cancel?.();
+    };
+  }, [firstLoad, expanded]);
 
   const renderRowPrefix = () => {
     if (expandable && rowSelection) {

src/components/seal-table/index.tsx

@@ -12,6 +12,7 @@ const SealTable: React.FC<SealTableProps> = (props) => {
     children,
     rowKey,
     onExpand,
+    expandedRowKeys,
     loading,
     expandable,
     pollingChildren,
@@ -144,6 +145,7 @@ const SealTable: React.FC<SealTableProps> = (props) => {
               loadChildren={loadChildren}
               loadChildrenAPI={loadChildrenAPI}
               onExpand={onExpand}
+              expandedRowKeys={expandedRowKeys}
             ></TableRow>
           );
         })}

src/components/seal-table/types.ts

@@ -24,6 +24,7 @@ export interface RowSelectionProps {
   onChange: (selectedRowKeys: React.Key[]) => void;
 }
 export interface SealTableProps {
+  expandedRowKeys?: React.Key[];
   rowSelection?: RowSelectionProps;
   children: React.ReactNode[];
   empty?: React.ReactNode;
@@ -32,7 +33,7 @@ export interface SealTableProps {
   pollingChildren?: boolean;
   watchChildren?: boolean;
   loading?: boolean;
-  onExpand?: (expanded: boolean, record: any) => void;
+  onExpand?: (expanded: boolean, record: any, rowKey: any) => void;
   renderChildren?: (data: any) => React.ReactNode;
   loadChildren?: (record: any) => Promise<any[]>;
   loadChildrenAPI?: (record: any) => string;

src/hooks/use-expanded-row-keys.ts

@@ -0,0 +1,35 @@
+import { useCallback, useState } from 'react';
+
+export default function useExpandedRowKeys() {
+  const [expandedRowKeys, setExpandedRowKeys] = useState<React.Key[]>([]);
+
+  const handleExpandChange = useCallback(
+    (expanded: boolean, record: any, rowKey: any) => {
+      if (expanded) {
+        setExpandedRowKeys((keys) => [...keys, rowKey]);
+      } else {
+        setExpandedRowKeys((keys) => keys.filter((key) => key !== rowKey));
+      }
+    },
+    []
+  );
+
+  const updateExpandedRowKeys = (keys: React.Key[]) => {
+    // remove expanded row keys that are in the deleted keys
+    const newExpandedRowKeys = expandedRowKeys.filter(
+      (key) => !keys.includes(key)
+    );
+    setExpandedRowKeys(newExpandedRowKeys);
+  };
+
+  const clearExpandedRowKeys = () => {
+    setExpandedRowKeys([]);
+  };
+
+  return {
+    expandedRowKeys,
+    clearExpandedRowKeys,
+    updateExpandedRowKeys,
+    handleExpandChange
+  };
+}

src/hooks/use-update-chunk-list.ts

@@ -8,17 +8,17 @@ interface ChunkedCollection {
   type: string | number;
 }
 // Only used to update lists without nested state
-export function useUpdateChunkedList(
-  dataList: { id: string | number }[],
-  options: {
-    setDataList: (args: any) => void;
-    callback?: (args: any) => void;
-    filterFun?: (args: any) => boolean;
-    mapFun?: (args: any) => any;
-    computedID?: (d: object) => string;
-  }
-) {
-  const updateChunkedList = (data: ChunkedCollection) => {
+export function useUpdateChunkedList(options: {
+  setDataList: (args: any) => void;
+  callback?: (args: any) => void;
+  filterFun?: (args: any) => boolean;
+  mapFun?: (args: any) => any;
+  computedID?: (d: object) => string;
+}) {
+  const updateChunkedList = (
+    data: ChunkedCollection,
+    dataList: { id: string | number }[]
+  ) => {
     let collections = data?.collection || [];
     if (options?.computedID) {
       collections = _.map(collections, (item: any) => {
@@ -42,16 +42,17 @@ export function useUpdateChunkedList(
         );
         if (updateIndex === -1) {
           const updateItem = _.cloneDeep(item);
-          options.setDataList((preDataList: any) => {
+          options.setDataList?.((preDataList: any) => {
             return _.concat(updateItem, preDataList);
           });
         }
+        console.log('create=========', updateIndex, dataList, collections);
       });
     }
     // DELETE
     if (data?.type === WatchEventType.DELETE) {
-      options.setDataList((prevDataList: any) => {
-        const updatedList = _.filter(prevDataList, (item: any) => {
+      options.setDataList?.(() => {
+        const updatedList = _.filter(dataList, (item: any) => {
           return !_.find(ids, (id: any) => id === item.id);
         });
         return updatedList;
@@ -59,8 +60,8 @@ export function useUpdateChunkedList(
     }
     // UPDATE
     if (data?.type === WatchEventType.UPDATE) {
-      options.setDataList((prevDataList: any[]) => {
-        const updatedDataList = _.cloneDeep(prevDataList);
+      options.setDataList?.(() => {
+        const updatedDataList = _.cloneDeep(dataList);
 
         _.each(collections, (item: any) => {
           const updateIndex = _.findIndex(

src/layouts/rightRender.tsx

@@ -70,7 +70,7 @@ export function getRightRenderContent(opts: {
     mode: 'vertical',
     expandIcon: false,
     inlineCollapsed: collapsed,
-    triggerSubMenuAction: 'hover',
+    triggerSubMenuAction: 'click',
     items: [
       {
         key: 'lang',

src/pages/llmodels/components/instance-item.tsx

@@ -12,18 +12,24 @@ import { ModelInstanceListItem } from '../config/types';
 
 interface InstanceItemProps {
   list: ModelInstanceListItem[];
-  handleChildSelect: (val: string, item: ModelInstanceListItem) => void;
+  handleChildSelect: (
+    val: string,
+    item: ModelInstanceListItem,
+    list: ModelInstanceListItem[]
+  ) => void;
 }
 
 const InstanceItem: React.FC<InstanceItemProps> = ({
   list,
   handleChildSelect
 }) => {
+  console.log('instance item====');
   const intl = useIntl();
   const childActionList = [
     {
       label: intl.formatMessage({ id: 'common.button.viewlog' }),
       key: 'viewlog',
+      status: [InstanceStatusMap.Running, InstanceStatusMap.Error],
       icon: <FieldTimeOutlined />
     },
     {
@@ -33,9 +39,16 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
       icon: <DeleteOutlined />
     }
   ];
-  const testStatus = {
-    state: InstanceStatusMap.Scheduled
+
+  const setChildActionList = (item: ModelInstanceListItem) => {
+    return _.filter(childActionList, (action: any) => {
+      if (action.key === 'viewlog') {
+        return InstanceStatusMap.Running.includes(item.state);
+      }
+      return true;
+    });
   };
+
   const getWorkerIp = (item: ModelInstanceListItem) => {
     if (item.worker_ip) {
       return item.port ? `${item.worker_ip}:${item.port}` : item.worker_ip;
@@ -90,8 +103,10 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
                 <Col span={5}>
                   <div style={{ paddingLeft: 39 }}>
                     <DropdownButtons
-                      items={childActionList}
-                      onSelect={(val: string) => handleChildSelect(val, item)}
+                      items={setChildActionList(item)}
+                      onSelect={(val: string) =>
+                        handleChildSelect(val, item, list)
+                      }
                     ></DropdownButtons>
                   </div>
                 </Col>

src/pages/llmodels/components/table-list.tsx

@@ -4,6 +4,7 @@ import SealTable from '@/components/seal-table';
 import SealColumn from '@/components/seal-table/components/seal-column';
 import { PageAction } from '@/config';
 import type { PageActionType } from '@/config/types';
+import useExpandedRowKeys from '@/hooks/use-expanded-row-keys';
 import useTableRowSelection from '@/hooks/use-table-row-selection';
 import useTableSort from '@/hooks/use-table-sort';
 import { handleBatchRequest } from '@/utils';
@@ -18,7 +19,7 @@ import { PageContainer } from '@ant-design/pro-components';
 import { Access, useAccess, useIntl, useNavigate } from '@umijs/max';
 import { Button, Input, Modal, Space, message } from 'antd';
 import dayjs from 'dayjs';
-import { memo, useCallback, useEffect, useState } from 'react';
+import { memo, useCallback, useState } from 'react';
 import {
   MODELS_API,
   MODEL_INSTANCE_API,
@@ -57,11 +58,9 @@ const Models: React.FC<ModelsProps> = ({
   handleSearch,
   handleShowSizeChange,
   handlePageChange,
-  createModelsChunkRequest,
   queryParams,
   loading,
-  total,
-  fetchData
+  total
 }) => {
   // const { modal } = App.useApp();
   console.log('model list====2');
@@ -69,6 +68,8 @@ const Models: React.FC<ModelsProps> = ({
   const intl = useIntl();
   const navigate = useNavigate();
   const rowSelection = useTableRowSelection();
+  const { handleExpandChange, updateExpandedRowKeys, expandedRowKeys } =
+    useExpandedRowKeys();
   const { sortOrder, setSortOrder } = useTableSort({
     defaultSortOrder: 'descend'
   });
@@ -145,6 +146,7 @@ const Models: React.FC<ModelsProps> = ({
       async onOk() {
         await deleteModel(row.id);
         message.success(intl.formatMessage({ id: 'common.message.success' }));
+        updateExpandedRowKeys([row.id]);
       },
       onCancel() {
         console.log('Cancel');
@@ -162,6 +164,7 @@ const Models: React.FC<ModelsProps> = ({
         await handleBatchRequest(rowSelection.selectedRowKeys, deleteModel);
         message.success(intl.formatMessage({ id: 'common.message.success' }));
         rowSelection.clearSelections();
+        updateExpandedRowKeys(rowSelection.selectedRowKeys);
       },
       onCancel() {
         console.log('Cancel');
@@ -181,7 +184,7 @@ const Models: React.FC<ModelsProps> = ({
       console.log('error:', error);
     }
   };
-  const handleDeleteInstace = (row: any) => {
+  const handleDeleteInstace = (row: any, list: ModelInstanceListItem[]) => {
     Modal.confirm({
       title: '',
       content: intl.formatMessage(
@@ -191,6 +194,9 @@ const Models: React.FC<ModelsProps> = ({
       async onOk() {
         await deleteModelInstance(row.id);
         message.success(intl.formatMessage({ id: 'common.message.success' }));
+        if (list.length === 1) {
+          updateExpandedRowKeys([row.model_id]);
+        }
       },
       onCancel() {
         console.log('Cancel');
@@ -232,9 +238,9 @@ const Models: React.FC<ModelsProps> = ({
   }, []);
 
   const handleChildSelect = useCallback(
-    (val: any, row: ModelInstanceListItem) => {
+    (val: any, row: ModelInstanceListItem, list: ModelInstanceListItem[]) => {
       if (val === 'delete') {
-        handleDeleteInstace(row);
+        handleDeleteInstace(row, list);
       }
       if (val === 'viewlog') {
         handleViewLogs(row);
@@ -252,10 +258,6 @@ const Models: React.FC<ModelsProps> = ({
     );
   };
 
-  useEffect(() => {
-    createModelsChunkRequest();
-  }, []);
-
   return (
     <>
       <PageContainer
@@ -309,6 +311,8 @@ const Models: React.FC<ModelsProps> = ({
         <SealTable
           dataSource={dataSource}
           rowSelection={rowSelection}
+          expandedRowKeys={expandedRowKeys}
+          onExpand={handleExpandChange}
           loading={loading}
           rowKey="id"
           expandable={true}

src/pages/llmodels/components/view-logs-modal.tsx

@@ -1,7 +1,8 @@
 import LogsViewer from '@/components/logs-viewer';
+import { FullscreenExitOutlined, FullscreenOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
-import { Modal } from 'antd';
-import React from 'react';
+import { Button, Modal } from 'antd';
+import React, { useState } from 'react';
 
 type ViewModalProps = {
   open: boolean;
@@ -12,14 +13,36 @@ type ViewModalProps = {
 const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
   console.log('viewlogs======');
   const { open, url, onCancel } = props || {};
+  const [modalSize, setModalSize] = useState<any>({
+    width: 600,
+    height: 450
+  });
+  const isFullScreenRef = React.useRef(false);
   const intl = useIntl();
-  if (!open) {
-    return null;
-  }
+  const handleFullscreenToggle = () => {
+    isFullScreenRef.current = !isFullScreenRef.current;
+    setModalSize((size: any) => {
+      return {
+        width: size.width === 600 ? '100%' : 600,
+        height: size.height === 450 ? 'calc(100vh - 100px)' : 450
+      };
+    });
+  };
 
   return (
     <Modal
-      title={intl.formatMessage({ id: 'common.button.viewlog' })}
+      title={
+        <span className="flex flex-center">
+          <span> {intl.formatMessage({ id: 'common.button.viewlog' })}</span>
+          <Button size="middle" type="text" onClick={handleFullscreenToggle}>
+            {isFullScreenRef.current ? (
+              <FullscreenExitOutlined />
+            ) : (
+              <FullscreenOutlined />
+            )}
+          </Button>
+        </span>
+      }
       open={open}
       centered={true}
       onCancel={onCancel}
@@ -27,11 +50,11 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
       closeIcon={true}
       maskClosable={false}
       keyboard={false}
-      width={600}
+      width={modalSize.width}
       footer={null}
     >
       <LogsViewer
-        height={500}
+        height={modalSize.height}
         url={url}
         params={{
           follow: true

src/pages/llmodels/config/index.ts

@@ -25,7 +25,8 @@ export const InstanceStatusMap = {
   Scheduled: 'Scheduled',
   Error: 'Error',
   Downloading: 'Downloading',
-  Unknown: 'Unknown'
+  Unknown: 'Unknown',
+  Analyzing: 'Analyzing'
 };
 
 export const status: any = {
@@ -35,7 +36,8 @@ export const status: any = {
   [InstanceStatusMap.Scheduled]: StatusMaps.success,
   [InstanceStatusMap.Error]: StatusMaps.error,
   [InstanceStatusMap.Downloading]: StatusMaps.transitioning,
-  [InstanceStatusMap.Unknown]: StatusMaps.inactive
+  [InstanceStatusMap.Unknown]: StatusMaps.inactive,
+  [InstanceStatusMap.Analyzing]: StatusMaps.transitioning
 };
 
 export const ActionList = [

src/pages/llmodels/index.tsx

@@ -17,7 +17,9 @@ const Models: React.FC = () => {
   const [total, setTotal] = useState(100);
   const [loading, setLoading] = useState(false);
   const [dataSource, setDataSource] = useState<ListItem[]>([]);
+  const [firstLoad, setFirstLoad] = useState(true);
   const chunkRequedtRef = useRef<any>();
+  const dataSourceRef = useRef<any>();
   let axiosToken = createAxiosToken();
   const [queryParams, setQueryParams] = useState({
     page: 1,
@@ -26,10 +28,14 @@ const Models: React.FC = () => {
   });
   // request data
 
-  const { updateChunkedList } = useUpdateChunkedList(dataSource, {
+  const { updateChunkedList } = useUpdateChunkedList({
     setDataList: setDataSource
   });
 
+  useEffect(() => {
+    dataSourceRef.current = dataSource;
+  }, [dataSource]);
+
   const fetchData = useCallback(async () => {
     axiosToken?.cancel?.();
     axiosToken = createAxiosToken();
@@ -49,6 +55,7 @@ const Models: React.FC = () => {
       console.log('error', error);
     } finally {
       setLoading(false);
+      setFirstLoad(false);
     }
   }, [queryParams]);
 
@@ -76,7 +83,7 @@ const Models: React.FC = () => {
 
   const updateHandler = (list: any) => {
     _.each(list, (data: any) => {
-      updateChunkedList(data);
+      updateChunkedList(data, dataSourceRef.current);
     });
   };
 
@@ -110,9 +117,17 @@ const Models: React.FC = () => {
   );
 
   useEffect(() => {
-    fetchData();
+    if (!firstLoad) {
+      createModelsChunkRequest();
+    }
     return () => {
       chunkRequedtRef.current?.current?.cancel?.();
+    };
+  }, [firstLoad]);
+
+  useEffect(() => {
+    fetchData();
+    return () => {
       axiosToken?.cancel?.();
     };
   }, [queryParams]);

src/pages/login/components/styles.less

@@ -17,4 +17,8 @@
 
 :local(.box) {
   padding-top: 10%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  min-height: 100vh;
 }

src/pages/login/index.tsx

@@ -21,6 +21,9 @@ const Login = () => {
   useEffect(() => {
     gotoDefaultPage(userInfo);
   }, [userInfo]);
+  useEffect(() => {
+    document.title = 'GPUStack';
+  }, []);
 
   return (
     <>

src/pages/playground/components/chat-footer.tsx

@@ -13,6 +13,7 @@ import '../style/chat-footer.less';
 
 interface ChatFooterProps {
   onSubmit: () => void;
+  onStop: () => void;
   onClear: () => void;
   onNewMessage: () => void;
   onView: () => void;
@@ -26,6 +27,7 @@ const ChatFooter: React.FC<ChatFooterProps> = (props) => {
   const {
     onSubmit,
     onClear,
+    onStop,
     onNewMessage,
     onView,
     feedback,
@@ -40,6 +42,26 @@ const ChatFooter: React.FC<ChatFooterProps> = (props) => {
     { enabled: !disabled }
   );
 
+  const renderSubmitButton = () => {
+    if (disabled) {
+      return (
+        <>
+          {intl.formatMessage({ id: 'common.button.stop' })}
+          <span className="m-l-5">
+            <IconFont type="icon-stop"></IconFont>
+          </span>
+        </>
+      );
+    }
+    return (
+      <>
+        {intl.formatMessage({ id: 'common.button.submit' })}
+        <span className="m-l-5 opct-7">
+          <IconFont type="icon-command"></IconFont> + <EnterOutlined />
+        </span>
+      </>
+    );
+  };
   return (
     <div className="chat-footer">
       <Row style={{ width: '100%' }}>
@@ -71,12 +93,21 @@ const ChatFooter: React.FC<ChatFooterProps> = (props) => {
             >
               {intl.formatMessage({ id: 'playground.viewcode' })}
             </Button>
-            <Button disabled={disabled} type="primary" onClick={onSubmit}>
-              {intl.formatMessage({ id: 'common.button.submit' })}
-              <span className="m-l-5 opct-7">
-                <IconFont type="icon-command"></IconFont> + <EnterOutlined />
-              </span>
-            </Button>
+            {!disabled ? (
+              <Button type="primary" disabled={disabled} onClick={onSubmit}>
+                {intl.formatMessage({ id: 'common.button.submit' })}
+                <span className="m-l-5 opct-7">
+                  <IconFont type="icon-command"></IconFont> + <EnterOutlined />
+                </span>
+              </Button>
+            ) : (
+              <Button type="primary" onClick={onStop}>
+                {intl.formatMessage({ id: 'common.button.stop' })}
+                <span className="m-l-5">
+                  <IconFont type="icon-stop"></IconFont>
+                </span>
+              </Button>
+            )}
           </Space>
         </Col>
       </Row>

src/pages/playground/components/ground-left.tsx

@@ -47,6 +47,7 @@ const MessageList: React.FC<MessageProps> = (props) => {
   const [currentIsFocus, setCurrentIsFocus] = useState(false);
   const systemRef = useRef<any>(null);
   const contentRef = useRef<any>('');
+  const controllerRef = useRef<any>(null);
 
   const handleSystemMessageChange = (e: any) => {
     setSystemMessage(e.target.value);
@@ -88,11 +89,21 @@ const MessageList: React.FC<MessageProps> = (props) => {
     console.log('messageList=====', messageList, messageId.current, chunk);
     return false;
   };
+  const handleStopConversation = () => {
+    controllerRef.current?.abort?.();
+    setLoading(false);
+  };
+
   const submitMessage = async () => {
     try {
       setLoading(true);
       setMessageId();
       setTokenResult(null);
+
+      controllerRef.current?.abort?.();
+      controllerRef.current = new AbortController();
+      const signal = controllerRef.current.signal;
+
       contentRef.current = '';
       const chatParams = {
         messages: systemMessage
@@ -109,7 +120,8 @@ const MessageList: React.FC<MessageProps> = (props) => {
       };
       const result = await fetchChunkedData({
         data: chatParams,
-        url: CHAT_API
+        url: CHAT_API,
+        signal
       });
 
       if (!result) {
@@ -246,6 +258,7 @@ const MessageList: React.FC<MessageProps> = (props) => {
           onNewMessage={handleNewMessage}
           onSubmit={handleSubmit}
           onView={handleView}
+          onStop={handleStopConversation}
           disabled={loading}
           hasTokenResult={!!tokenResult}
           feedback={<ReferenceParams usage={tokenResult}></ReferenceParams>}

src/pages/playground/components/reference-params.tsx

@@ -43,7 +43,7 @@ const ReferenceParams = (props: ReferenceParamsProps) => {
 
       <span>
         {intl.formatMessage({ id: 'playground.tokenoutput' })}:{' '}
-        {usage.tokens_per_second * 1000} Tokens/s
+        {usage.tokens_per_second} Tokens/s
       </span>
     </div>
   );

src/pages/playground/components/view-code-modal.tsx

@@ -137,7 +137,7 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
         closeIcon={true}
         maskClosable={false}
         keyboard={false}
-        width={660}
+        width={600}
         footer={null}
       >
         <div style={{ marginBottom: '10px' }}>
@@ -152,7 +152,7 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
             onChangeLang={handleOnChangeLang}
           >
             <Editor
-              height="min(500px, 90vh)"
+              height="min(450px, 90vh)"
               theme="vs-dark"
               className="monaco-editor"
               defaultLanguage="shell"

src/utils/fetch-chunk-data.ts

@@ -30,6 +30,7 @@ export const fetchChunkedData = async (params: {
   data?: any;
   url: string;
   params?: any;
+  signal?: AbortSignal;
   method?: string;
 }) => {
   const method = params.method || 'POST';
@@ -40,6 +41,7 @@ export const fetchChunkedData = async (params: {
   const response = await fetch(url, {
     method,
     body: method === 'POST' ? JSON.stringify(params.data) : null,
+    signal: params.signal,
     headers: {
       'Content-Type': 'application/json'
     }