Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

修复自定义模型与预设模型名重复时,无法正确将自定义模型认定为openai渠道的bug #4748

Closed
wants to merge 11 commits into from
Closed
Changes from 8 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 10 additions & 2 deletions app/components/chat.module.scss
Original file line number Diff line number Diff line change
@@ -87,6 +87,14 @@
}
}

&[data-expanded="true"] {
width: var(--full-width) !important; /* 始终保持展开状态 */
.text {
opacity: 1;
transform: translate(0);
}
}

.text,
.icon {
display: flex;
@@ -458,7 +466,7 @@
width: $calc-image-width;
height: $calc-image-width;
}

.chat-message-item-image {
max-width: calc(100vw/3*2);
}
@@ -624,4 +632,4 @@
.chat-input-send {
bottom: 30px;
}
}
}
68 changes: 38 additions & 30 deletions app/components/chat.tsx
Original file line number Diff line number Diff line change
@@ -341,6 +341,7 @@ function ChatAction(props: {
text: string;
icon: JSX.Element;
onClick: () => void;
isExpanded?: boolean;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add keyboard accessibility to the ChatAction component.

The ChatAction component should also respond to keyboard events to ensure accessibility. Consider adding onKeyDown or similar keyboard event handlers.

function ChatAction(props: {
  text: string;
  icon: JSX.Element;
  onClick: () => void;
  isExpanded?: boolean;
}) {
+ onKeyDown={(e) => e.key === 'Enter' && props.onClick()}
  ...
}

Committable suggestion was skipped due to low confidence.

}) {
const iconRef = useRef<HTMLDivElement>(null);
const textRef = useRef<HTMLDivElement>(null);
@@ -360,6 +361,9 @@ function ChatAction(props: {
});
}

useEffect(() => {
updateWidth();
}, [props.icon, props.text]);
Comment on lines +364 to +366
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ensure updateWidth is included in the dependency array of useEffect.

The updateWidth function is used inside a useEffect but is not included in its dependency array. This might lead to stale closures capturing outdated values.

useEffect(() => {
  updateWidth();
- }, [props.icon, props.text]);
+ }, [props.icon, props.text, updateWidth]);
Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.

Suggested change
useEffect(() => {
updateWidth();
}, [props.icon, props.text]);
useEffect(() => {
updateWidth();
}, [props.icon, props.text, updateWidth]);
Tools
Biome

[error] 364-364: This hook does not specify all of its dependencies: updateWidth (lint/correctness/useExhaustiveDependencies)

This dependency is not specified in the hook dependency list.


[error] 364-364: This hook specifies more dependencies than necessary: props.icon, props.text (lint/correctness/useExhaustiveDependencies)

This dependency can be removed from the list.

This dependency can be removed from the list.

return (
<div
className={`${styles["chat-input-action"]} clickable`}
@@ -375,6 +379,7 @@ function ChatAction(props: {
"--full-width": `${width.full}px`,
} as React.CSSProperties
}
data-expanded={props.isExpanded} // 使用 data 属性来控制样式
>
<div ref={iconRef} className={styles["icon"]}>
{props.icon}
@@ -520,21 +525,21 @@ export function ChatActions(props: {
icon={props.uploading ? <LoadingButtonIcon /> : <ImageIcon />}
/>
)}
<ChatAction
onClick={nextTheme}
text={Locale.Chat.InputActions.Theme[theme]}
icon={
<>
{theme === Theme.Auto ? (
<AutoIcon />
) : theme === Theme.Light ? (
<LightIcon />
) : theme === Theme.Dark ? (
<DarkIcon />
) : null}
</>
}
/>
{/*<ChatAction*/}
{/* onClick={nextTheme}*/}
{/* text={Locale.Chat.InputActions.Theme[theme]}*/}
{/* icon={*/}
{/* <>*/}
{/* {theme === Theme.Auto ? (*/}
{/* <AutoIcon />*/}
{/* ) : theme === Theme.Light ? (*/}
{/* <LightIcon />*/}
{/* ) : theme === Theme.Dark ? (*/}
{/* <DarkIcon />*/}
{/* ) : null}*/}
{/* </>*/}
{/* }*/}
{/*/>*/}

<ChatAction
onClick={props.showPromptHints}
@@ -551,25 +556,28 @@ export function ChatActions(props: {
/>

<ChatAction
text={Locale.Chat.InputActions.Clear}
icon={<BreakIcon />}
onClick={() => {
chatStore.updateCurrentSession((session) => {
if (session.clearContextIndex === session.messages.length) {
session.clearContextIndex = undefined;
} else {
session.clearContextIndex = session.messages.length;
session.memoryPrompt = ""; // will clear memory
}
});
}}
/>

<ChatAction
isExpanded={true}
onClick={() => setShowModelSelector(true)}
text={currentModel}
icon={<RobotIcon />}
/>
<div style={{ marginLeft: "auto" }}>
<ChatAction
isExpanded={true}
text={Locale.Chat.InputActions.Clear}
icon={<BreakIcon />}
onClick={() => {
chatStore.updateCurrentSession((session) => {
if (session.clearContextIndex === session.messages.length) {
session.clearContextIndex = undefined;
} else {
session.clearContextIndex = session.messages.length;
session.memoryPrompt = ""; // will clear memory
}
});
}}
/>
</div>

{showModelSelector && (
<Selector
2 changes: 1 addition & 1 deletion app/components/sidebar.tsx
Original file line number Diff line number Diff line change
@@ -158,7 +158,7 @@ export function SideBar(props: { className?: string }) {
NextChat
</div>
<div className={styles["sidebar-sub-title"]}>
Build your own AI assistant.
Build your own AI assistant. (by chenzhen)
</div>
<div className={styles["sidebar-logo"] + " no-dark"}>
<ChatGptIcon />
2 changes: 1 addition & 1 deletion app/constant.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
export const OWNER = "Yidadaa";
export const OWNER = "imaiya";
export const REPO = "ChatGPT-Next-Web";
export const REPO_URL = `https://github.com/${OWNER}/${REPO}`;
export const ISSUE_URL = `https://github.com/${OWNER}/${REPO}/issues`;
4 changes: 2 additions & 2 deletions app/store/config.ts
Original file line number Diff line number Diff line change
@@ -34,13 +34,13 @@ export const DEFAULT_CONFIG = {
fontSize: 14,
theme: Theme.Auto as Theme,
tightBorder: !!config?.isApp,
sendPreviewBubble: true,
sendPreviewBubble: false,
enableAutoGenerateTitle: true,
sidebarWidth: DEFAULT_SIDEBAR_WIDTH,

disablePromptHint: false,

dontShowMaskSplashScreen: false, // dont show splash screen when create chat
dontShowMaskSplashScreen: true, // dont show splash screen when create chat
hideBuiltinMasks: false, // dont add builtin masks

customModels: "",
4 changes: 2 additions & 2 deletions app/utils/model.ts
Original file line number Diff line number Diff line change
@@ -2,7 +2,7 @@ import { LLMModel } from "../client/api";

const customProvider = (modelName: string) => ({
id: modelName,
providerName: "",
providerName: "*OpenAI",
providerType: "custom",
});

@@ -49,7 +49,7 @@ export function collectModelTable(
name,
displayName: displayName || name,
available,
provider: modelTable[name]?.provider ?? customProvider(name), // Use optional chaining
provider: customProvider(name), // Use optional chaining
};
}
});