diff --git a/src/App.vue b/src/App.vue
index c74e5c3..1f7c373 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import { appWindow } from '@tauri-apps/api/window'
 import { initSQL } from '@/sqls'
-import { useSettingsStore, useRecordStore, useRoleStore } from '@/stores'
+import { useSettingsStore, useSessionStore, useRoleStore } from '@/stores'
 
 // TODO: 首次加载有问题，获取不到初始化的角色列表
 initSQL()
 
 const { themeClass, isFix, shortcutKey } = storeToRefs(useSettingsStore())
-const { currentRecord } = storeToRefs(useRecordStore())
+const { currentSession } = storeToRefs(useSessionStore())
 const { currentRole } = storeToRefs(useRoleStore())
 
 const windowFocused = ref(true)
@@ -35,10 +35,10 @@ onMounted(async () => {
     </div>
 
     <div class="flex-1 cursor-default overflow-auto">
-      <template v-if="currentRecord">
+      <template v-if="currentSession">
         123132
         <!-- <div
-          class="flex items-start p-2"
+          class="flex p-2 items-start"
           v-for="(item, index) of currentRecord.data?.slice(1)"
           :key="index"
         >
@@ -75,16 +75,14 @@ onMounted(async () => {
 
     <div class="flex cursor-default flex-col gap-2 pt-2">
       <div class="text-6 relative flex justify-end gap-4">
-        <div class="text-4 left-50% top-50% -translate-1/2 absolute">
+        <div class="top-50% left-50% text-4 -translate-1/2 absolute">
           正在与 <span class="mark">{{ currentRole?.name }}</span> 对话
         </div>
 
-        <!-- <Function /> -->
-
-        <!-- <Settings />  -->
+        <Function />
       </div>
 
-      <!-- <Input /> -->
+      <Input />
     </div>
   </div>
 </template>
diff --git a/src/api/index.ts b/src/api/index.ts
index b9f2ed7..79eb61d 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -2,7 +2,7 @@ import { fetch, Body } from '@tauri-apps/api/http'
 import { dialogErrorMessage } from '@/utils'
 import type { FetchOptions } from '@tauri-apps/api/http'
 import type { RecordData } from '@/types'
-import { useSettingsStore, useRecordStore } from '@/stores'
+import { useSettingsStore, useSessionStore } from '@/stores'
 
 /**
  * 请求总入口
@@ -43,7 +43,7 @@ export const request = async (url: string, options?: FetchOptions) => {
  */
 export const getOpenAIResultApi = async () => {
   const { apiKey } = useSettingsStore()
-  const { currentRecord } = useRecordStore()
+  const { currentRecord } = useSessionStore()
 
   return await request(import.meta.env.VITE_OPEN_AI_URL, {
     method: 'POST',
diff --git a/src/components/Avatar/index.vue b/src/components/Avatar/index.vue
index eb8d94b..e790244 100644
--- a/src/components/Avatar/index.vue
+++ b/src/components/Avatar/index.vue
@@ -5,7 +5,7 @@ const props = withDefaults(defineProps<{ value?: string }>(), {
   value: import.meta.env.VITE_APP_NAME
 })
 
-const avatar = computed(() => multiAvatar(props.value))
+const avatar = computed(() => multiAvatar(props.value || '默认头像'))
 </script>
 
 <template>
diff --git a/src/components/Function/components/ShortcutKey.vue b/src/components/Function/components/ShortcutKey.vue
index c903491..3d38b7c 100644
--- a/src/components/Function/components/ShortcutKey.vue
+++ b/src/components/Function/components/ShortcutKey.vue
@@ -1,14 +1,16 @@
 <script setup lang="ts">
 import { Icon } from '@arco-design/web-vue'
 import { IconCloseCircleFill } from '@arco-design/web-vue/es/icon'
-import { useShortcutKeyStore } from '@/stores'
+import { useSettingsStore } from '@/stores'
 import { hotkeys, isHotKey, getKeyIcon, getKeySymbol } from '@/utils'
 
 const IconFont = Icon.addFromIconFontCn({
   src: import.meta.env.VITE_ICON_FONT_URL
 })
 
-const { shortcutKey, setupComplete } = storeToRefs(useShortcutKeyStore())
+const { shortcutKey, isBinding: setupComplete } = storeToRefs(
+  useSettingsStore()
+)
 
 const lastShortcutKey = computed(() => shortcutKey.value.at(-1) || '')
 
diff --git a/src/components/Function/index.vue b/src/components/Function/index.vue
index 0dbca1f..8f45d60 100644
--- a/src/components/Function/index.vue
+++ b/src/components/Function/index.vue
@@ -6,12 +6,12 @@ import {
   IconHistory,
   IconSettings
 } from '@arco-design/web-vue/es/icon'
-import { useRecordStore } from '@/stores'
+import { useSessionStore } from '@/stores'
 import { getArrayLength } from '@/utils'
 
-const recordStore = useRecordStore()
+const recordStore = useSessionStore()
 const { createNewRecord, getAiMessage, deleteRecord } = recordStore
-const { currentRecord, isThinking } = storeToRefs(recordStore)
+const { currentSession, isThinking } = storeToRefs(recordStore)
 
 const modalVisible = ref(false)
 const setModalVisible = () => {
@@ -23,20 +23,20 @@ const functions = computed(() => [
   {
     content: '新建对话',
     icon: IconPlusCircle,
-    disabled: !!currentRecord,
+    disabled: !!currentSession,
     handleClick: createNewRecord
   },
   {
     content: '重新回答',
     icon: IconRefresh,
     disabled:
-      isThinking.value || !(getArrayLength(currentRecord.value?.data) > 2),
+      isThinking.value || !(getArrayLength(currentSession.value?.data) > 2),
     handleClick: () => getAiMessage()
   },
   {
     content: '清空对话',
     icon: IconDelete,
-    disabled: !!currentRecord,
+    disabled: !!currentSession,
     handleClick: () => deleteRecord()
   },
   {
diff --git a/src/components/Input/components/RoleList.vue b/src/components/Input/components/RoleList.vue
index e03d19f..563f972 100644
--- a/src/components/Input/components/RoleList.vue
+++ b/src/components/Input/components/RoleList.vue
@@ -1,31 +1,44 @@
 <script lang="ts" setup>
-import { IconEdit, IconCheck, IconDelete } from '@arco-design/web-vue/es/icon'
+import {
+  IconEdit,
+  IconCheck,
+  IconDelete,
+  IconClose
+} from '@arco-design/web-vue/es/icon'
 import { useRoleStore } from '@/stores'
-import { DEFAULT_ROLE } from '@/constants'
-import type { TablePayload } from '@/types'
+import type { RolePayload } from '@/types'
 
 const roleStore = useRoleStore()
-const { addRole, updateRole, deleteRole } = roleStore
-const { currentRole, roleList } = storeToRefs(roleStore)
-
-const isEdit = ref(false)
-const editItem = ref<TablePayload>({})
-
-const handleEdit = (data: TablePayload) => {
-  handleUpdate()
-
-  isEdit.value = true
-  editItem.value = data
+const { updateRole, deleteRole, addRole, getRoleList } = roleStore
+const { currentRole, showList, isShow, isAddNew } = storeToRefs(roleStore)
+
+const handleUpdate = (item: RolePayload) => {
+  if (isAddNew.value) {
+    const { name, description } = item
+    addRole({ name, description })
+  } else {
+    if (!item.id) return
+    item.isEdit = false
+    updateRole(item)
+  }
 }
 
-const handleUpdate = () => {
-  if (!editItem.value.id) return
+const handleSelect = (role: RolePayload) => {
+  isShow.value = false
+  currentRole.value = role
+}
 
-  isEdit.value = false
-  updateRole(editItem.value)
+const handleAdd = () => {
+  isAddNew.value = true
+  // TODO 这里需要优化，自动聚焦到输入框
 }
 
-watch(currentRole, handleUpdate)
+const handleHide = () => {
+  // 判断是否有正在编辑的角色
+  const isEdit = showList.value.some((item) => item.isEdit)
+  if (isEdit) return
+  isShow.value = false
+}
 </script>
 <!-- TODO:优化代码和 css 样式 -->
 <!-- TODO:输入内容的非空判断 -->
@@ -33,13 +46,17 @@ watch(currentRole, handleUpdate)
 <template>
   <a-popover
     title="请选择对话的角色"
-    trigger="click"
+    :popup-visible="isShow"
     class="role-popover w-full"
+    @click="isShow = true"
+    @popup-visible-change="handleHide"
   >
     <template #title>
       <div class="flex items-center justify-between">
-        <span>请选择对话的角色</span>
-        <a-button type="outline">添加角色</a-button>
+        <span>{{ isAddNew ? '请填写信息' : '请选择对话的角色' }}</span>
+        <a-button type="outline" @click="handleAdd" v-if="!isAddNew"
+          >添加角色</a-button
+        >
       </div>
     </template>
 
@@ -50,36 +67,36 @@ watch(currentRole, handleUpdate)
     <template #content>
       <ul class="role-list">
         <li
-          class="bordered-top flex cursor-pointer items-center gap-4 p-4 text-[var(--color-text-1)]"
-          :style="{
-            background:
-              currentRole?.id === item.id
-                ? 'rgb(var(--blue-6), 0.2)'
-                : 'transparent'
+          class="flex cursor-pointer items-center gap-4 rounded-t bg-transparent p-4 text-[var(--color-text-1)] hover:bg-red-100"
+          :class="{
+            'bg-blue-200!': currentRole?.id === item.id
           }"
-          v-for="item in roleList"
+          v-for="item in showList"
           :key="item.id"
-          @click="currentRole = item"
+          @click="item.isEdit ? '' : handleSelect(item)"
         >
           <div class="flex flex-1 items-center gap-4">
             <Avatar class="w-10!" :value="item.name" />
 
             <div class="flex flex-1 flex-col gap-2">
               <a-input
-                v-model="editItem.name"
+                v-model="item.name"
+                placeholder="请输入角色名称"
                 allow-clear
-                v-if="isEdit && editItem.id === item.id"
-                @click="(e: any) => e.stopPropagation()"
+                v-if="item.isEdit"
+                @click.stop
               />
               <span v-else>
                 {{ item.name }}
               </span>
 
               <a-textarea
-                v-model="editItem.description"
+                v-model="item.description"
+                placeholder="请输入角色描述"
+                auto-size
                 allow-clear
-                v-if="isEdit && editItem.id === item.id"
-                @click="(e: any) => e.stopPropagation()"
+                v-if="item.isEdit"
+                @click.stop
               ></a-textarea>
               <span v-else>
                 {{ item.description }}
@@ -87,23 +104,16 @@ watch(currentRole, handleUpdate)
             </div>
           </div>
 
-          <div
-            class="text-5 flex gap-2"
-            v-if="
-              item.name !== DEFAULT_ROLE.name ||
-              item.description !== DEFAULT_ROLE.description
-            "
-            @click="(e) => e.stopPropagation()"
-          >
-            <IconCheck
-              @click="handleUpdate"
-              v-if="isEdit && editItem.id === item.id"
-            />
-
-            <IconEdit @click="handleEdit(item)" v-else />
-
-            <!-- TODO:编辑的时候变成 x -->
-            <IconDelete @click="deleteRole(item.id!)" />
+          <!-- TODO 这里我在在表里新增一个字is_default，更方便处理 -->
+          <div v-if="!item.is_default" @click.stop>
+            <div v-if="!item.isEdit" class="text-5 flex gap-5">
+              <IconEdit @click="item.isEdit = true" />
+              <IconDelete @click="deleteRole(item.id!)" />
+            </div>
+            <div v-else class="text-5 flex gap-5">
+              <IconCheck @click="handleUpdate(item)" />
+              <IconClose @click="getRoleList" />
+            </div>
           </div>
         </li>
       </ul>
@@ -114,7 +124,7 @@ watch(currentRole, handleUpdate)
 <style lang="scss">
 .role-popover {
   .arco-trigger-content {
-    @apply flex max-h-[calc(100vh-56px)] flex-col rounded-t-xl px-0 py-4;
+    @apply flex max-h-[calc(100vh-56px)] flex-col rounded-t-xl py-4 px-0;
 
     .arco-popover-title {
       @apply p-4 pt-0;
diff --git a/src/components/Input/index.vue b/src/components/Input/index.vue
index aff3c10..9cd5f28 100644
--- a/src/components/Input/index.vue
+++ b/src/components/Input/index.vue
@@ -1,10 +1,14 @@
 <script lang="ts" setup>
-import { useRecordStore } from '@/stores'
+import { useSessionStore, useRoleStore } from '@/stores'
 
-const recordStore = useRecordStore()
+const recordStore = useSessionStore()
 const { getAiMessage } = recordStore
 const { isThinking } = storeToRefs(recordStore)
 
+const roleStore = useRoleStore()
+const { getFilterRoleList } = roleStore
+const { currentRole } = storeToRefs(roleStore)
+
 const textAreaElement = ref<HTMLTextAreaElement | null>(null)
 
 const textAreaValue = ref('')
@@ -26,6 +30,15 @@ const onKeydown = (event: KeyboardEvent) => {
   }
 }
 
+watch(textAreaValue, (value) => {
+  getFilterRoleList(value)
+})
+
+watch(currentRole, () => {
+  textAreaValue.value = ''
+  textAreaElement.value?.focus()
+})
+
 onMounted(() => {
   // appWindow.onFocusChanged(() => {
   //   textAreaElement.value?.focus()
@@ -44,6 +57,8 @@ onMounted(() => {
       v-model="textAreaValue"
       :disabled="isThinking"
       @keydown="onKeydown"
+      auto-size
+      clearable
     ></a-textarea>
   </div>
 </template>
@@ -51,7 +66,7 @@ onMounted(() => {
 <style lang="scss" scoped>
 .app-input {
   .arco-textarea-wrapper {
-    height: 32px;
+    // height: 32px;
 
     transition: all 0.3s;
 
@@ -61,7 +76,8 @@ onMounted(() => {
       border-color: var(--color-neutral-4);
     }
     &.arco-textarea-focus {
-      height: 96px;
+      max-height: 96px;
+      overflow-y: scroll;
 
       border-color: rgb(var(--arcoblue-6));
       border-radius: 0;
diff --git a/src/components/Session/index.vue b/src/components/Session/index.vue
index 9377680..49fe3fa 100644
--- a/src/components/Session/index.vue
+++ b/src/components/Session/index.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { useSettingsStore, useRecordStore, useRoleStore } from '@/stores'
+import { useSettingsStore, useSessionStore, useRoleStore } from '@/stores'
 
 const { uuid } = storeToRefs(useSettingsStore())
-const { currentRecord } = storeToRefs(useRecordStore())
+const { currentRecord } = storeToRefs(useSessionStore())
 const { currentRole } = storeToRefs(useRoleStore())
 </script>
 
diff --git a/src/sqls/index.ts b/src/sqls/index.ts
index 5b327ed..1b368c1 100644
--- a/src/sqls/index.ts
+++ b/src/sqls/index.ts
@@ -30,6 +30,7 @@ export const executeSQL = async (sql: string) => {
       await db.execute(sql)
     }
   } catch (error) {
+    console.log('error', error)
     let action
 
     switch (sliceSQL) {
@@ -64,25 +65,25 @@ export const executeSQL = async (sql: string) => {
 export const initSQL = async () => {
   await executeSQL(
     `
-    CREATE TABLE IF NOT EXISTS session (id INTEGER PRIMARY KEY AUTOINCREMENT, title TEXT, role_id INTEGER)
+    CREATE TABLE IF NOT EXISTS session (id INTEGER PRIMARY KEY AUTOINCREMENT, title TEXT, role_id INTEGER);
     CREATE TABLE IF NOT EXISTS session_data (id INTEGER PRIMARY KEY AUTOINCREMENT, session_id INTEGER, message TEXT, time TIMESTAMP DEFAULT CURRENT_TIMESTAMP);
     CREATE TABLE IF NOT EXISTS role (id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT, description TEXT, is_default INTEGER DEFAULT false);
     CREATE TABLE IF NOT EXISTS credit (id INTEGER PRIMARY KEY AUTOINCREMENT, history_id INTEGER, token_cost INTEGER, api_key TEXT);
     `
   )
 
-  await insertSQL('role', {
-    name: DEFAULT_ROLE.name,
-    description: DEFAULT_ROLE.description,
-    is_default: false
-  })
-
-  for (const item of [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]) {
-    await insertSQL('role', {
-      name: DEFAULT_ROLE.name + item,
-      description: DEFAULT_ROLE.description
-    })
-  }
+  // await insertSQL('role', {
+  //   name: DEFAULT_ROLE.name,
+  //   description: DEFAULT_ROLE.description,
+  //   is_default: false
+  // })
+
+  // for (const item of [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]) {
+  //   await insertSQL('role', {
+  //     name: DEFAULT_ROLE.name + item,
+  //     description: DEFAULT_ROLE.description
+  //   })
+  // }
 }
 
 /**
diff --git a/src/stores/role.ts b/src/stores/role.ts
index 9b05456..3ff88e1 100644
--- a/src/stores/role.ts
+++ b/src/stores/role.ts
@@ -1,5 +1,4 @@
 import { selectSQL, insertSQL, updateSQL, deleteSQL } from '@/sqls'
-
 import type { RolePayload } from '@/types'
 
 export const useRoleStore = defineStore(
@@ -8,10 +7,17 @@ export const useRoleStore = defineStore(
     const currentRole = ref<RolePayload>()
 
     const roleList = ref<RolePayload[]>([])
+    const filterList = ref<RolePayload[]>([])
+
+    const isShow = ref(false)
+    const isAddNew = ref(false)
 
     const getRoleList = async () => {
       const result = await selectSQL('role')
 
+      isAddNew.value = false
+      defaultRole.value.length = 0
+
       roleList.value = result.map((item) => ({ ...item, isEdit: false }))
 
       if (currentRole.value) {
@@ -26,14 +32,28 @@ export const useRoleStore = defineStore(
       currentRole.value = roleList.value[0]
     }
 
+    const getFilterRoleList = (value: string) => {
+      if (value.trim().length && value.startsWith('/')) {
+        filterList.value = roleList.value.filter((item: any) => {
+          return item.name.includes(value.slice(1))
+        })
+
+        isShow.value = filterList.value.length > 0
+        return
+      }
+      isShow.value = false
+      filterList.value.length = 0
+    }
+
     const addRole = async (payload: RolePayload) => {
-      await insertSQL('role', payload)
+      await insertSQL('role', payload as any)
 
       getRoleList()
     }
 
     const updateRole = async (payload: RolePayload) => {
-      await updateSQL('role', payload)
+      const { name, description, id } = payload
+      await updateSQL('role', { name, description, id } as any)
 
       getRoleList()
     }
@@ -44,9 +64,38 @@ export const useRoleStore = defineStore(
       getRoleList()
     }
 
+    const defaultRole = ref<RolePayload[]>([])
+
+    const showList = computed(() => {
+      if (isAddNew.value) {
+        defaultRole.value.push({
+          id: 99999,
+          name: '',
+          description: '',
+          isEdit: true,
+          is_default: false
+        })
+        return defaultRole.value
+      }
+      const res =
+        filterList.value.length > 0 ? filterList.value : roleList.value
+      res.forEach((item) => (item.isEdit = false))
+      return res
+    })
+
     onMounted(getRoleList)
 
-    return { currentRole, roleList, addRole, updateRole, deleteRole }
+    return {
+      isShow,
+      isAddNew,
+      getFilterRoleList,
+      getRoleList,
+      showList,
+      currentRole,
+      addRole,
+      updateRole,
+      deleteRole
+    }
   },
   {
     persist: {
diff --git a/src/stores/session.ts b/src/stores/session.ts
index 232ba50..55394ea 100644
--- a/src/stores/session.ts
+++ b/src/stores/session.ts
@@ -31,7 +31,7 @@ export const useSessionStore = defineStore('sessionStore', () => {
         data: []
       }
 
-      addSession()
+      // addSession()
 
       // const newSessionList: SessionPayload[] = [
       //   {
@@ -47,13 +47,11 @@ export const useSessionStore = defineStore('sessionStore', () => {
       //     role_id: currentRole.id
       //   }
       // ]
-
-      addSession(newSession)
     } else if (!value) {
-      const newRecord = { ...currentRecord.value }
+      const newRecord = { ...currentSession.value }
       newRecord.data?.pop()
 
-      currentRecord.value = newRecord
+      // currentSession.value = newRecord
     }
 
     const result = await getOpenAIResultApi()
@@ -62,7 +60,7 @@ export const useSessionStore = defineStore('sessionStore', () => {
 
     if (!result) return
 
-    currentRecord.value?.data?.push(result?.message)
+    // currentRecord.value?.data?.push(result?.message)
 
     updateRecord()
   }
@@ -74,22 +72,22 @@ export const useSessionStore = defineStore('sessionStore', () => {
   }
 
   const addSession = async (payload: SessionPayload) => {
-    await insertSQL('session', payload)
+    await insertSQL('session', payload as any)
 
     getRecord()
   }
 
   const updateRecord = async () => {
-    await updateSQL('history', currentRecord.value!)
+    await updateSQL('session', currentSession.value as any)
 
     getRecord()
   }
 
   const deleteRecord = async (deleteAll = false) => {
     if (deleteAll) {
-      await deleteSQL('history')
+      // await deleteSQL('session')
     } else {
-      await deleteSQL('history', currentRecord.value?.id)
+      // await deleteSQL('session', currentRecord.value?.id)
     }
 
     getRecord()
@@ -98,12 +96,12 @@ export const useSessionStore = defineStore('sessionStore', () => {
   onMounted(getRecord)
 
   return {
-    currentRecord,
+    currentSession,
     isThinking,
-    recordList,
+    sessionList,
     createNewRecord,
     getAiMessage,
-    addRecord,
+    addSession,
     updateRecord,
     deleteRecord
   }
diff --git a/src/stores/settings.ts b/src/stores/settings.ts
index 83701e0..24fad4c 100644
--- a/src/stores/settings.ts
+++ b/src/stores/settings.ts
@@ -79,7 +79,7 @@ export const useSettingsStore = defineStore(
   },
   {
     persist: {
-      paths: ['themeMode', 'uuid', 'apiKey', 'shortcutKey']
+      // paths: ['themeMode', 'uuid', 'apiKey', 'shortcutKey']
     }
   }
 )
diff --git a/src/types/sql.d.ts b/src/types/sql.d.ts
index 766964f..7e1bf71 100644
--- a/src/types/sql.d.ts
+++ b/src/types/sql.d.ts
@@ -6,6 +6,14 @@ export interface RecordData {
   role: Role
   content: string
 }
+export interface RolePayload {
+  id?: number
+  name?: string
+  description?: string
+  is_default?: boolean
+  is_deleted?: boolean
+  isEdit?: boolean
+}
 
 export interface SessionData {
   id?: number