fix: fix ci (#683)

Author: zhangmo8

website/src/components/Playground.vue

@@ -2,6 +2,7 @@
 import { shallowRef } from 'vue'
 import { Monaco, Diff, EditorWithPanel } from './editors'
 import QueryEditor from './QueryEditor.vue'
+import ResetConfig from './ResetConfig.vue'
 import PatternEditor from './PatternEditor.vue'
 import SelectLang from './SelectLang.vue'
 import Tabs from './utils/Tabs.vue'
@@ -92,7 +93,10 @@ let codeMode = shallowRef('code')
           </EditorWithPanel>
         </template>
         <template #addon>
-          <SelectLang v-model="lang"/>
+          <div class="action-bar">
+            <SelectLang v-model="lang"/>
+            <ResetConfig v-model="state" />
+          </div>
         </template>
       </Tabs>
     </div>
@@ -120,6 +124,10 @@ let codeMode = shallowRef('code')
   /* keep here since monaco suggestion details are not expanded by default */
   filter: drop-shadow(0 0 16px #00000020);
 }
+.action-bar {
+  display: flex;
+  align-items: center;
+}
 
 @media only screen and (max-width: 780px) {
   .half.inactive {
@@ -133,4 +141,4 @@ let codeMode = shallowRef('code')
     pointer-events: none;
   }
 }
-</style>
+</style>

website/src/components/ResetConfig.vue

@@ -1,7 +1,12 @@
 <script lang="ts" setup>
 import IconReset from '../icons/Reset.vue'
 
-const state = defineModel()
+import type { State } from './astGrep/state'
+
+const state = defineModel<State>({
+  required: true,
+})
+
 const config = `
 # YAML Rule is more powerful!
 # https://ast-grep.github.io/guide/rule-config.html#rule

website/src/components/astGrep/state.ts

@@ -120,4 +120,4 @@ export function useSgState() {
     state,
     ...refs,
   }
-}
+}