feat: add prompt

package.json

@@ -18,6 +18,7 @@
  "@astrojs/node": "^5.0.4",
  "@astrojs/solid-js": "^2.0.2",
  "@astrojs/vercel": "^3.1.3",
+ "@thisbeyond/solid-select": "^0.13.0",
  "@unocss/reset": "^0.50.1",
  "astro": "^2.0.15",
  "eslint": "^8.36.0",
@@ -33,6 +34,7 @@
  "undici": "^5.20.0"
  },
  "devDependencies": {
+ "@evan-yang/eslint-config": "^1.0.1",
  "@iconify-json/carbon": "^1.1.16",
  "@types/markdown-it": "^12.2.3",
  "@typescript-eslint/parser": "^5.54.1",
@@ -41,7 +43,6 @@
  "@unocss/preset-typography": "^0.50.3",
  "eslint-plugin-astro": "^0.24.0",
  "punycode": "^2.3.0",
- "unocss": "^0.50.1",
- "@evan-yang/eslint-config": "^1.0.1"
+ "unocss": "^0.50.1"
  }
 }

src/components/Footer.astro

@@ -3,14 +3,14 @@
  <span pr-1>Made by</span>
  <a
  b-slate-link
- href="https://ddiu.io" target="_blank"
+ href="https://github.com/KieSun" target="_blank"
  >
- Diu
+ yck
  </a>
  <span px-1>|</span>
  <a
  b-slate-link
- href="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/ddiu8081/chatgpt-demo" target="_blank"
+ href="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/KieSun/chatgpt-demo" target="_blank"
  >
  Source Code
  </a>

src/components/Generator.tsx

@@ -1,14 +1,15 @@
-import { Index, Show, createSignal, onCleanup, onMount } from 'solid-js'
+import { Index, Show, createEffect, createSignal, onCleanup, onMount } from 'solid-js'
 import { useThrottleFn } from 'solidjs-use'
 import { generateSignature } from '@/utils/auth'
 import IconClear from './icons/Clear'
 import MessageItem from './MessageItem'
-import SystemRoleSettings from './SystemRoleSettings'
 import ErrorMessageItem from './ErrorMessageItem'
+import SwitchPrompt from './SwitchPrompt'
 import type { ChatMessage, ErrorMessage } from '@/types'
 
 export default () => {
  let inputRef: HTMLTextAreaElement
+ let messageRef: HTMLDivElement
  const [currentSystemRoleSettings, setCurrentSystemRoleSettings] = createSignal('')
  const [systemRoleEditing, setSystemRoleEditing] = createSignal(false)
  const [messageList, setMessageList] = createSignal<ChatMessage[]>([])
@@ -177,60 +178,72 @@ export default () => {
  handleButtonClick()
  }
 
+ const handlePromptChange = (v) => {
+ clear()
+ setCurrentSystemRoleSettings(v)
+ }
+
+ createEffect(() => {
+ let timer
+ if (loading()) {
+ timer = setInterval(() => {
+ messageRef.scrollTo(0, messageRef.scrollHeight)
+ }, 500)
+ } else {
+ timer && clearInterval(timer)
+ }
+ })
+
  return (
  <div my-6>
- <SystemRoleSettings
- canEdit={() => messageList().length === 0}
- systemRoleEditing={systemRoleEditing}
- setSystemRoleEditing={setSystemRoleEditing}
- currentSystemRoleSettings={currentSystemRoleSettings}
- setCurrentSystemRoleSettings={setCurrentSystemRoleSettings}
- />
- <Index each={messageList()}>
- {(message, index) => (
- <MessageItem
- role={message().role}
- message={message().content}
- showRetry={() => (message().role === 'assistant' && index === messageList().length - 1)}
- onRetry={retryLastFetch}
- />
- )}
- </Index>
- {currentAssistantMessage() && (
+ <SwitchPrompt onChange={handlePromptChange} />
+ <div class="overflow-y-scroll overflow-x-hidden mt" style={{ height: '55vh' }} ref={messageRef}>
+ <Index each={messageList()}>
+ {(message, index) => (
+ <MessageItem
+ role={message().role}
+ message={message().content}
+ showRetry={() => (message().role === 'assistant' && index === messageList().length - 1)}
+ onRetry={retryLastFetch}
+ />
+ )}
+ </Index>
+ {currentAssistantMessage() && (
  <MessageItem
  role="assistant"
  message={currentAssistantMessage}
  />
- )}
- { currentError() && <ErrorMessageItem data={currentError()} onRetry={retryLastFetch} /> }
+ )}
+ </div>
+ {currentError() && <ErrorMessageItem data={currentError()} onRetry={retryLastFetch} />}
  <Show
  when={!loading()}
  fallback={() => (
- <div class="gen-cb-wrapper">
+ <div className="gen-cb-wrapper">
  <span>AI is thinking...</span>
- <div class="gen-cb-stop" onClick={stopStreamFetch}>Stop</div>
+ <div className="gen-cb-stop" onClick={stopStreamFetch}>Stop</div>
  </div>
  )}
  >
- <div class="gen-text-wrapper" class:op-50={systemRoleEditing()}>
+ <div className="gen-text-wrapper" class:op-50={systemRoleEditing()}>
  <textarea
  ref={inputRef!}
  disabled={systemRoleEditing()}
  onKeyDown={handleKeydown}
  placeholder="Enter something..."
- autocomplete="off"
- autofocus
+ autoComplete="off"
+ autoFocus
  onInput={() => {
  inputRef.style.height = 'auto'
  inputRef.style.height = `${inputRef.scrollHeight}px`
  }}
  rows="1"
- class="gen-textarea"
+ className="gen-textarea"
  />
- <button onClick={handleButtonClick} disabled={systemRoleEditing()} gen-slate-btn>
+ <button onClick={handleButtonClick} gen-slate-btn>
  Send
  </button>
- <button title="Clear" onClick={clear} disabled={systemRoleEditing()} gen-slate-btn>
+ <button title="Clear" onClick={clear} gen-slate-btn>
  <IconClear />
  </button>
  </div>

src/components/Header.astro

@@ -9,8 +9,7 @@ import Themetoggle from './Themetoggle.astro'
  <Themetoggle />
  </div>
  <div class="fi mt-2">
- <span class="gpt-title">ChatGPT</span>
- <span class="gpt-subtitle">Demo</span>
+ <span class="gpt-subtitle">Program AI Tools</span>
  </div>
  <p mt-1 op-60>Based on OpenAI API (gpt-3.5-turbo).</p>
 </header>

src/components/SwitchPrompt.tsx

@@ -0,0 +1,37 @@
+import { Select } from '@thisbeyond/solid-select'
+import '@thisbeyond/solid-select/style.css'
+import './style.css'
+
+interface IProps {
+ onChange: (value: string) => void
+}
+
+const prompt = {
+ 'Write js code': '接下来你需要扮演一个编程专家，我会将需求发给你，你需要告诉我如何用 javascript 实现。',
+ 'Explain code': '接下来你需要扮演一个编程专家，我会将代码发给你，只需要为我解释这段代码做了什么。',
+ 'Write unit test use jest': '你现在是一个编程专家，接下来我会将代码发给你，请帮我使用 jest 写一个单元测试，请至少提供五个测试案例，同时要包含到极端的状况，让我能够确定这段程式码的输出是正确的。',
+ 'Refactor code': '你现在是一个 Clean Code 专家，我会将代码发给你，请用更干净简洁的方式改写，让我的同事们可以更容易维护。另外，也解释为什么你要这样重构，让我能把重构的方式的说明加到 Pull Request 当中。',
+ 'Code review': '接下来你需要扮演一个编程专家，我会将代码发给你，你需要帮我仔细的 review 代码并给出意见',
+ 'Json to ts interface': '接下来我会把 json 发给你，你需要帮我生成对应的 typescript 类型',
+ 'Regex': '你现在是一个 Regex 专家，我会将需求发给你，请帮我写一个 Regex',
+ 'Translate to english or chinese': '我需要你帮我完成翻译的工作。接下来如果我发给你中文，你需要翻译成英文。如果我发给你英文，你需要翻译成中文',
+}
+
+const SwitchPrompt = (props: IProps) => {
+ return (
+ <div>
+ <Select
+ initialValue={localStorage.getItem('prompt') || 'Write js code'}
+ class="custom"
+ options={Object.keys(prompt)}
+ onChange={(v) => {
+ localStorage.setItem('prompt', v)
+ props.onChange(prompt[v])
+ }
+ }
+ />
+ </div>
+ )
+}
+
+export default SwitchPrompt

src/components/style.css

@@ -0,0 +1,4 @@
+.custom .solid-select-list {
+ z-index: 100;
+ background: #fff;
+}

src/layouts/Layout.astro

@@ -53,9 +53,9 @@ const { title } = Astro.props;
  }
 
  main {
- max-width: 70ch;
+ max-width: 80ch;
  margin: 0 auto;
- padding: 6rem 2rem 4rem;
+ padding: 3rem 2rem 2rem;
  }
 
  ::-webkit-scrollbar {