chore: path

src/components/FilePath/index.tsx

@@ -0,0 +1,36 @@
+import { FC, useEffect, useState } from 'react';
+import clsx from 'clsx';
+import { path, shell } from '@tauri-apps/api';
+
+import { chatRoot } from '@/utils';
+
+interface FilePathProps {
+  paths?: string;
+  label?: string;
+  className?: string;
+  content?: string;
+  url?: string;
+}
+
+const FilePath: FC<FilePathProps> = ({ className, label = 'PATH', paths = '', url, content }) => {
+  const [filePath, setPath] = useState('');
+
+  useEffect(() => {
+    if (!path && !url) return;
+    (async () => {
+      if (url) {
+        setPath(url);
+        return;
+      }
+      setPath(await path.join(await chatRoot(), ...paths.split('/').filter(i => !!i)));
+    })()
+  }, [url, paths])
+
+  return (
+    <div className={clsx(className, 'chat-file-path')}>
+      <div>{label}: <a onClick={() => shell.open(filePath)} title={filePath}>{content ? content : filePath}</a></div>
+    </div>
+  );
+}
+
+export default FilePath;

src/components/Markdown/Editor.tsx

@@ -0,0 +1,25 @@
+import Editor from "@monaco-editor/react";
+import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
+
+import './index.scss';
+
+const MarkdownEditor = () => {
+  return (
+    <div>
+      <PanelGroup direction="horizontal">
+        <Panel>
+          <Editor
+            height="calc(100vh - 120px)"
+            language="markdown"
+          />
+        </Panel>
+        <PanelResizeHandle className="resize-handle" />
+        <Panel collapsible={true}>
+          <div>1284</div>
+        </Panel>
+        </PanelGroup>
+    </div>
+  )
+};
+
+export default MarkdownEditor;

src/components/Markdown/index.scss

@@ -4,4 +4,16 @@
   pre, code {
     font-family: monospace, monospace;
   }
-}
+}
+
+.resize-handle {
+  width: 0.25rem;
+  transition: 250ms linear background-color;
+  background-color: #7f8082;
+  outline: none;
+
+  &:hover,
+  &[data-resize-handle-active] {
+    background-color: #5194eb;
+  }
+}