schihei/chatbot-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add in prettier and format code for consistency (#168)

Browse Source
This commit is contained in:
Simon Holmes
2023-03-26 05:13:18 +00:00
committed by GitHub
parent b843f6e0e0
commit d6973b9ccc
72 changed files with 1140 additions and 4573 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/Markdown/CodeBlock.tsx
+37 -21
View File
@@ -1,14 +1,20 @@
import { generateRandomString, programmingLanguages } from "@/utils/app/codeblock";
import { IconCheck, IconClipboard, IconDownload } from "@tabler/icons-react";
import { FC, useState } from "react";
import { useTranslation } from "next-i18next";
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import { oneDark, oneLight } from "react-syntax-highlighter/dist/cjs/styles/prism";
import {
generateRandomString,
programmingLanguages,
} from '@/utils/app/codeblock';
import { IconCheck, IconClipboard, IconDownload } from '@tabler/icons-react';
import { FC, useState } from 'react';
import { useTranslation } from 'next-i18next';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import {
oneDark,
oneLight,
} from 'react-syntax-highlighter/dist/cjs/styles/prism';
interface Props {
language: string;
value: string;
lightMode: "light" | "dark";
lightMode: 'light' | 'dark';
}
export const CodeBlock: FC<Props> = ({ language, value, lightMode }) => {
@@ -29,40 +35,50 @@ export const CodeBlock: FC<Props> = ({ language, value, lightMode }) => {
});
};
const downloadAsFile = () => {
const fileExtension = programmingLanguages[language] || ".file";
const suggestedFileName = `file-${generateRandomString(3, true)}${fileExtension}`;
const fileName = window.prompt(t("Enter file name") || '', suggestedFileName);
const fileExtension = programmingLanguages[language] || '.file';
const suggestedFileName = `file-${generateRandomString(
3,
true,
)}${fileExtension}`;
const fileName = window.prompt(
t('Enter file name') || '',
suggestedFileName,
);
if (!fileName) {
// user pressed cancel on prompt
return;
}
const blob = new Blob([value], { type: "text/plain" });
const blob = new Blob([value], { type: 'text/plain' });
const url = URL.createObjectURL(blob);
const link = document.createElement("a");
const link = document.createElement('a');
link.download = fileName;
link.href = url;
link.style.display = "none";
link.style.display = 'none';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
URL.revokeObjectURL(url);
};
return (
<div className="codeblock relative text-[16px] font-sans">
<div className="codeblock relative font-sans text-[16px]">
<div className="flex items-center justify-between py-1.5 px-4">
<span className="text-xs text-white lowercase">{language}</span>
<span className="text-xs lowercase text-white">{language}</span>
<div className="flex items-center">
<button
className="text-white bg-none py-0.5 px-2 rounded focus:outline-none text-xs flex items-center"
className="flex items-center rounded bg-none py-0.5 px-2 text-xs text-white focus:outline-none"
onClick={copyToClipboard}
>
{isCopied ? <IconCheck size={18} className="mr-1.5"/> : <IconClipboard size={18} className="mr-1.5"/>}
{isCopied ? t("Copied!") : t("Copy code")}
{isCopied ? (
<IconCheck size={18} className="mr-1.5" />
) : (
<IconClipboard size={18} className="mr-1.5" />
)}
{isCopied ? t('Copied!') : t('Copy code')}
</button>
<button
className="text-white bg-none py-0.5 pl-2 rounded focus:outline-none text-xs flex items-center"
className="flex items-center rounded bg-none py-0.5 pl-2 text-xs text-white focus:outline-none"
onClick={downloadAsFile}
>
<IconDownload size={18} />
@@ -72,8 +88,8 @@ export const CodeBlock: FC<Props> = ({ language, value, lightMode }) => {
<SyntaxHighlighter
language={language}
style={lightMode === "light" ? oneLight : oneDark}
customStyle={{margin: 0}}
style={lightMode === 'light' ? oneLight : oneDark}
customStyle={{ margin: 0 }}
>
{value}
</SyntaxHighlighter>