Got this working finally. Thanks to @Naren Murali for helping with the solution

So as per Naren's solution from chat I'm loading the keys in the main.ts itself and then in the ChatModule I did the import with empty key. Then in the library module I used a BehaviourSUbject to hold the configuration and then subscribed it in the necessary services.

main.ts

fetch(`${environment.apiUrl}/keys`)
.then((response) => response.json())
.then((config) => {
platformBrowserDynamic([
      { provide: 'CHAT_CONFIG', useValue: upChatConfig },
      {
        provide: UpChatLibModule,
        useValue: UpChatLibModule.forRoot({
          apiKey: config.streamApiKey,
          service: {
            provide: UpChatApiIntegrationService,
            useClass: ChatApiIntegrationService,
          },
        }),
      },
      { provide: STREAM_API_KEY, useValue: config.streamApiKey },
    ])
      .bootstrapModule(AppModule)
      .catch((err) => console.error(err));
  })
.catch((error) => {
console.error('❌ Error fetching API key:', error);
});

ChatModule

imports: [
    CommonModule,
    HttpClientModule,
    TranslateModule,
    UpChatLibModule.forRoot({
      apiKey: '',
      service: {
        provide: UpChatApiIntegrationService,
        useClass: ChatApiIntegrationService,
      },
    }),
  ],

UpChatLibModule

export class UpChatLibModule {
  private static chatConfigSubject = new BehaviorSubject<UpChatConfiguration | null>(null);
 static forRoot(
    configuration: UpChatConfiguration
  ): ModuleWithProviders<UpChatLibModule> {
      console.log('ApiKey', configuration);
      this.chatConfigSubject.next(configuration);
    return {
      ngModule: UpChatLibModule,
      providers: [
        configuration.service,
        { provide: 'CHAT_CONFIG', useValue: this.chatConfigSubject.asObservable() },
      ],
    };
  }
}