Update import paths with alias

- Replace relative import paths with '@/...' alias in multiple files.
- Update tsconfig.json to include paths configuration.
- Add alias configuration to webpack.config.js.

src/index.tsx

@@ -2,9 +2,9 @@ import * as React from 'react';
 import ReactDOM from 'react-dom';
 import { createRoot } from 'react-dom/client';
 import { MantineProvider } from '@mantine/core';
-import App from './views/App';
-import { store } from './views/store';
 import { Provider } from 'react-redux';
+import App from '@/views/App';
+import { store } from '@/views/store';
 
 const container = document.getElementById('app')!;
 const root = createRoot(container); // createRoot(container!) if you use TypeScript

src/views/App.tsx

@@ -3,7 +3,7 @@ import {
     AppShell,
     useMantineTheme,
 } from '@mantine/core';
-import ChatPanel from './ChatPanel';
+import ChatPanel from '@/views/ChatPanel';
 
 export default function App() {
     const theme = useMantineTheme();

src/views/ChatPanel.tsx

@@ -5,8 +5,8 @@ import { ScrollArea } from '@mantine/core';
 import { Button } from '@mantine/core';
 import { useListState, useResizeObserver, useTimeout, useViewportSize } from '@mantine/hooks';
 import { IconPlayerStop, IconRotateDot } from '@tabler/icons-react';
-import messageUtil from '../util/MessageUtil';
-import { useAppDispatch, useAppSelector } from './hooks';
+import messageUtil from '@/util/MessageUtil';
+import { useAppDispatch, useAppSelector } from '@/views/hooks';
 
 import {
     setValue

src/views/CodeBlock.tsx

@@ -5,7 +5,7 @@ import ReactMarkdown from "react-markdown";
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { okaidia } from "react-syntax-highlighter/dist/esm/styles/prism";
 
-import messageUtil from '../util/MessageUtil';
+import messageUtil from '@/util/MessageUtil';
 
 const CodeBlock = (props: any) => {
     const { messageText } = props;

src/views/InputMessage.tsx

@@ -3,8 +3,8 @@ import { useListState, useResizeObserver } from "@mantine/hooks";
 import { IconGitBranch, IconBook, IconX, IconSquareRoundedPlus, IconSend } from "@tabler/icons-react";
 import React, { useState, useEffect } from "react";
 import { IconGitBranchChecked, IconShellCommand, IconMouseRightClick } from "./Icons";
-import messageUtil from '../util/MessageUtil';
-import { useAppDispatch, useAppSelector } from './hooks';
+import messageUtil from '@/util/MessageUtil';
+import { useAppDispatch, useAppSelector } from '@/views/hooks';
 
 import {
     setValue,

src/views/MessageContainer.tsx

@@ -1,15 +1,15 @@
 import { keyframes } from "@emotion/react";
 import { Center, Text, Flex, Avatar, Accordion, Box, Stack, Container, Divider, ActionIcon, Tooltip } from "@mantine/core";
 import React from "react";
-import CodeBlock from "./CodeBlock";
+import CodeBlock from "@/views/CodeBlock";
 
 // @ts-ignore
-import SvgAvatarDevChat from './avatar_devchat.svg';
+import SvgAvatarDevChat from '@/views/avatar_devchat.svg';
 // @ts-ignore
-import SvgAvatarUser from './avatar_spaceman.png';
+import SvgAvatarUser from '@/views/avatar_spaceman.png';
 import { IconCheck, IconCopy } from "@tabler/icons-react";
 
-import { useAppDispatch, useAppSelector } from './hooks';
+import { useAppDispatch, useAppSelector } from '@/views/hooks';
 import {
     selectGenerating,
     selectResponsed,

src/views/chatSlice.ts

@@ -1,6 +1,6 @@
 import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
-import messageUtil from '../util/MessageUtil';
-import type { RootState } from './store';
+import messageUtil from '@/util/MessageUtil';
+import type { RootState } from '@/views/store';
 
 export const fetchHistoryMessages = createAsyncThunk<{ command: string; entries: [] }>('input/fetchHistoryMessages', async () => {
     return new Promise((resolve, reject) => {

src/views/hooks.ts

@@ -1,5 +1,5 @@
 import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
-import type { RootState, AppDispatch } from './store';
+import type { RootState, AppDispatch } from '@/views/store';
 
 export const useAppDispatch: () => AppDispatch = useDispatch;
 export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

src/views/inputSlice.ts

@@ -1,6 +1,6 @@
 import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
-import type { RootState } from './store';
-import messageUtil from '../util/MessageUtil';
+import type { RootState } from '@/views/store';
+import messageUtil from '@/util/MessageUtil';
 
 export const fetchContextMenus = createAsyncThunk('input/fetchContextMenus', async () => {
     return new Promise((resolve, reject) => {

src/views/store.ts

@@ -1,6 +1,6 @@
 import { configureStore } from '@reduxjs/toolkit';
-import inputReducer from './inputSlice';
-import chatReducer from './chatSlice';
+import inputReducer from '@/views/inputSlice';
+import chatReducer from '@/views/chatSlice';
 
 export const store = configureStore({
   reducer: {

tsconfig.json

@@ -13,7 +13,12 @@
 		"strict": true,
 		"jsx": "react",
 		"esModuleInterop": true,
-		"noImplicitAny": false
+		"noImplicitAny": false,
+		"paths": {
+			"@/*": [
+				"./src/*"
+			]
+		}
 	},
 	"exclude": [
 		"test"

webpack.config.js

@@ -75,7 +75,10 @@ const webviewConfig = {
     filename: 'index.js',
   },
   resolve: {
-    extensions: ['.ts', '.tsx', '.js', '.json']
+    extensions: ['.ts', '.tsx', '.js', '.json'],
+    alias: {
+      '@': path.resolve(__dirname, 'src/')
+    },
   },
   module: {
     rules: [