style: multiple selection tag

src/components/auto-tooltip/index.tsx

@@ -8,6 +8,7 @@ import React, {
   useRef,
   useState
 } from 'react';
+import styled from 'styled-components';
 import { TooltipOverlayScroller } from '../overlay-scroller';
 
 // type TagProps = React.ComponentProps<typeof Tag>;
@@ -22,9 +23,18 @@ interface AutoTooltipProps extends Omit<TagProps, 'title'> {
   title?: React.ReactNode;
   showTitle?: boolean;
   closable?: boolean;
+  radius?: number | string;
+  filled?: boolean;
   tooltipProps?: React.ComponentProps<typeof Tooltip>;
 }
 
+const StyledTag = styled(Tag)`
+  &.tag-filled {
+    border: none;
+    background-color: var(--ant-color-fill-secondary);
+  }
+`;
+
 const AutoTooltip: React.FC<AutoTooltipProps> = ({
   children,
   maxWidth = '100%',
@@ -33,6 +43,8 @@ const AutoTooltip: React.FC<AutoTooltipProps> = ({
   title,
   showTitle = false,
   tooltipProps,
+  radius = 12,
+  filled = false,
   ...tagProps
 }) => {
   const contentRef = useRef<HTMLDivElement>(null);
@@ -103,13 +115,14 @@ const AutoTooltip: React.FC<AutoTooltipProps> = ({
           {children}
         </div>
       ) : (
-        <Tag
+        <StyledTag
           {...tagProps}
+          className={`${tagProps.className || ''} ${filled ? 'tag-filled' : ''}`}
           ref={contentRef}
           style={{
             ...tagStyle,
             paddingInline: tagProps.closable ? '8px 22px' : 8,
-            borderRadius: 12
+            borderRadius: radius
           }}
           closeIcon={
             tagProps.closable ? (
@@ -117,7 +130,8 @@ const AutoTooltip: React.FC<AutoTooltipProps> = ({
                 style={{
                   position: 'absolute',
                   right: 8,
-                  top: 6
+                  top: '50%',
+                  transform: 'translateY(-50%)'
                 }}
               />
             ) : (
@@ -126,7 +140,7 @@ const AutoTooltip: React.FC<AutoTooltipProps> = ({
           }
         >
           {children}
-        </Tag>
+        </StyledTag>
       )}
     </TooltipOverlayScroller>
   );

src/components/logs-viewer/virtual-log-list.tsx

@@ -11,6 +11,7 @@ import React, {
   useRef,
   useState
 } from 'react';
+import styled from 'styled-components';
 import LogsList from './logs-list';
 import LogsPagination from './logs-pagination';
 import './styles/index.less';
@@ -26,6 +27,13 @@ interface LogsViewerProps {
   enableScorllLoad?: boolean;
   diffHeight?: number;
 }
+
+const PaginationWrapper = styled.div`
+  position: absolute;
+  right: 50px;
+  top: 30px;
+`;
+
 const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
   const { diffHeight, url, tail: defaultTail, enableScorllLoad = true } = props;
   const { pageSize, page, setPage, setTotalPage, totalPage } =
@@ -294,6 +302,16 @@ const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
 
   return (
     <div className="logs-viewer-wrap-w2">
+      {/* <PaginationWrapper>
+        <Pagination
+          simple={{ readOnly: true }}
+          total={totalPage}
+          current={page}
+          pageSize={pageSize}
+          showSizeChanger={false}
+          hideOnSinglePage={false}
+        ></Pagination>
+      </PaginationWrapper> */}
       <div className="wrap">
         <div>
           <LogsList

src/components/seal-form/hooks/use-select-render.tsx

@@ -1,20 +1,33 @@
 import AutoTooltip from '@/components/auto-tooltip';
+import React, { useMemo } from 'react';
 
 interface SelectRenderProps {
   maxTagWidth?: number;
+  radius?: number | string;
+  style?: React.CSSProperties;
+  filled?: boolean;
 }
 
 export default function useSelectRender(config?: SelectRenderProps) {
-  const { maxTagWidth = 100 } = config || {};
+  const { maxTagWidth = 100, radius, filled, style } = config || {};
   const TagRender = (props: any) => {
     const { label } = props;
+    const labelText = useMemo(() => {
+      if (!props.isMaxTag) {
+        return label;
+      }
+      return label.slice(0, -3);
+    }, [label, props.isMaxTag]);
     return (
       <AutoTooltip
         maxWidth={maxTagWidth}
         closable={props.closable}
         onClose={props.onClose}
+        radius={radius}
+        filled={filled}
+        style={style}
       >
-        {label}
+        {labelText}
       </AutoTooltip>
     );
   };

src/components/seal-form/seal-cascader.tsx

@@ -11,7 +11,7 @@ import SelectWrapper from './wrapper/select';
 
 const tag = (props: any) => {
   if (props.isMaxTag) {
-    return props.label;
+    return props.label?.slice(0, -3);
   }
   const parent = _.split(props.value, '__RC_CASCADER_SPLIT__')?.[0];
   return `${parent} / ${props?.label}`;
@@ -24,6 +24,7 @@ const renderTag = (props: any) => {
       closable={props.closable}
       onClose={props.onClose}
       maxWidth={240}
+      filled
     >
       {tag(props)}
     </AutoTooltip>

src/global.less

@@ -277,12 +277,10 @@ body {
   display: none;
 }
 
-.ant-pro-base-menu-vertical-item-title {
+.ant-pro-base-menu-vertical-item-title,
-  // height: var(--ant-menu-item-height) !important;
-}
-
 .ant-pro-base-menu-vertical-item-title-collapsed {
-  // height: var(--ant-menu-item-height) !important;
+  height: var(--ant-menu-item-height) !important;
+  line-height: var(--ant-menu-item-height) !important;
 }
 
 .ant-pro-layout {

src/pages/dashboard/components/usage-inner/use-usage-data.tsx

@@ -27,6 +27,9 @@ const FilterWrapper = styled.div`
     align-items: center;
     gap: 12px;
   }
+  .ant-select-selection-overflow-item > span {
+    height: 24px;
+  }
 `;
 
 interface RequestTokenData {
@@ -99,7 +102,12 @@ export default function useUseageData<T>(config: {
   const { url, defaultData, disabledDate = false } = config || {};
   const intl = useIntl();
   const { TagRender } = useSelectRender({
-    maxTagWidth: 100
+    maxTagWidth: 100,
+    filled: true,
+    style: {
+      height: 24,
+      lineHeight: '24px'
+    }
   });
   const { disabledRangeDaysDate, rangePresets } = useRangePickerPreset({
     range: DefaultDateConfig.maxRange,
@@ -332,7 +340,10 @@ export default function useUseageData<T>(config: {
         <div className="selection">
           <DatePicker.RangePicker
             maxDate={dayjs()}
-            defaultValue={[dayjs().add(-29, 'd'), dayjs()]}
+            defaultValue={[
+              dayjs().add(-DefaultDateConfig.defaultRange, 'd'),
+              dayjs()
+            ]}
             disabledDate={disabledRangeDaysDate}
             presets={rangePresets}
             allowClear={false}

src/pages/playground/components/message-input.tsx

@@ -209,12 +209,6 @@ const MessageInput: React.FC<MessageInputProps> = forwardRef(
     const handleClearAll = (e: any) => {
       e.stopPropagation();
       clearAll();
-      // handleInputChange({ target: { value: '' } });
-      // setMessage({
-      //   role: Roles.User,
-      //   content: '',
-      //   imgs: []
-      // });
     };
 
     const handleAddMessage = (e?: any) => {

src/pages/playground/components/multiple-chat/model-item.tsx

@@ -114,11 +114,15 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef((props, ref) => {
     handleDeleteModel(instanceId);
   };
 
+  const generateValidMessage = (message: Omit<MessageItem, 'uid'>) => {
+    if (!message.content && !message.imgs?.length && !message.audio?.length) {
+      return undefined;
+    }
+    return message;
+  };
+
   const handleSubmit = (currentMessage: Omit<MessageItem, 'uid'>) => {
-    const currentMsg =
+    const currentMsg = generateValidMessage(currentMessage);
-      currentMessage.content || currentMessage.imgs?.length
-        ? currentMessage
-        : undefined;
 
     submitMessage({
       system: systemMessage
@@ -289,11 +293,11 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef((props, ref) => {
           </Dropdown>
           <Popover
             autoAdjustOverflow={true}
-            overlayInnerStyle={{ width: 384, paddingInline: 0 }}
+            overlayInnerStyle={{ width: 375, paddingInline: 0 }}
             content={
               <OverlayScroller
                 maxHeight={500}
-                style={{ paddingInline: '16px' }}
+                style={{ paddingInline: '24px' }}
                 oppositeTheme={true}
               >
                 <DynamicParams
@@ -302,21 +306,25 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef((props, ref) => {
                   paramsConfig={paramsConfig}
                   initialValues={initialValues}
                   showModelSelector={false}
+                  parametersTitle={
+                    <div className="flex-center flex-between">
+                      <span>
+                        {intl.formatMessage({ id: 'playground.parameters' })}
+                      </span>
+                      <Checkbox onChange={handleApplyToAllModels}>
+                        {intl.formatMessage({
+                          id: 'playground.compare.applytoall'
+                        })}
+                      </Checkbox>
+                    </div>
+                  }
                 />
               </OverlayScroller>
             }
             trigger={['click']}
             arrow={false}
             fresh={true}
-            title={
+            title={false}
-              <div style={{ paddingInline: '16px' }}>
-                <Checkbox onChange={handleApplyToAllModels}>
-                  {intl.formatMessage({
-                    id: 'playground.compare.applytoall'
-                  })}
-                </Checkbox>
-              </div>
-            }
           >
             <Button
               type="text"

src/pages/resources/components/styles/installation.less

@@ -8,6 +8,7 @@
     margin-bottom: 16px;
     padding-left: 16px;
     background: var(--ant-color-fill-tertiary);
+    color: var(--ant-color-text-secondary);
     border-radius: 2px;
     list-style-type: decimal;