feat: add quick start (#228)

Author: sanyuan0704

apps/agent-tars/quick-start.md

@@ -0,0 +1,74 @@
+# Agent Tars Quick Start
+
+Hello, welcome to Agent Tars!
+
+This guide will walk you through the process of setting up your first Agent Tars project.
+
+## Necessary Configuration
+
+Before you begin, you will need to set some necessary configuration.
+
+You can click the left-bottom button to open the configuration page:
+
+[setting-icon.png](https://lf3-static.bytednsdoc.com/obj/eden-cn/uhbfnupenuhf/agent-tars/setting-icon.jpeg)
+
+Then you can set the model config and the search config.
+
+For model config, you can set the model provider and api key:
+
+[model-config.png](https://lf3-static.bytednsdoc.com/obj/eden-cn/uhbfnupenuhf/agent-tars/search-setting.jpeg)
+
+> For Azure OpenAI, you can set more params, including apiVersion, deploymentName and endpoint.
+
+For search config, you can set the search provider and api key:
+
+[search-settings.png](https://lf3-static.bytednsdoc.com/obj/eden-cn/uhbfnupenuhf/agent-tars/search-setting.jpeg)
+
+## Start Your First Journey
+
+Now you can start your first journey in Agent Tars!
+
+You can input your first question in the input box, and then press Enter to send your question. Here is an example:
+
+[first-journey.jpeg](https://lf3-static.bytednsdoc.com/obj/eden-cn/uhbfnupenuhf/agent-tars/start-journey.jpeg)
+
+It's working!
+
+We also support **Human In the Loop**, that means you can interact with the agent in the working process by the input box. If you want to change the direction of current agent work, you can insert your thoughts in the special input box on the top position, and then press Enter to send your thoughts. Here is an example:
+
+[human-in-the-loop.jpeg](https://lf3-static.bytednsdoc.com/obj/eden-cn/uhbfnupenuhf/agent-tars/human-in-the-loop.jpeg)
+
+## Share Your Thead
+
+You can share your thread with others by the share button on the top menu.
+
+There are two modes to share your thread:
+
+- **Local Html**: Agent Tars will bundle your thread into a html file, and you can share it with others.
+- **Remote Server Url**: Agent Tars will generate a url for you to share your thread with others, Agent Tars will upload the html bundle to a remote server.
+
+### Local Mode
+
+You can click the share button to open the share modal, and then click the **Local Html** button to share your thread.
+
+[local-share](https://lf3-static.bytednsdoc.com/obj/eden-cn/uhbfnupenuhf/agent-tars/local-share.jpeg)
+
+### Remote Mode
+
+For the remote share mode, you need to set the remote server url in the share modal:
+
+[remote-share](https://lf3-static.bytednsdoc.com/obj/eden-cn/uhbfnupenuhf/agent-tars/local-share.jpeg)
+
+Then Agent Tars will post a request to the remote server to upload the html bundle, and then you can share the url with others. The specific request information is as follows:
+
+- Method: POST
+- Body:
+  - file: the html bundle file(type: multipart/form-data)
+- Response:
+  - data: { url: string }
+
+Then the server will return an object including the `url` parameter, which is the url to share your thread.
+
+### Enjoy the replay experience!
+
+When you finish the shared process, you can preview the bundle and experience the wonderful replay process! That's really cool!

apps/agent-tars/src/renderer/src/api/llmConfig.ts

@@ -1,5 +1,5 @@
 import { ipcClient } from './index';
-import { ModelSettings } from '../components/LeftSidebar/Settings/types';
+import { ModelSettings } from '@agent-infra/shared';
 import { getLLMProviderConfig } from '../services/llmSettings';
 
 /**

apps/agent-tars/src/renderer/src/components/CanvasPanel/Artifact/index.tsx

@@ -66,6 +66,7 @@ export function Artifact() {
       className="p-4 bg-white dark:bg-gray-800 rounded-lg shadow-sm h-full flex flex-col"
       style={{
         height: '100vh',
+        overflow: 'auto',
       }}
     >
       <div className="mb-2 text-sm text-gray-500 dark:text-gray-400">

apps/agent-tars/src/renderer/src/components/LeftSidebar/Settings/FileSystemSettingsTab.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { Button, Chip, Input } from '@nextui-org/react';
 import { IoMdAdd } from 'react-icons/io';
-import { FileSystemSettings } from './types';
+import { FileSystemSettings } from '@agent-infra/shared';
 
 interface FileSystemSettingsTabProps {
   settings: FileSystemSettings;

apps/agent-tars/src/renderer/src/components/LeftSidebar/Settings/useProviders.ts

@@ -1,16 +1,16 @@
 import { useState, useEffect } from 'react';
 import { getAvailableProviders } from '../../../api/llmConfig';
-import { Provider } from './types';
+import { ModelProvider } from '@agent-infra/shared';
 
 export function useProviders() {
-  const [providers, setProviders] = useState<Provider[]>([]);
+  const [providers, setProviders] = useState<ModelProvider[]>([]);
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
     async function fetchProviders() {
       try {
         const availableProviders =
-          (await getAvailableProviders()) as Provider[];
+          (await getAvailableProviders()) as ModelProvider[];
         setProviders(availableProviders);
       } catch (error) {
         console.error('Failed to fetch providers:', error);

apps/agent-tars/src/renderer/src/services/fileSystemSettings.ts

@@ -1,4 +1,4 @@
-import { FileSystemSettings } from '../components/LeftSidebar/Settings/types';
+import { FileSystemSettings } from '@agent-infra/shared';
 
 const FILE_SYSTEM_SETTINGS_KEY = 'omega-filesystem-settings';
 

apps/agent-tars/src/renderer/src/services/llmSettings.ts

@@ -1,4 +1,4 @@
-import { ModelSettings } from '../components/LeftSidebar/Settings/types';
+import { ModelSettings } from '@agent-infra/shared';
 
 const STORAGE_KEY = 'ai-model-settings';