kirin-ri / memo

0 stars 0 forks source link

318 #14

Open kirin-ri opened 8 months ago

kirin-ri commented 8 months ago

import { IconFolderPlus, IconMistOff, IconPlus, IconFile } from '@tabler/icons-react'; import { ReactNode, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { IconArrowBarLeft, IconArrowBarRight } from '@tabler/icons-react';

import { CloseSidebarButton, OpenSidebarButton, } from './components/OpenCloseButton';

interface Reference { id: string; title: string; description: string; }

interface Props { isOpen: boolean; side: 'left' | 'right'; items: T[]; toggleOpen: () => void; }

const ReferenceSidebar = <T,>({ isOpen, side, items, toggleOpen, }: Props) => { const { t } = useTranslation('promptbar'); const [hoveredItemId, setHoveredItemId] = useState<string | null>(null);

const allowDrop = (e: any) => { e.preventDefault(); };

const highlightDrop = (e: any) => { e.target.style.background = '#343541'; };

const removeHighlight = (e: any) => { e.target.style.background = 'none'; };

const itemsample = [ {url:'https://caramlops-saas-0.westus.cloudapp.azure.com/file/test/index01/実用発電用原子炉に係る新規制基準の考え方について.pdf',id:'1',title:'実績発電原子炉に係る新規制基準の考え方について.pdf(21)',description:'…見直しを行うために「発電用軽水型原子炉の新規制基準に関する検討チーム」(以下「検討チーム」という。)を組織し、発電用軽水型原子炉の新規制基準策定のための検討を開始した。検討チーム…'}, ]

const titleStyle = { display: 'flex', alignItems: 'center', marginBottom: '30px', fontSize:'18px' } const headerStyle = { display: 'flex', justiftContent: 'space-between', alignItems:'center', fontSize: '15px', marginBottom: '15px', width: '100%', } const titleIcon = { display: 'flex', marginRight: '8px', } const listItemStyle = (isHovered: boolean) => ({ marginBottom: '10px', border: '1px solid white', padding: '20px', borderRadius: '5px', backgroundColor: isHovered ? '#0056b3' : '#343541', // Change background color on hover transition: 'background-color 0.3s', maxWidth: '350px', }); const listTitleStyle = { marginBottom: '10px', } return isOpen ? (

参照リスト
{side === 'right' ? : }
    <div  style={{overflowY:'auto',flex:1,padding:'0 10px'}}>
      <ul>
        {itemsample.map((item) => (
          <a href={item.url} target="_blank" rel="noopener noreferrer">
            <li
            style={listItemStyle(item.id === hoveredItemId)}
            onMouseEnter={() => setHoveredItemId(item.id)}
            onMouseLeave={() => setHoveredItemId(null)}
            >
              <h3 style={listTitleStyle}>{item.title}</h3>
              <p>{item.description}</p>
            </li>
          </a>
        ))}
      </ul>
    </div>
  </div>
</div>

) : (

); };

export default ReferenceSidebar;

kirin-ri commented 8 months ago
import { IconFolderPlus, IconMistOff, IconPlus, IconFile } from '@tabler/icons-react';
import { ReactNode, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { IconArrowBarLeft, IconArrowBarRight } from '@tabler/icons-react';

import {
  CloseSidebarButton,
  OpenSidebarButton,
} from './components/OpenCloseButton';

interface Reference {
  id: string;
  title: string;
  description: string;
}

interface Props<T> {
  isOpen: boolean;
  side: 'left' | 'right';
  items: T[];
  toggleOpen: () => void;
}

const ReferenceSidebar = <T,>({
  isOpen,
  side,
  items,
  toggleOpen,
}: Props<T>) => {
  const { t } = useTranslation('promptbar');
  const [hoveredItemId, setHoveredItemId] = useState<string | null>(null);

  const allowDrop = (e: any) => {
    e.preventDefault();
  };

  const highlightDrop = (e: any) => {
    e.target.style.background = '#343541';
  };

  const removeHighlight = (e: any) => {
    e.target.style.background = 'none';
  };

  const itemsample = [
    {url:'https://caramlops-saas-0.westus.cloudapp.azure.com/file/test/index01/実用発電用原子炉に係る新規制基準の考え方について.pdf',id:'1',title:'実績発電原子炉に係る新規制基準の考え方について.pdf(21)',description:'…見直しを行うために「発電用軽水型原子炉の新規制基準に関する検討チーム」(以下「検討チーム」という。)を組織し、発電用軽水型原子炉の新規制基準策定のための検討を開始した。検討チーム…'},
  ]

  const titleStyle = {
    display: 'flex',
    alignItems: 'center',
    marginBottom: '30px',
    fontSize:'18px'
  }
  const headerStyle = {
    display: 'flex',
    justiftContent: 'space-between',
    alignItems:'center',
    fontSize: '15px',
    marginBottom: '15px',
    width: '100%',
  }
  const titleIcon = {
    display: 'flex',
    marginRight: '8px',
  }
  const listItemStyle = (isHovered: boolean) => ({
    marginBottom: '10px',
    border: '1px solid white',
    padding: '20px',
    borderRadius: '5px',
    backgroundColor: isHovered ? '#0056b3' : '#343541', // Change background color on hover
    transition: 'background-color 0.3s',
    maxWidth: '350px',
  });
  const listTitleStyle = {
    marginBottom: '10px',
  }
  return isOpen ? (
    <div>
      <div className={`fixed top-0 ${side}-0 z-40 flex h-full w-[400px] flex-none flex-col space-y-2 bg-[#202123] p-2 text-[14px] transition-all sm:relative sm:top-0`}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%', padding: '0 10px' }}>
          <div style={titleStyle}>
            <IconFile style={{ marginRight: '8px' }} />
            参照リスト
          </div>
          <div onClick={toggleOpen} style={titleStyle}>
            {side === 'right' ? <IconArrowBarRight /> : <IconArrowBarLeft />}
          </div>
        </div>
        <div  style={{overflowY:'auto',flex:1,padding:'0 10px'}}>
          <ul>
            {itemsample.map((item) => (
              <a href={item.url} target="_blank" rel="noopener noreferrer">
                <li
                style={listItemStyle(item.id === hoveredItemId)}
                onMouseEnter={() => setHoveredItemId(item.id)}
                onMouseLeave={() => setHoveredItemId(null)}
                >
                  <h3 style={listTitleStyle}>{item.title}</h3>
                  <p>{item.description}</p>
                </li>
              </a>
            ))}
          </ul>
        </div>
      </div>
    </div>
  ) : (
    <OpenSidebarButton onClick={toggleOpen} side={side} />
  );
};

export default ReferenceSidebar;
kirin-ri commented 8 months ago

${item.url}${getPageNumberFromTitle(item.title)}

kirin-ri commented 8 months ago
  const getPageNumberFromTitle = (title: string) => {
    const match = title.match(/\((\d+)\)/);
    return match ? `#page=${match[1]}` : '';
  };
kirin-ri commented 8 months ago
import React from 'react';
import { Document, Page, pdfjs } from 'react-pdf';
import 'react-pdf/dist/esm/Page/AnnotationLayer.css';

// 设置PDF.js的worker路径
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;

const PDFPreview = ({ fileUrl }) => {
  return (
    <div>
      <Document
        file={fileUrl}
        options={{ workerSrc: "/pdf.worker.js" }}
      >
        <Page pageNumber={1} width={150} />
      </Document>
    </div>
  );
};

export default PDFPreview;
kirin-ri commented 8 months ago

Binding element 'fileUrl' implicitly has an 'any' type.

kirin-ri commented 8 months ago
import React from 'react';
import { Document, Page, pdfjs } from 'react-pdf';
import 'react-pdf/dist/esm/Page/AnnotationLayer.css';

// 设置PDF.js的worker路径
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;

// 使用刚定义的接口作为组件Props的类型
const PDFPreview: React.FC<PDFPreviewProps> = ({ fileUrl }) => {
  return (
    <div>
      <Document
        file={fileUrl}
        options={{ workerSrc: "/pdf.worker.js" }}
      >
        <Page pageNumber={1} width={150} />
      </Document>
    </div>
  );
};

export default PDFPreview;
kirin-ri commented 8 months ago

Cannot find module 'react-pdf/renderer' or its corresponding type declarations

kirin-ri commented 8 months ago

(base) jovyan@codeserver-dev-0:~/chatbot-ui$ npm install @react-pdf/renderer

up to date, audited 774 packages in 6s

244 packages are looking for funding run npm fund for details

9 vulnerabilities (5 moderate, 2 high, 2 critical)

To address issues that do not require attention, run: npm audit fix

To address all issues (including breaking changes), run: npm audit fix --force

Run npm audit for details.

kirin-ri commented 8 months ago
import { Document, Page } from '@react-pdf/renderer';
import { pdfjs } from '@pdfjs-dist';
import 'react-pdf/dist/esm/Page/AnnotationLayer.css';

interface PDFPreviewProps{
    fileUrl:string
}

// 设置PDF.js的worker路径
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;

// 使用刚定义的接口作为组件Props的类型
const PDFPreview: React.FC<PDFPreviewProps> = ({ fileUrl }) => {
  return (
    <div>
      <Document
        file={fileUrl}
        options={{ workerSrc: "/pdf.worker.js" }}
      >
        <Page pageNumber={1} width={150} />
      </Document>
    </div>
  );
};

export default PDFPreview;
kirin-ri commented 8 months ago
import React, { useEffect, useRef } from 'react';
import * as pdfjsLib from 'pdfjs-dist/legacy/build/pdf';
import 'pdfjs-dist/legacy/build/pdf.worker';

const PDFPreview = ({ fileUrl }) => {
  const canvasRef = useRef(null);

  useEffect(() => {
    // 确保正确设置了PDF Worker的路径
    pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/[version]/pdf.worker.min.js';

    const loadPdf = async () => {
      try {
        const pdfDoc = await pdfjsLib.getDocument(fileUrl).promise;
        const page = await pdfDoc.getPage(1); // 获取PDF的第一页
        const viewport = page.getViewport({ scale: 1.0 });
        const canvas = canvasRef.current;
        const ctx = canvas.getContext('2d');
        canvas.height = viewport.height;
        canvas.width = viewport.width;

        page.render({
          canvasContext: ctx,
          viewport: viewport,
        });
      } catch (error) {
        console.error("Error loading PDF: ", error);
      }
    };

    loadPdf();
  }, [fileUrl]);

  return <canvas ref={canvasRef} />;
};
kirin-ri commented 8 months ago

import { Document, Page } from '@react-pdf/renderer'; import { pdfjs } from '@pdfjs-dist'; import 'react-pdf/dist/esm/Page/AnnotationLayer.css';

interface PDFPreviewProps{ fileUrl:string }

// 设置PDF.js的worker路径 pdfjs.GlobalWorkerOptions.workerSrc = //cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js;

// 使用刚定义的接口作为组件Props的类型 const PDFPreview: React.FC = ({ fileUrl }) => { return (

); };

export default PDFPreview; Binding element 'fileUrl' implicitly has an 'any' type.

kirin-ri commented 8 months ago
import React from 'react';
import { Document, Page } from 'react-pdf/dist/esm/entry.webpack';
import 'react-pdf/dist/esm/Page/AnnotationLayer.css';

interface PDFPreviewProps {
  fileUrl: string;
}

const PDFPreview: React.FC<PDFPreviewProps> = ({ fileUrl }) => {
  return (
    <div>
      <Document file={fileUrl}>
        <Page pageNumber={1} width={150} />
      </Document>
    </div>
  );
};

export default PDFPreview;
kirin-ri commented 8 months ago

npm install @react-pdf-viewer/core @react-pdf-viewer/default-layout pdfjs-dist

kirin-ri commented 8 months ago

(base) jovyan@codeserver-dev-0:~/chatbot-ui$ npm install @react-pdf-viewer/core @react-pdf-viewer/default-layout pdfjs-dist npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: ai-chatbot-starter@0.1.0 npm ERR! Found: pdfjs-dist@4.0.379 npm ERR! node_modules/pdfjs-dist npm ERR! pdfjs-dist@"^4.0.379" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer pdfjs-dist@"^2.16.105 || ^3.0.279" from @react-pdf-viewer/core@3.12.0 npm ERR! node_modules/@react-pdf-viewer/core npm ERR! @react-pdf-viewer/core@"*" from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution. npm ERR! npm ERR! npm ERR! For a full report see: npm ERR! /home/jovyan/.npm/_logs/2024-03-18T09_03_02_600Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in: /home/jovyan/.npm/_logs/2024-03-18T09_03_02_600Z-debug-0.log

kirin-ri commented 8 months ago

(base) jovyan@codeserver-dev-0:~/chatbot-ui$ npm uninstall react-pdf-viewer/default-layout npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! npm ERR! While resolving: @react-pdf-viewer/core@3.12.0 npm ERR! Found: pdfjs-dist@4.0.379 npm ERR! node_modules/pdfjs-dist npm ERR! pdfjs-dist@"^4.0.379" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer pdfjs-dist@"^2.16.105 || ^3.0.279" from @react-pdf-viewer/core@3.12.0 npm ERR! node_modules/@react-pdf-viewer/core npm ERR! @react-pdf-viewer/core@"3.12.0" from @react-pdf-viewer/attachment@3.12.0 npm ERR! node_modules/@react-pdf-viewer/attachment npm ERR! @react-pdf-viewer/attachment@"3.12.0" from @react-pdf-viewer/default-layout@3.12.0 npm ERR! node_modules/@react-pdf-viewer/default-layout npm ERR! @react-pdf-viewer/default-layout@"^3.12.0" from the root project npm ERR! @react-pdf-viewer/core@"3.12.0" from @react-pdf-viewer/bookmark@3.12.0 npm ERR! node_modules/@react-pdf-viewer/bookmark npm ERR! @react-pdf-viewer/bookmark@"3.12.0" from @react-pdf-viewer/default-layout@3.12.0 npm ERR! node_modules/@react-pdf-viewer/default-layout npm ERR! @react-pdf-viewer/default-layout@"^3.12.0" from the root project npm ERR! 16 more (@react-pdf-viewer/default-layout, ...) npm ERR! npm ERR! Conflicting peer dependency: pdfjs-dist@3.11.174 npm ERR! node_modules/pdfjs-dist npm ERR! peer pdfjs-dist@"^2.16.105 || ^3.0.279" from @react-pdf-viewer/core@3.12.0 npm ERR! node_modules/@react-pdf-viewer/core npm ERR! @react-pdf-viewer/core@"3.12.0" from @react-pdf-viewer/attachment@3.12.0 npm ERR! node_modules/@react-pdf-viewer/attachment npm ERR! @react-pdf-viewer/attachment@"3.12.0" from @react-pdf-viewer/default-layout@3.12.0 npm ERR! node_modules/@react-pdf-viewer/default-layout npm ERR! @react-pdf-viewer/default-layout@"^3.12.0" from the root project npm ERR! @react-pdf-viewer/core@"3.12.0" from @react-pdf-viewer/bookmark@3.12.0 npm ERR! node_modules/@react-pdf-viewer/bookmark npm ERR! @react-pdf-viewer/bookmark@"3.12.0" from @react-pdf-viewer/default-layout@3.12.0 npm ERR! node_modules/@react-pdf-viewer/default-layout npm ERR! @react-pdf-viewer/default-layout@"^3.12.0" from the root project npm ERR! 16 more (@react-pdf-viewer/default-layout, ...) npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution. npm ERR! npm ERR! npm ERR! For a full report see: npm ERR! /home/jovyan/.npm/_logs/2024-03-18T09_08_35_938Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in: /home/jovyan/.npm/_logs/2024-03-18T09_08_35_938Z-debug-0.log

kirin-ri commented 8 months ago
import React, { useEffect, useRef } from 'react';
import * as pdfjsLib from 'pdfjs-dist/legacy/build/pdf';
import 'pdfjs-dist/legacy/build/pdf.worker.entry';

const PDFPreview = ({ fileUrl }) => {
  const canvasRef = useRef();

  useEffect(() => {
    pdfjsLib.GlobalWorkerOptions.workerSrc = '//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjsLib.version}/pdf.worker.min.js';

    const loadPdf = async () => {
      try {
        const pdf = await pdfjsLib.getDocument(fileUrl).promise;
        const firstPage = await pdf.getPage(1);
        const scale = 0.5; // Adjust scale to your preference for the preview size
        const viewport = firstPage.getViewport({ scale });
        const canvas = canvasRef.current;
        const context = canvas.getContext('2d');
        canvas.height = viewport.height;
        canvas.width = viewport.width;

        const renderContext = {
          canvasContext: context,
          viewport,
        };
        firstPage.render(renderContext);
      } catch (error) {
        console.error("Error loading PDF: ", error);
      }
    };

    loadPdf();
  }, [fileUrl]);

  return <canvas ref={canvasRef}></canvas>;
};

export default PDFPreview;
kirin-ri commented 8 months ago
import React, { useEffect, useRef } from 'react';
import * as pdfjsLib from 'pdfjs-dist/legacy/build/pdf';
import 'pdfjs-dist/legacy/build/pdf.worker.entry';

// 定义Props的接口
interface PDFPreviewProps {
  fileUrl: string;
}

const PDFPreview: React.FC<PDFPreviewProps> = ({ fileUrl }) => {
  const canvasRef = useRef<HTMLCanvasElement>(null);

  useEffect(() => {
    pdfjsLib.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjsLib.version}/pdf.worker.min.js`;

    const loadPdf = async () => {
      try {
        const pdf = await pdfjsLib.getDocument(fileUrl).promise;
        const firstPage = await pdf.getPage(1);
        const scale = 0.5; // Adjust scale to your preference for the preview size
        const viewport = firstPage.getViewport({ scale });
        const canvas = canvasRef.current;
        if (canvas) {
          const context = canvas.getContext('2d');
          canvas.height = viewport.height;
          canvas.width = viewport.width;

          const renderContext = {
            canvasContext: context,
            viewport,
          };
          firstPage.render(renderContext);
        }
      } catch (error) {
        console.error("Error loading PDF: ", error);
      }
    };

    loadPdf();
  }, [fileUrl]);

  return <canvas ref={canvasRef}></canvas>;
};

export default PDFPreview;
kirin-ri commented 8 months ago

Argument of type '{ canvasContext: CanvasRenderingContext2D | null; viewport: PageViewport; }' is not assignable to parameter of type 'RenderParameters'. Types of property 'canvasContext' are incompatible. Type 'CanvasRenderingContext2D | null' is not assignable to type 'CanvasRenderingContext2D'. Type 'null' is not assignable to type 'CanvasRenderingContext2D'.ts(2345)

kirin-ri commented 8 months ago
import React, { useEffect, useRef } from 'react';
import * as pdfjsLib from 'pdfjs-dist/legacy/build/pdf';
import 'pdfjs-dist/legacy/build/pdf.worker.entry';

interface PDFPreviewProps {
  fileUrl: string;
}

const PDFPreview: React.FC<PDFPreviewProps> = ({ fileUrl }) => {
  const canvasRef = useRef<HTMLCanvasElement>(null);

  useEffect(() => {
    pdfjsLib.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjsLib.version}/pdf.worker.min.js`;

    const loadPdf = async () => {
      try {
        const pdf = await pdfjsLib.getDocument(fileUrl).promise;
        const firstPage = await pdf.getPage(1);
        const scale = 0.5; // Adjust scale to your preference for the preview size
        const viewport = firstPage.getViewport({ scale });
        const canvas = canvasRef.current;

        if (canvas) {
          const context = canvas.getContext('2d');
          if (context) {
            canvas.height = viewport.height;
            canvas.width = viewport.width;

            const renderContext = {
              canvasContext: context,
              viewport,
            };
            await firstPage.render(renderContext).promise;
          }
        }
      } catch (error) {
        console.error("Error loading PDF: ", error);
      }
    };

    loadPdf();
  }, [fileUrl]);

  return <canvas ref={canvasRef}></canvas>;
};

export default PDFPreview;
kirin-ri commented 8 months ago
const PDFPreview: React.FC<PDFPreviewProps> = ({ fileUrl, pageNumber }) => {
  const canvasRef = useRef<HTMLCanvasElement>(null);

  useEffect(() => {
    pdfjsLib.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjsLib.version}/pdf.worker.min.js`;

    const loadPdf = async () => {
      try {
        const pdf = await pdfjsLib.getDocument(fileUrl).promise;
        // 使用传入的pageNumber获取指定的PDF页面
        const page = await pdf.getPage(pageNumber);
        const scale = 0.5; // 调整缩放比例以适应预览大小
        const viewport = page.getViewport({ scale });
        const canvas = canvasRef.current;

        if (canvas) {
          const context = canvas.getContext('2d');
          if (context) {
            canvas.height = viewport.height;
            canvas.width = viewport.width;

            const renderContext = {
              canvasContext: context,
              viewport,
            };
            await page.render(renderContext).promise;
          }
        }
      } catch (error) {
        console.error("Error loading PDF: ", error);
      }
    };

    loadPdf();
  }, [fileUrl, pageNumber]); // 添加pageNumber作为依赖项

  return <canvas ref={canvasRef}></canvas>;
};

export default PDFPreview;
kirin-ri commented 8 months ago
  const getPageNumberFromTitle = (title: string) => {
    const match = title.match(/\((\d+)\)/);
    return match ? `#page=${match[1]}` : '';
  };
  return isOpen ? (
    <div>
      <div className={`fixed top-0 ${side}-0 z-40 flex h-full w-[400px] flex-none flex-col space-y-2 bg-[#202123] p-2 text-[14px] transition-all sm:relative sm:top-0`}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%', padding: '0 10px' }}>
          <div style={titleStyle}>
            <IconFile style={{ marginRight: '8px' }} />
            参照リスト
          </div>
          <div onClick={toggleOpen} style={titleStyle}>
            {side === 'right' ? <IconArrowBarRight /> : <IconArrowBarLeft />}
          </div>
        </div>
        <div  style={{overflowY:'auto',flex:1,padding:'0 10px'}}>
          <ul>
            {items.map((item,index) => (
              <a href={`${item.source}${getPageNumberFromTitle(item.title)}`} target="_blank" rel="noopener noreferrer">
                <li
                style={listItemStyle(index === hoveredItemId)}
                onMouseEnter={() => setHoveredItemId(index)}
                onMouseLeave={() => setHoveredItemId(null)}
                >
                  <PDFPreview fileUrl={item.source} pageNumber={`${getPageNumberFromTitle(item.title)}`}/>
kirin-ri commented 8 months ago
const extractPageNumberFromTitle = (title: string): number => {
  const match = title.match(/\((\d+)\)/);
  return match ? parseInt(match[1], 10) : 1;
};