feat: show history list under the command bar and fix select logic

src/app/constants.ts

@@ -4,7 +4,11 @@ import {
  faTimes,
 } from '@fortawesome/free-solid-svg-icons'
 import { faChevronsLeft } from '@fortawesome/pro-regular-svg-icons'
-import { setChatOpen, toggleChatHistory } from '../features/chat/chatSlice'
+import {
+ setChatHistoryOpen,
+ setChatOpen,
+ toggleChatHistory,
+} from '../features/chat/chatSlice'
 import { store } from './store'
 
 export type Tip = [string, string, IconDefinition, () => void]
@@ -25,4 +29,10 @@ export const ActionTips: ActionTipsInterface = {
  faChevronsLeft,
  () => store.dispatch(toggleChatHistory()),
  ],
+ CLOSE_HISTORY_DIRECTLY: [
+ 'Close History Directly',
+ '',
+ faTimes,
+ () => store.dispatch(setChatHistoryOpen(false)),
+ ],
 }

src/components/markdown.tsx

@@ -53,6 +53,11 @@ import ReactTextareaAutocomplete from '@webscopeio/react-textarea-autocomplete'
 
 import Modal from 'react-modal'
 
+export enum historyPosition {
+ COMMAND_BAR = 'COMMAND_BAR',
+ CHAT_POPUP = 'CHAT_POPUP',
+}
+
 export function PreBlock({ children }: { children: ReactNode | ReactNode[] }) {
  function getResult(child: ReactNode) {
  if (React.isValidElement(child)) {
@@ -350,9 +355,9 @@ export function ChatPopup() {
  {/* Subtle padding to separate content from scroll bar*/}
  <div>
  <div className="markdownpopup__dismiss h-8 flex flex-col mt-3 items-center">
-  <CommandBarActionTips tips={commandBarActionTips} />
+ <CommandBarActionTips tips={commandBarActionTips} />
  </div>
- <div className="chatpopup__content px-4 overflow-auto ">
+  <div className="chatpopup__content px-4 overflow-auto ">
  <div className="flex flex-col space-y-2">
  {markdownPopups}
  </div>
@@ -367,10 +372,12 @@ export function ChatPopup() {
  <CommandBar parentCaller={'chat'} />
  )}
  </div>
- </div>
+  </div>
  </div>
  {isChatHistoryOpen && (
- <ChatHistory onSelect={handleSelectHistory} />
+ <div className="w-80">
+ <ChatHistory onSelect={handleSelectHistory} />
+ </div>
  )}
  </div>
  )}
@@ -761,7 +768,7 @@ function formatPromptTime(sentAt: number): string {
  const hours = date.getHours()
  const minutes = date.getMinutes()
  const ampm = hours >= 12 ? 'pm' : 'am'
- const formattedHours = hours % 12  ? 12 : hours % 12
+ const formattedHours = hours % 12 ? 12 : hours % 12
  const formattedMinutes = minutes < 10 ? `0${minutes}` : minutes
  return `${formattedHours}:${formattedMinutes}${ampm}`
 }
@@ -781,27 +788,38 @@ function formatPromptPreview(prompt: string): string {
 function ChatHistory(props: {
  onSelect?: (id: string) => void
  onClose?: () => void
+ position?: historyPosition
 }) {
+ const { onSelect, position = historyPosition.CHAT_POPUP } = props
  const conversationIds = useAppSelector(csel.getConversationIds)
  const conversationPrompts = useAppSelector(
  csel.getConversationPrompts(conversationIds, 'reverse')
  )
 
+ const tips = useMemo(() => {
+ switch (position) {
+ case historyPosition.CHAT_POPUP:
+ return ActionTips.CLOSE_HISTORY
+ case historyPosition.COMMAND_BAR:
+ return ActionTips.CLOSE_HISTORY_DIRECTLY
+ default:
+ return ActionTips.CLOSE_HISTORY
+ }
+ }, [])
+
  return (
- <div className="flex flex-col items-center w-80 select-none">
- <button className="w-full" onClick={props.onClose}>
- <CommandBarActionTips
- align="right"
- tips={[ActionTips.CLOSE_HISTORY]}
- />
+ <div className="flex flex-col items-center select-none mt-2.5 h-full">
+ {/* <button className="w-full" onClick={props.onClose}> */}
+ <button className="w-full">
+ <CommandBarActionTips align="right" tips={[tips]} />
  </button>
  <div className="flex flex-col w-full items-center space-y-1 mt-1 overflow-auto">
  {conversationPrompts.map((msg) => {
  return (
  <button
  key={msg.conversationId}
  className="w-full bg-neutral-600 rounded-sm px-4 py-2"
- onClick={() => props.onSelect?.(msg.conversationId)}
+ onClick={() => onSelect?.(msg.conversationId)}
  >
  <div
  className={
@@ -830,6 +848,13 @@ export function CommandBar({
 }) {
  const dispatch = useAppDispatch()
 
+ const handleSelectHistory = (id: string) => {
+ dispatch(cs.toggleChatHistory())
+ dispatch(cs.setCurrentConversation(id))
+ }
+ const msgType = useAppSelector(csel.getMsgType)
+ const isChatHistoryOpen = useAppSelector<boolean>(csel.getHistoryStatus)
+
  const customStyles = {
  overlay: {
  backgroundColor: 'rgba(0, 0, 0, 0.1)',
@@ -854,7 +879,7 @@ export function CommandBar({
  }
 
  const commandBarOpen = useAppSelector(csel.getIsCommandBarOpen)
- const isChatHistoryAvailable = useAppSelector(
+ const _isChatHistoryAvailable = useAppSelector(
  csel.getIsChatHistoryAvailable
  )
 
@@ -869,7 +894,7 @@ export function CommandBar({
  style={customStyles}
  >
  <div className="tipArea">
- Previous
+ For Chat History Using
  <div className="tipKeyCommand">
  Ctrl+Shift+
  <FontAwesomeIcon icon={faArrowUp} />
@@ -882,6 +907,14 @@ export function CommandBar({
  </div>
  </div>
  </div>
+ {isChatHistoryOpen && msgType === 'freeform' && (
+ <div className="h-96">
+ <ChatHistory
+ onSelect={handleSelectHistory}
+ position={historyPosition.COMMAND_BAR}
+ />
+ </div>
+ )}
  </Modal>
  ) : (
  <div className="commandBar__container">

src/components/settingsPane.tsx

@@ -219,8 +219,9 @@ export function OpenAILoginPanel({ onSubmit }: { onSubmit: () => void }) {
  changeSettings({
  openAIKey: localAPIKey,
  useOpenAIKey: true,
- openAIModel: models.at(0) ?? null
- }))
+ openAIModel: models.at(0) ?? null,
+ })
+ )
  onSubmit()
  }
  }, [dispatch, localAPIKey])
@@ -346,12 +347,12 @@ export function OpenAIPanel() {
  changeSettings({
  openAIKey: localAPIKey,
  useOpenAIKey: true,
- openAIModel: models.at(0) ?? null
- }))
+ openAIModel: models.at(0) ?? null,
+ })
+ )
  }
  }, [dispatch, localAPIKey])
 
-
  return (
  <div className="settings__item">
  <div className="settings__item_title">OpenAI API Key</div>
@@ -485,34 +486,36 @@ export function CursorLogin({
  <div className="copilot__signin">
  <button onClick={signOut}>Log out</button>
  {showSettings && (
- <>
- <br />
- <button onClick={openAccountSettings}>
- Manage settings
- </button>
- </>
- )}
+  <>
+  <br />
+  <button onClick={openAccountSettings}>
+  Manage settings
+  </button>
+  </>
+  )}
  </div>
  </div>
  )
  } else {
  currentPanel = (
  <>
  <div className="settings__item">
- <div className="settings__item_title">Cursor Account</div>
+ <div className="settings__item_title">
+ Cursor Account
+ </div>
  <div className="settings__item_description">
  Login to use the AI without an API key
  </div>
  <div className="copilot__signin">
  <button onClick={signOut}>Log out</button>
  {showSettings && (
- <>
- <br />
- <button onClick={openAccountSettings}>
- Manage settings
- </button>
- </>
- )}
+  <>
+  <br />
+  <button onClick={openAccountSettings}>
+  Manage settings
+  </button>
+  </>
+  )}
  <br />
  </div>
  </div>
@@ -522,17 +525,15 @@ export function CursorLogin({
  Upgrade for unlimited generations
  </div>
  <div className="copilot__signin">
- <button onClick={upgrade}>Upgrade to Pro</button>
+  <button onClick={upgrade}>Upgrade to Pro</button>
  </div>
  </div>
  </>
  )
  }
  }
 
- return (
- currentPanel
- )
+ return currentPanel
 }
 
 function CopilotPanel() {

src/features/chat/chatSelectors.ts

@@ -158,3 +158,6 @@ export const getIsChatHistoryAvailable = createSelector(
 export const getFireCommandK = (state: FullState) =>
  state.chatState.fireCommandK
 export const getMsgType = (state: FullState) => state.chatState.msgType
+
+export const getHistoryStatus = (state: FullState) =>
+ state.chatState.chatHistoryIsOpen

src/features/chat/chatSlice.ts

@@ -320,6 +320,7 @@ export const chatSlice = createSlice({
  openCommandBar(chatState: ChatState) {
  chatState.isCommandBarOpen = true
  chatState.chatIsOpen = false
+ chatState.chatHistoryIsOpen = true
  const newConversationId = uuidv4()
 
  chatState.currentConversationId = newConversationId
@@ -525,19 +526,27 @@ export const chatSlice = createSlice({
  chatState.commandBarHistoryIndex
 
  const historyMessage = chatState.userMessages.at(index)
+ const currentConversationId = chatState.currentConversationId
+ const currentDraftMessage =
+ chatState.draftMessages[currentConversationId]
  if (historyMessage) {
  // chatState.currentConversationId = historyMessage.conversationId
- const currentConversationId = chatState.currentConversationId
- const currentDraftMessage =
- chatState.draftMessages[currentConversationId]
  currentDraftMessage.message = historyMessage.message
+ } else {
+ currentDraftMessage.message = ''
  }
  // if (historyMessage) {
  // chatState.commandBarText = historyMessage.message
  // } else {
  // chatState.commandBarText = ''
  // }
  },
+ setChatHistoryOpen(
+ chatState: ChatState,
+ action: PayloadAction<boolean>
+ ) {
+ chatState.chatHistoryIsOpen = action.payload
+ },
  },
 })
 
@@ -577,4 +586,5 @@ export const {
  _submitCommandBar: dummySubmitCommandBar,
  // Bad - I added tech debt and will fix later
  setMaxOrigLine,
+ setChatHistoryOpen,
 } = chatSlice.actions

src/index.css

@@ -2445,8 +2445,8 @@ free servers .disabled_command .shortcut__block {
 
 .tipArea {
  display: flex;
- color: #999;
- font-size: 12px;
+ color: #b3b2b2;
+ font-size: 14px;
  align-items: center;
  margin-bottom: 4px;
 }
@@ -2456,7 +2456,7 @@ free servers .disabled_command .shortcut__block {
  background-color: #444;
  padding: 2px;
  border-radius: 2px;
- font-size: 10px;
+ font-size: 14px;
 }
 
 .leftDrag {

src/main/auth.ts

@@ -221,7 +221,7 @@ export async function login() {
 }
 
 export async function signup() {
- await shell.openExternal(addRandomQueryParam(signUpUrl)) 
+ await shell.openExternal(addRandomQueryParam(signUpUrl))
 }
 
 export async function pay() {

src/preload.ts

@@ -416,7 +416,7 @@ const electronConnector = {
  },
  registerCloseErrors(callback: Callback) {
  ipcRenderer.on('closeErrors', callback)
- }
+ },
 }
 
 contextBridge.exposeInMainWorld('connector', electronConnector)